feat: add React Error Boundary to prevent white-screen crashes

Wraps AppRoutes in ErrorBoundary so any unhandled component error
shows a recovery UI instead of a blank white screen. Displays the
error message, a 'Try again' button (resets error state) and a
'Go home' button (navigates to /).

Class component because React doesn't support error boundaries
with hooks yet.

Closes OPE-15

Author: DevanshuNEU

frontend/src/App.tsx

@@ -18,6 +18,7 @@ import { ArchitecturePage } from './pages/ArchitecturePage';
 import { ContributingPage } from './pages/ContributingPage';
 import { GitHubCallbackPage } from './pages/GitHubCallbackPage';
 import { ScrollToTop } from './components/ScrollToTop';
+import { ErrorBoundary } from './components/ErrorBoundary';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
@@ -126,9 +127,11 @@ export function App() {
       <TooltipProvider>
         <BrowserRouter>
           <ScrollToTop />
-          <AuthProvider>
-            <AppRoutes />
-          </AuthProvider>
+          <ErrorBoundary>
+            <AuthProvider>
+              <AppRoutes />
+            </AuthProvider>
+          </ErrorBoundary>
         </BrowserRouter>
       </TooltipProvider>
     </ThemeProvider>

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+import { Component, type ReactNode } from 'react'
+import { Button } from './ui/button'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+// class component required -- React doesn't support error boundaries with hooks yet
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info.componentStack)
+  }
+
+  render() {
+    if (!this.state.hasError) return this.props.children
+
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background p-6">
+        <div className="max-w-md w-full text-center space-y-4">
+          <h1 className="text-2xl font-bold text-foreground">
+            Something went wrong
+          </h1>
+          <p className="text-muted-foreground">
+            An unexpected error occurred. This has been logged.
+          </p>
+          {this.state.error && (
+            <pre className="text-xs text-left bg-muted border border-border rounded-lg p-3 overflow-auto max-h-[120px] text-muted-foreground">
+              {this.state.error.message}
+            </pre>
+          )}
+          <div className="flex gap-3 justify-center pt-2">
+            <Button
+              variant="outline"
+              onClick={() => this.setState({ hasError: false, error: null })}
+            >
+              Try again
+            </Button>
+            <Button onClick={() => window.location.assign('/')}>
+              Go home
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}