Adding error reporting

Author: jayair

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@sentry/browser": "^5.15.4",
     "aws-amplify": "^3.0.6",
     "react": "^16.13.1",
     "react-bootstrap": "^0.33.1",

package.json

@@ -3,6 +3,7 @@ import { Auth } from "aws-amplify";
 import { Link, useHistory } from "react-router-dom";
 import { Nav, Navbar, NavItem } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
+import ErrorBoundary from "./components/ErrorBoundary";
 import { AppContext } from "./libs/contextLib";
 import { onError } from "./libs/errorLib";
 import Routes from "./Routes";
@@ -71,11 +72,11 @@ function App() {
             </Nav>
           </Navbar.Collapse>
         </Navbar>
-        <AppContext.Provider
-          value={{ isAuthenticated, userHasAuthenticated }}
-        >
-          <Routes />
-        </AppContext.Provider>
+        <ErrorBoundary>
+          <AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}>
+            <Routes />
+          </AppContext.Provider>
+        </ErrorBoundary>
       </div>
     )
   );

src/App.js

@@ -0,0 +1,4 @@
+.ErrorBoundary {
+  padding-top: 100px;
+  text-align: center;
+}

src/components/ErrorBoundary.css

@@ -0,0 +1,25 @@
+import React from "react";
+import { logError } from "../libs/errorLib";
+import "./ErrorBoundary.css";
+
+export default class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    logError(error, errorInfo);
+  }
+
+  render() {
+    return this.state.hasError ? (
+      <div className="ErrorBoundary">
+        <h3>Sorry there was a problem loading this page</h3>
+      </div>
+    ) : (
+      this.props.children
+    );
+  }
+}

src/components/ErrorBoundary.js

@@ -5,8 +5,11 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import config from './config';
+import { initSentry } from './libs/errorLib';
 import * as serviceWorker from './serviceWorker';
 
+initSentry();
+
 Amplify.configure({
   Auth: {
     mandatorySignIn: true,

src/index.js

@@ -1,10 +1,41 @@
+import * as Sentry from "@sentry/browser";
+
+const isLocal = process.env.NODE_ENV === "development";
+
+export function initSentry() {
+  if (isLocal) {
+    return;
+  }
+
+  Sentry.init({ dsn: "https://[email protected]/5185720" });
+}
+
+export function logError(error, errorInfo = null) {
+  if (isLocal) {
+    return;
+  }
+
+  Sentry.withScope((scope) => {
+    errorInfo && scope.setExtras(errorInfo);
+    Sentry.captureException(error);
+  });
+}
+
 export function onError(error) {
+  let errorInfo = {};
   let message = error.toString();
 
   // Auth errors
   if (!(error instanceof Error) && error.message) {
+    errorInfo = error;
     message = error.message;
+    error = new Error(message);
+    // API errors
+  } else if (error.config && error.config.url) {
+    errorInfo.url = error.config.url;
   }
 
+  logError(error, errorInfo);
+
   alert(message);
 }