Merge branch 'error-boundary' into 'develop'

Improve error boundary styles, provide way to clear browser data See merge request soapbox-pub/soapbox-fe!482
3 years ago · bbd4aa4f8b
parent 55cc390ab9 ffa8fda6d5
commit bbd4aa4f8b
3 changed files with 56 additions and 8 deletions
--- a/app/soapbox/components/error_boundary.js
+++ b/app/soapbox/components/error_boundary.js
@ -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>
    );
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@ -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>
      </Provider>
    );
  }
--- a/app/styles/components/error-boundary.scss
+++ b/app/styles/components/error-boundary.scss
@ -1,4 +1,22 @@
 .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 {
    margin: auto;

@ -8,11 +26,20 @@
      color: var(--primary-text-color--faint);
    }

-    a {
+    a.return-home {
      display: block;
      margin: 15px auto;
      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;
+  }
 }