Adding Sentry

src/components/Layout/index.js

@@ -2,17 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
+import SentryBoundary from 'components/SentryBoundary';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 
-const Layout = ({ title, children }) => <React.Fragment>
+const Layout = ({ title, children }) => <SentryBoundary>
   <Helmet>
     <title>{ title ? `Regexper - ${ title }` : 'Regexper' }</title>
   </Helmet>
   <Header />
-  { children }
+  <SentryBoundary>
+    { children }
+  </SentryBoundary>
   <Footer />
-</React.Fragment>;
+</SentryBoundary>;
 
 Layout.propTypes = {
   title: PropTypes.string,

src/components/SentryBoundary/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Sentry from '@sentry/browser';
+
+import SentryError from 'components/SentryError';
+
+class SentryBoundary extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    Sentry.captureException(error, errorInfo);
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      return <SentryError />;
+    } else {
+      return children;
+    }
+  }
+}
+
+SentryBoundary.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
+
+export default SentryBoundary;

src/components/SentryError/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as Sentry from '@sentry/browser';
+
+import Message from 'components/Message';
+
+class SentryError extends React.Component {
+  reportError = event => {
+    event.preventDefault();
+
+    if (Sentry.lastEventId()) {
+      Sentry.showReportDialog();
+    }
+  }
+
+  render() {
+    return <Message type="error" heading="An error has occurred">
+      <p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
+    </Message>;
+  }
+}
+
+export default SentryError;