feat(error-boundary): React ErrorBoundary + global wrapping in App.tsx [tsc:ok]

.phase4-state.json

@@ -1,7 +1,8 @@
 {
   "completed_features": [
-    "admin-user-management"
+    "admin-user-management",
+    "csv-export-time-entries"
   ],
-  "current_feature": "csv-export-time-entries",
+  "current_feature": "error-boundary",
   "started_at": "2026-05-23T05:10:51.482879"
 }

GENERATION_LOG.md

@@ -483,3 +483,15 @@ undefined
 - `05:15:03` **INFO**     wrote 8846 chars in 71.0s (attempt 1)
 - `05:15:03` **INFO** Running tsc --noEmit on api…
 - `05:15:04` **INFO**   tsc clean ✓
+- `05:15:04` **INFO**   Committed feature csv-export-time-entries
+- `05:15:05` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: error-boundary (2026-05-23 05:15:05)
+
+- `05:15:05` **INFO** Description: React ErrorBoundary + global wrapping in App.tsx
+- `05:15:05` **INFO**   Generating apps/web/src/components/ErrorBoundary.tsx (React-ErrorBoundary class-component. Fängt unkaufgefangene Render-Erro…)
+- `05:15:26` **INFO**     wrote 2338 chars in 21.9s (attempt 1)
+- `05:15:26` **INFO**   Generating apps/web/src/App.tsx (ERWEITERT — wrap RouterProvider in <ErrorBoundary>. Behalte ToastProvi…)
+- `05:15:45` **INFO**     wrote 2176 chars in 18.3s (attempt 1)
+- `05:15:45` **INFO** Running tsc --noEmit on api…
+- `05:15:46` **INFO**   tsc clean ✓

apps/web/src/App.tsx

@@ -7,6 +7,7 @@ import Projects from "./pages/Projects"
 import Profile from "./pages/Profile"
 import Nav from "./components/Nav"
 import { ToastProvider } from "./components/Toast"
+import ErrorBoundary from "./components/ErrorBoundary"
 import { api } from "./lib/api"
 
 const rootRoute = createRootRoute({
@@ -92,7 +93,9 @@ declare module "@tanstack/react-router" {
 export default function App() {
   return (
     <ToastProvider>
+      <ErrorBoundary>
         <RouterProvider router={router} />
+      </ErrorBoundary>
     </ToastProvider>
   )
 }

apps/web/src/components/ErrorBoundary.tsx

@@ -0,0 +1,74 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen w-full flex items-center justify-center bg-slate-50 p-4 font-sans">
+          <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8 text-center border border-slate-200">
+            <div className="mb-6 flex justify-center">
+              <div className="bg-red-100 p-3 rounded-full">
+                <svg 
+                  className="w-8 h-8 text-red-600" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" 
+                  />
+                </svg>
+              </div>
+            </div>
+            
+            <h1 className="text-2xl font-bold text-slate-900 mb-2">
+              Etwas ist schiefgelaufen
+            </h1>
+            
+            <p className="text-slate-600 mb-8">
+              {this.state.error?.message || 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut.'}
+            </p>
+            
+            <button
+              onClick={this.handleReload}
+              className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors duration-200 shadow-sm"
+            >
+              Seite neu laden
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}