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,46 @@
+import Bugsnag from "@bugsnag/js";
+import React, { type ReactNode } from "react";
+
+import { ErrorHandler } from "@/components/shared/ErrorHandler";
+import { getBugsnagConfig } from "@/services/errorManagement/bugsnag";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+/**
+ * Generic ErrorBoundary that determines which error reporting service to use.
+ * Currently supports Bugsnag, but can be extended to support other services.
+ */
+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;
+        }) => (
+          <ErrorHandler
+            error={props.error}
+            errorType="app_error_boundary"
+            resetErrorBoundary={props.clearError}
+          />
+        )}
+      >
+        {children}
+      </BugsnagBoundary>
+    );
+  }
+
+  // Fallback: no error boundary (just render children)
+  // In the future, this could check for other error reporting services
+  return <>{children}</>;
+};

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>,
   );
 }