Add bugsnag

packages/frontend/package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@bugsnag/browser-performance": "^2.4.1",
+    "@bugsnag/js": "^7.22.7",
+    "@bugsnag/plugin-react": "^7.22.7",
     "@fontsource-variable/jetbrains-mono": "^5.0.19",
     "@fontsource/inter": "^5.0.16",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -66,8 +69,8 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.0",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.17.0",
     "@types/luxon": "^3.3.7",
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.66",

packages/frontend/src/index.tsx

@@ -13,6 +13,20 @@ import reportWebVitals from './reportWebVitals';
 import { GQLClientProvider } from './context/GQLClientContext';
 import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
+
+import Bugsnag from '@bugsnag/js';
+import BugsnagPluginReact from '@bugsnag/plugin-react';
+import BugsnagPerformance from '@bugsnag/browser-performance';
+
+const bugsnagApiKey = import.meta.env.VITE_BUGSNAG_API_KEY;
+if (bugsnagApiKey) {
+  Bugsnag.start({
+    apiKey: bugsnagApiKey,
+    plugins: [new BugsnagPluginReact()],
+  });
+  BugsnagPerformance.start({ apiKey: bugsnagApiKey });
+}
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
@@ -25,15 +39,20 @@ const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`;
 
 const gqlClient = new GQLClient({ gqlEndpoint });
 
+const ErrorBoundary = Bugsnag.getPlugin('react')!.createErrorBoundary(React);
+
 root.render(
-  <React.StrictMode>
-    <ThemeProvider>
-      <GQLClientProvider client={gqlClient}>
-        <App />
-        <Toaster />
-      </GQLClientProvider>
-    </ThemeProvider>
-  </React.StrictMode>,
+  <ErrorBoundary>
+    <React.StrictMode>
+      <ThemeProvider>
+        <GQLClientProvider client={gqlClient}>
+          <App />
+          <Toaster />
+        </GQLClientProvider>
+      </ThemeProvider>
+    </React.StrictMode>
+    ,
+  </ErrorBoundary>,
 );
 
 // If you want to start measuring performance in your app, pass a function