feat: add top-level ErrorBoundary component

Add decoupled ErrorBoundary component that determines which error
reporting service to use. Currently supports Bugsnag, but designed
to be extensible for other services. Integrate into app root.

Author: morgan-wowk

src/components/shared/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import Bugsnag from "@bugsnag/js";
+import React, { type ReactNode } from "react";
+import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
+
+import { ErrorPage } from "@/components/shared/ErrorPage";
+import { getBugsnagConfig } from "@/services/errorManagement/bugsnag";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+/**
+ * Application-wide error boundary that uses Bugsnag's error boundary when enabled,
+ * or falls back to react-error-boundary when Bugsnag is not configured.
+ */
+export const ErrorBoundary = ({ children }: ErrorBoundaryProps) => {
+  const bugsnagConfig = getBugsnagConfig();
+
+  // Use Bugsnag's ErrorBoundary if enabled
+  if (bugsnagConfig.enabled) {
+    const BugsnagBoundary =
+      Bugsnag.getPlugin("react")!.createErrorBoundary(React);
+
+    return (
+      <BugsnagBoundary
+        FallbackComponent={(props: {
+          error: Error;
+          info: React.ErrorInfo;
+          clearError: () => void;
+        }) => (
+          <ErrorPage
+            error={props.error}
+            resetErrorBoundary={props.clearError}
+          />
+        )}
+      >
+        {children}
+      </BugsnagBoundary>
+    );
+  }
+
+  // Fallback to react-error-boundary when Bugsnag is not enabled
+  return (
+    <ReactErrorBoundary FallbackComponent={ErrorPage}>
+      {children}
+    </ReactErrorBoundary>
+  );
+};

src/components/shared/ErrorPage.tsx

@@ -1,5 +1,5 @@
 import Bugsnag from "@bugsnag/js";
-import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
+import { useRouter } from "@tanstack/react-router";
 import { useEffect } from "react";
 
 import { InfoBox } from "@/components/shared/InfoBox";
@@ -8,30 +8,51 @@ import { BlockStack } from "@/components/ui/layout";
 import { Paragraph, Text } from "@/components/ui/typography";
 import { getBugsnagConfig } from "@/services/errorManagement/bugsnag";
 
-export const ErrorPage = ({ error, reset }: ErrorComponentProps) => {
+/**
+ * Unified props for ErrorPage component.
+ * Supports both router error props (reset) and react-error-boundary props (resetErrorBoundary).
+ */
+interface ErrorPageProps {
+  error: unknown;
+  reset?: () => void;
+  resetErrorBoundary?: () => void;
+}
+
+export const ErrorPage = ({
+  error,
+  reset,
+  resetErrorBoundary,
+}: ErrorPageProps) => {
   const router = useRouter();
 
+  // Use whichever reset function is provided
+  const resetFn = resetErrorBoundary ?? reset;
+
+  // Report error to Bugsnag when used from router (ErrorBoundary component handles its own reporting)
   useEffect(() => {
-    const config = getBugsnagConfig();
+    // Only report if this is a router error (has 'reset' instead of 'resetErrorBoundary')
+    if (reset) {
+      const config = getBugsnagConfig();
 
-    if (config.enabled && error instanceof Error) {
-      Bugsnag.notify(error, (event) => {
-        event.addMetadata("error_handler", {
-          pathname: window.location.pathname,
+      if (config.enabled && error instanceof Error) {
+        Bugsnag.notify(error, (event) => {
+          event.addMetadata("error_handler", {
+            pathname: window.location.pathname,
+          });
         });
-      });
+      }
     }
-  }, [error]);
+  }, [error, reset]);
 
   const handleRefresh = () => {
-    // Reset error boundary if available (some callers provide this function)
-    reset?.();
+    // Reset error boundary if available
+    resetFn?.();
     window.location.reload();
   };
 
   const handleGoHome = () => {
-    // Reset error boundary if available (some callers provide this function)
-    reset?.();
+    // Reset error boundary if available
+    resetFn?.();
     router.navigate({ to: "/" });
   };
 

src/index.tsx

@@ -7,6 +7,8 @@ import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { scan } from "react-scan";
 
+import { ErrorBoundary } from "@/components/shared/ErrorBoundary";
+
 import { router } from "./routes/router";
 import { initializeBugsnag } from "./services/errorManagement/bugsnag";
 
@@ -26,9 +28,11 @@ if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <ErrorBoundary>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </ErrorBoundary>
     </StrictMode>,
   );
 }