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;