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}>
-        <ThemeProvider theme={theme}>
+        <ErrorBoundary>
           <Provider {...stores}>
             <Router>
               <ScrollToTop>
@@ -143,8 +143,8 @@ if (element) {
               </ScrollToTop>
             </Router>
           </Provider>
-        </ThemeProvider>
+        </ErrorBoundary>
-      </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,57 +287,59 @@ class DocumentScene extends React.Component<Props> {
     }
 
     return (
-      <Container key={document.id} isShare={isShare} column auto>
+      <ErrorBoundary>
-        {isMoving && <DocumentMove document={document} />}
+        <Container key={document.id} isShare={isShare} column auto>
-        <PageTitle
+          {isMoving && <DocumentMove document={document} />}
-          title={document.title.replace(document.emoji, '')}
+          <PageTitle
-          favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
+            title={document.title.replace(document.emoji, '')}
-        />
+            favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
-        {(this.isUploading || this.isSaving) && <LoadingIndicator />}
+          />
+          {(this.isUploading || this.isSaving) && <LoadingIndicator />}
 
-        <Container justify="center" column auto>
+          <Container justify="center" column auto>
-          {this.isEditing && (
+            {this.isEditing && (
-            <React.Fragment>
+              <React.Fragment>
-              <Prompt
+                <Prompt
-                when={document.hasPendingChanges}
+                  when={document.hasPendingChanges}
-                message={DISCARD_CHANGES}
+                  message={DISCARD_CHANGES}
+                />
+                <Prompt when={this.isUploading} message={UPLOADING_WARNING} />
+              </React.Fragment>
+            )}
+            {!isShare && (
+              <Header
+                document={document}
+                isDraft={!document.publishedAt}
+                isEditing={this.isEditing}
+                isSaving={this.isSaving}
+                isPublishing={this.isPublishing}
+                savingIsDisabled={!document.allowSave}
+                history={this.props.history}
+                onDiscard={this.onDiscard}
+                onSave={this.onSave}
               />
-              <Prompt when={this.isUploading} message={UPLOADING_WARNING} />
+            )}
-            </React.Fragment>
+            <MaxWidth column auto>
-          )}
+              <Editor
-          {!isShare && (
+                titlePlaceholder="Start with a title…"
-            <Header
+                bodyPlaceholder="…the rest is your canvas"
-              document={document}
+                defaultValue={document.text}
-              isDraft={!document.publishedAt}
+                pretitle={document.emoji}
-              isEditing={this.isEditing}
+                uploadImage={this.onUploadImage}
-              isSaving={this.isSaving}
+                onImageUploadStart={this.onImageUploadStart}
-              isPublishing={this.isPublishing}
+                onImageUploadStop={this.onImageUploadStop}
-              savingIsDisabled={!document.allowSave}
+                onSearchLink={this.onSearchLink}
-              history={this.props.history}
+                onClickLink={this.onClickLink}
-              onDiscard={this.onDiscard}
+                onChange={this.onChange}
-              onSave={this.onSave}
+                onSave={this.onSave}
-            />
+                onCancel={this.onDiscard}
-          )}
+                readOnly={!this.isEditing}
-          <MaxWidth column auto>
+                toc
-            <Editor
+              />
-              titlePlaceholder="Start with a title…"
+            </MaxWidth>
-              bodyPlaceholder="…the rest is your canvas"
+          </Container>
-              defaultValue={document.text}
-              pretitle={document.emoji}
-              uploadImage={this.onUploadImage}
-              onImageUploadStart={this.onImageUploadStart}
-              onImageUploadStop={this.onImageUploadStop}
-              onSearchLink={this.onSearchLink}
-              onClickLink={this.onClickLink}
-              onChange={this.onChange}
-              onSave={this.onSave}
-              onCancel={this.onDiscard}
-              readOnly={!this.isEditing}
-              toc
-            />
-          </MaxWidth>
         </Container>
-      </Container>
+      </ErrorBoundary>
     );
   }
 }