Add ErrorBoundary component to catch render-time errors

- Create ErrorBoundary component to handle React render errors
- Wrap App component with ErrorBoundary for global error handling
- Add comprehensive tests for ErrorBoundary functionality
- Show fallback UI with error message when errors occur

frontend/src/App.tsx

@@ -26,6 +26,7 @@ import { AuthProvider } from "./providers/AuthProvider";
 import { TimezoneProvider } from "./providers/TimezoneProvider";
 import { RequireAuth } from "./components/RequireAuth";
 import { SetupGuard } from "./components/SetupGuard";
+import { ErrorBoundary } from "./components/ErrorBoundary";
 import { MainLayout } from "./layouts/MainLayout";
 import { SetupPage } from "./pages/SetupPage";
 import { LoginPage } from "./pages/LoginPage";
@@ -43,9 +44,10 @@ import { BlocklistsPage } from "./pages/BlocklistsPage";
 function App(): React.JSX.Element {
   return (
     <FluentProvider theme={lightTheme}>
-      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <ErrorBoundary>
-        <AuthProvider>
+        <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-          <Routes>
+          <AuthProvider>
+            <Routes>
             {/* Setup wizard — always accessible; redirects to /login if already done */}
             <Route path="/setup" element={<SetupPage />} />
 
@@ -85,6 +87,7 @@ function App(): React.JSX.Element {
           </Routes>
         </AuthProvider>
       </BrowserRouter>
+    </ErrorBoundary>
     </FluentProvider>
   );
 }

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,62 @@
+/**
+ * React error boundary component.
+ *
+ * Catches render-time exceptions in child components and shows a fallback UI.
+ */
+import React from "react";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  errorMessage: string | null;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, errorMessage: null };
+    this.handleReload = this.handleReload.bind(this);
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, errorMessage: error.message || "Unknown error" };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.error("ErrorBoundary caught an error", { error, errorInfo });
+  }
+
+  handleReload(): void {
+    window.location.reload();
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "100vh",
+            padding: "24px",
+            textAlign: "center",
+          }}
+          role="alert"
+        >
+          <h1>Something went wrong</h1>
+          <p>{this.state.errorMessage ?? "Please try reloading the page."}</p>
+          <button type="button" onClick={this.handleReload} style={{ marginTop: "16px" }}>
+            Reload
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+function ExplodingChild(): React.ReactElement {
+  throw new Error("boom");
+}
+
+describe("ErrorBoundary", () => {
+  it("renders the fallback UI when a child throws", () => {
+    render(
+      <ErrorBoundary>
+        <ExplodingChild />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByText(/boom/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /reload/i })).toBeInTheDocument();
+  });
+
+  it("renders children normally when no error occurs", () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="safe-child">safe</div>
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByTestId("safe-child")).toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+});