Merge pull request #408 from jorilallo/error-boundary

Added high level ErrorBoundary

app/components/Editor/components/Heading.js

@@ -27,6 +27,7 @@ function Heading(props: Props) {
     readOnly,
     children,
     component = 'h1',
+    className,
     attributes,
     className,
   } = props;

app/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,42 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+
+@observer
+class ErrorBoundary extends Component {
+  @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>Something went wrong</h1>
+          <p>
+            An unrecoverable error occurred. Please try{' '}
+            <a onClick={this.handleReload}>reloading</a>.
+          </p>
+        </CenteredContent>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

app/components/ErrorBoundary/index.js

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