mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Improve error boundary styles, provide way to clear browser data

notifs-dropdown
Alex Gleason 2021-04-22 13:57:47 -05:00
rodzic 55cc390ab9
commit ffa8fda6d5
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 56 dodań i 8 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

25
app/soapbox/components/error_boundary.js
Wyświetl plik

@ -22,6 +22,11 @@ export default class ErrorBoundary extends React.PureComponent {
}); });
} }
clearCookies = e => {
localStorage.clear();
sessionStorage.clear();
}
render() { render() {
const { hasError } = this.state; const { hasError } = this.state;
@ -32,8 +37,26 @@ export default class ErrorBoundary extends React.PureComponent {
return ( return (
<div className='error-boundary'> <div className='error-boundary'>
<div> <div>
<i className='fa fa-frown-o' aria-hidden='true' />
<FormattedMessage id='alert.unexpected.message' defaultMessage='An unexpected error occurred.' /> <FormattedMessage id='alert.unexpected.message' defaultMessage='An unexpected error occurred.' />
<a href='/'>Return Home</a> <a href='/' className='return-home'>
<i className='fa fa-reply' aria-hidden='true' />&nbsp;
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
</a>
<p className='help-text'>
<FormattedMessage
id='alert.unexpected.help_text'
defaultMessage='If the problem persists, please notify a site admin with a screenshot and information about your web browser. You may also {clear_cookies} (this will log you out).'
values={{ clear_cookies: (
<a href='/' onClick={this.clearCookies}>
<FormattedMessage
id='alert.unexpected.clear_cookies'
defaultMessage='clear cookies and browser data'
/>
</a>
) }}
/>
</p>
</div> </div>
</div> </div>
); );

8
app/soapbox/containers/soapbox.js
Wyświetl plik

@ -124,7 +124,7 @@ class SoapboxMount extends React.PureComponent {
return ( return (
<IntlProvider locale={locale} messages={this.state.messages}> <IntlProvider locale={locale} messages={this.state.messages}>
<> <ErrorBoundary>
<Helmet> <Helmet>
<body className={bodyClass} /> <body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>} {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
@ -141,7 +141,7 @@ class SoapboxMount extends React.PureComponent {
</Switch> </Switch>
</ScrollContext> </ScrollContext>
</BrowserRouter> </BrowserRouter>
</> </ErrorBoundary>
</IntlProvider> </IntlProvider>
); );
} }
@ -177,9 +177,7 @@ export default class Soapbox extends React.PureComponent {
render() { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<ErrorBoundary> <SoapboxMount />
<SoapboxMount />
</ErrorBoundary>
</Provider> </Provider>
); );
} }

31
app/styles/components/error-boundary.scss
Wyświetl plik

@ -1,4 +1,22 @@
.error-boundary { .error-boundary {
box-sizing: border-box;
min-height: 100vh;
max-width: 375px;
text-align: center;
padding: 10px 10px 80px;
i.fa.fa-frown-o {
display: block;
text-align: center;
font-size: 70px;
margin-bottom: 20px;
opacity: 0.5;
}
a {
color: var(--brand-color);
}
> div { > div {
margin: auto; margin: auto;
@ -8,11 +26,20 @@
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
} }
a { a.return-home {
display: block; display: block;
margin: 15px auto; margin: 15px auto;
text-align: center; text-align: center;
color: var(--brand-color);
} }
} }
p.help-text {
text-align: left;
font-style: italic;
font-size: 14px;
padding: 20px 10px 0;
margin-top: 70px;
opacity: 0.7;
border-top: 1px solid;
}
} }