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;