Integrate bugsnag for frontend error detection

Author: akrantz01

frontend/.env.example

@@ -1,6 +1,9 @@
 # API configuration
 REACT_APP_API_BASE_URL=http://localhost.localdomain:8000
 
+# The BugSnag API key
+REACT_APP_BUGSNAG_API_KEY=abcdefghijklmnopqrstuvwxyz
+
 # Google Maps API key for address selection
 REACT_APP_GOOGLE_MAPS_API_KEY=abcdefghijklmnopqrstuvwxyz
 

frontend/.env.production

@@ -0,0 +1,3 @@
+# Re-map Cloudflare Pages environment variables
+REACT_APP_BUGSNAG_VERSION=${CF_PAGES_COMMIT_SHA}
+REACT_APP_BUGSNAG_BRANCH=${CF_PAGES_BRANCH}

frontend/.gitignore

@@ -13,7 +13,7 @@
 
 # misc
 .DS_Store
-.env.local
+.env.production.local
 .env.development.local
 .env.test.local
 .env.production.local

frontend/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@bugsnag/js": "^7.20.2",
+    "@bugsnag/plugin-react": "^7.19.0",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.17",
     "@reduxjs/toolkit": "^1.9.5",
@@ -32,6 +34,7 @@
     "yup": "^1.1.1"
   },
   "devDependencies": {
+    "@bugsnag/source-maps": "^2.3.1",
     "@types/crypto-js": "^4.1.1",
     "@types/google.maps": "^3.52.5",
     "@types/luxon": "^3.3.0",
@@ -57,8 +60,10 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "lint": "eslint --fix ."
+    "source-map:upload": "node scripts/upload-source-maps.mjs",
+    "source-map:analyze": "source-map-explorer 'build/static/js/*.js'",
+    "lint": "eslint --fix .",
+    "production": "yarn build && yarn source-map:upload"
   },
   "engines": {
     "node": "^18"

frontend/scripts/upload-source-maps.mjs

@@ -0,0 +1,24 @@
+import { browser } from '@bugsnag/source-maps';
+
+const API_KEY = process.env.REACT_APP_BUGSNAG_API_KEY;
+const VERSION = process.env.CF_PAGES_COMMIT_SHA || 'dev';
+const BASE_DOMAIN = process.env.CF_PAGES_URL || 'https://localhost.localdomain:3000';
+
+console.log(BASE_DOMAIN);
+
+async function main() {
+  if (API_KEY === undefined) {
+    console.error('Missing REACT_APP_BUGSNAG_API_KEY environment variable');
+    process.exit(1);
+  }
+
+  await browser.uploadMultiple({
+    apiKey: API_KEY,
+    appVersion: VERSION,
+    overwrite: true,
+    directory: './build/static/js',
+    baseUrl: `${BASE_DOMAIN}/static/js`,
+  });
+}
+
+main();

frontend/src/ErrorHandler.tsx

@@ -0,0 +1,39 @@
+import Bugsnag from '@bugsnag/js';
+import BugsnagPluginReact from '@bugsnag/plugin-react';
+import React, { FC, ReactNode } from 'react';
+
+const API_KEY = process.env.REACT_APP_BUGSNAG_API_KEY;
+const VERSION = process.env.REACT_APP_BUGSNAG_VERSION || 'dev';
+
+const BRANCH = process.env.REACT_APP_BUGSNAG_BRANCH || 'dev';
+const STAGE = BRANCH === 'main' ? 'production' : BRANCH;
+
+console.log(VERSION);
+console.log(BRANCH);
+console.log(STAGE);
+
+interface Props {
+  children: ReactNode;
+}
+
+let ErrorHandler: FC<Props>;
+
+if (API_KEY === undefined) {
+  // eslint-disable-next-line react/display-name
+  ErrorHandler = ({ children }: Props): JSX.Element => <>{children}</>;
+} else {
+  Bugsnag.start({
+    apiKey: API_KEY,
+    appVersion: VERSION,
+    releaseStage: STAGE,
+    plugins: [new BugsnagPluginReact()],
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const ErrorBoundary = Bugsnag.getPlugin('react')!.createErrorBoundary(React);
+
+  // eslint-disable-next-line react/display-name
+  ErrorHandler = ({ children }: Props): JSX.Element => <ErrorBoundary>{children}</ErrorBoundary>;
+}
+
+export default ErrorHandler;

frontend/src/index.tsx

@@ -8,20 +8,23 @@ import 'flatpickr/dist/flatpickr.min.css';
 import './index.css';
 
 import App from './App';
+import ErrorHandler from './ErrorHandler';
 import Loading from './Loading';
 import { store } from './store';
 
 const container = document.getElementById('root');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 createRoot(container!).render(
   <React.StrictMode>
-    <Provider store={store}>
-      <BrowserRouter>
-        <Toaster position="top-right" toastOptions={{ duration: 2500 }} />
-        <Suspense fallback={<Loading />}>
-          <App />
-        </Suspense>
-      </BrowserRouter>
-    </Provider>
+    <ErrorHandler>
+      <Provider store={store}>
+        <BrowserRouter>
+          <Toaster position="top-right" toastOptions={{ duration: 2500 }} />
+          <Suspense fallback={<Loading />}>
+            <App />
+          </Suspense>
+        </BrowserRouter>
+      </Provider>
+    </ErrorHandler>
   </React.StrictMode>,
 );

frontend/src/participants/pages/statuses/Pending.tsx

@@ -1,3 +1,4 @@
+import Bugsnag from '@bugsnag/js';
 import React from 'react';
 
 import Link from '../../../components/Link';
@@ -19,6 +20,7 @@ const Pending = (): JSX.Element => (
       Twitter
     </Link>{' '}
     to keep up-to-date with the latest information.
+    <button onClick={() => Bugsnag.notify(new Error('test error'))}>Error</button>
   </Status>
 );
 

frontend/src/store/authentication.ts

@@ -1,3 +1,4 @@
+import Bugsnag from '@bugsnag/js';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 import { AuthenticationStatus, Participant, Provider, ProviderWithClientSecret, ReducedProvider } from './types';
@@ -37,6 +38,23 @@ const api = createApi({
     // User endpoints
     currentUser: builder.query<Me, void>({
       query: () => ({ url: '/auth/me' }),
+      transformResponse: (response: Me) => {
+        // Add the user context if able
+        if (response.email) {
+          Bugsnag.setUser(undefined, response.email, undefined);
+          Bugsnag.addMetadata('authentication', { status: response.status, email: response.email });
+        }
+        if (response.participant) {
+          Bugsnag.setUser(
+            response.participant.id.toString(),
+            response.participant.email,
+            `${response.participant.first_name} ${response.participant.last_name}`,
+          );
+          Bugsnag.addMetadata('authentication', { status: response.status, ...response.participant });
+        }
+
+        return response;
+      },
       providesTags: () => [Tag.Profile],
     }),
     completeProfile: builder.mutation<Participant, ProfileCreate>({