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 }}>
-        <AuthProvider>
-          <Routes>
+      <ErrorBoundary>
+        <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+          <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>
   );
 }