Catch errors around document rendering

app/components/ErrorBoundary.js

@@ -0,0 +1,64 @@
+// @flow
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
+import HelpText from 'components/HelpText';
+import Button from 'components/Button';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import { githubIssuesUrl } from '../../shared/utils/routeHelpers';
+
+type Props = {
+  children: React.Node,
+};
+
+@observer
+class ErrorBoundary extends React.Component<Props> {
+  @observable error: boolean = false;
+
+  componentDidCatch(error: Error, info: Object) {
+    this.error = true;
+
+    // Error handler is often blocked by the browser
+    if (window.Bugsnag) {
+      Bugsnag.notifyException(error, { react: info });
+    }
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  contactSupport = () => {
+    window.open(githubIssuesUrl());
+  };
+
+  render() {
+    if (this.error) {
+      const isReported = !!window.Bugsnag;
+
+      return (
+        <CenteredContent>
+          <PageTitle title="Something Unexpected Happened" />
+          <h1>Something Unexpected Happened</h1>
+          <HelpText>
+            Sorry, an unrecoverable error occurred{isReported &&
+              ' – our engineers have been notified'}. Please try reloading the
+            page, it may have been a temporary glitch.
+          </HelpText>
+          <p>
+            <Button onClick={this.handleReload}>Reload</Button>{' '}
+            {DEPLOYMENT === 'hosted' && (
+              <Button onClick={this.contactSupport} light>
+                Report Bug…
+              </Button>
+            )}
+          </p>
+        </CenteredContent>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

app/components/ErrorBoundary/ErrorBoundary.js

@@ -1,52 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable } from 'mobx';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-
-type Props = {
-  children?: ?React.Node,
-};
-
-@observer
-class ErrorBoundary extends React.Component<Props> {
-  @observable error: boolean = false;
-
-  componentDidCatch(error: Error, info: Object) {
-    this.error = true;
-
-    // Error handler is often blocked by the browser
-    if (window.Bugsnag) {
-      Bugsnag.notifyException(error, { react: info });
-    }
-  }
-
-  handleReload = () => {
-    window.location.reload();
-  };
-
-  render() {
-    if (this.error) {
-      return (
-        <CenteredContent>
-          <PageTitle title="Something went wrong" />
-          <h1>
-            <span role="img" aria-label="Space ship">
-              🛸
-            </span>{' '}
-            Something unexpected happened
-          </h1>
-          <p>
-            An unrecoverable error occurred{window.Bugsnag ||
-              (true && ' and our engineers have been notified')}. Please try{' '}
-            <a onClick={this.handleReload}>reloading</a>.
-          </p>
-        </CenteredContent>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

app/components/ErrorBoundary/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ErrorBoundary from './ErrorBoundary';
-export default ErrorBoundary;

app/index.js

@@ -57,8 +57,8 @@ const element = document.getElementById('root');
 if (element) {
   render(
     <React.Fragment>
-      <ErrorBoundary>
       <ThemeProvider theme={theme}>
+        <ErrorBoundary>
           <Provider {...stores}>
             <Router>
               <ScrollToTop>
@@ -143,8 +143,8 @@ if (element) {
               </ScrollToTop>
             </Router>
           </Provider>
-        </ThemeProvider>
         </ErrorBoundary>
+      </ThemeProvider>
       {DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}
     </React.Fragment>,
     element

app/scenes/Document/Document.js

@@ -27,6 +27,7 @@ import DocumentMove from './components/DocumentMove';
 import UiStore from 'stores/UiStore';
 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
+import ErrorBoundary from 'components/ErrorBoundary';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import LoadingIndicator from 'components/LoadingIndicator';
 import CenteredContent from 'components/CenteredContent';
@@ -286,6 +287,7 @@ class DocumentScene extends React.Component<Props> {
     }
 
     return (
+      <ErrorBoundary>
         <Container key={document.id} isShare={isShare} column auto>
           {isMoving && <DocumentMove document={document} />}
           <PageTitle
@@ -337,6 +339,7 @@ class DocumentScene extends React.Component<Props> {
             </MaxWidth>
           </Container>
         </Container>
+      </ErrorBoundary>
     );
   }
 }