Adding error boundary using Sentry.io

src/components/RavenBoundary.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import RavenError from './RavenError';
+
+class RavenBoundary extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      error: null
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({ error, errorInfo });
+  }
+
+  render() {
+    const { error, errorInfo } = this.state;
+    const { children } = this.props;
+
+    if (error) {
+      const errorProps = {
+        heading: 'An error has occurred.',
+        details: { extra: errorInfo },
+        error
+      };
+
+      return <RavenError { ...errorProps }/>;
+    } else {
+      return children;
+    }
+  }
+}
+
+RavenBoundary.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+
+export default RavenBoundary;

src/components/RavenError.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Raven } from '../sentry';
+
+import Message from './Message';
+import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+
+class RavenError extends React.Component {
+  componentDidMount() {
+    const { error, details } = this.props;
+    Raven.captureException(error, details);
+  }
+
+  reportError = event => {
+    event.preventDefault();
+
+    if (Raven.lastEventId()) {
+      Raven.showReportDialog();
+    }
+  }
+
+  render() {
+    const { heading } = this.props;
+
+    return <Message icon={ AlertIcon } heading={ heading }>
+      <p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
+    </Message>;
+  }
+}
+
+RavenError.propTypes = {
+  error: PropTypes.object.isRequired,
+  details: PropTypes.object.isRequired,
+  heading: PropTypes.string.isRequired
+};
+
+export default RavenError;

src/pages/index/index.js

@@ -2,16 +2,27 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from '../../components/App';
+import RavenBoundary from '../../components/RavenBoundary';
 
 import '../../style.css';
 import { setupServiceWorker } from '../../service-worker';
 import { setupGA } from '../../analytics';
-import { setupRaven } from '../../sentry';
+import { Raven, setupRaven } from '../../sentry';
 
 setupRaven();
-setupGA();
-if (process.env.NODE_ENV === 'production') {
-  setupServiceWorker();
-}
 
-ReactDOM.render(<App/>, document.getElementById('root'));
+try {
+  setupGA();
+  if (process.env.NODE_ENV === 'production') {
+    setupServiceWorker();
+  }
+
+  ReactDOM.render(
+    <RavenBoundary>
+      <App/>
+    </RavenBoundary>,
+    document.getElementById('root'));
+}
+catch (e) {
+  Raven.captureException(e);
+}

src/sentry.js

@@ -9,4 +9,4 @@ const setupRaven = () => {
   });
 };
 
-export { setupRaven };
+export { Raven, setupRaven };