matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve error boundary styles, provide way to clear browser data

Browse Source
This commit is contained in:
Alex Gleason
2021-04-22 13:57:47 -05:00
parent 55cc390ab9
commit ffa8fda6d5
3 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/soapbox/components/error_boundary.js
View File

@ -22,6 +22,11 @@ export default class ErrorBoundary extends React.PureComponent {
});
}
clearCookies = e => {
localStorage.clear();
sessionStorage.clear();
}
render() {
const { hasError } = this.state;
@ -32,8 +37,26 @@ export default class ErrorBoundary extends React.PureComponent {
return (
<div className='error-boundary'>
<div>
<i className='fa fa-frown-o' aria-hidden='true' />
<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>
);

8
app/soapbox/containers/soapbox.js
View File

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