v0.4.6 — Crash-Fixes: ErrorBoundary + Null-Safety

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { Layout, useSelectedWeek } from './components/Layout';
 import { WeekPlanner } from './components/WeekPlanner';
 import { ProductList } from './components/ProductList';
 import { InfoPage } from './components/InfoPage';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import { useProducts } from './hooks/useProducts';
 import './styles/globals.css';
 
@@ -68,6 +69,7 @@ function ProductsPage() {
 // Main App Component
 function App() {
   return (
+    <ErrorBoundary>
     <Router>
       <div className="App min-h-screen bg-gray-50 text-contrast-aa">
         <Routes>
@@ -87,6 +89,7 @@ function App() {
         </Routes>
       </div>
     </Router>
+    </ErrorBoundary>
   );
 }
 

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,58 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export 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:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 p-8">
+          <div className="text-center max-w-md">
+            <svg className="mx-auto h-16 w-16 text-red-400 mb-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.996-.833-2.764 0L3.732 16c-.77.833.192 2.5 1.732 2.5z" />
+            </svg>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+              Etwas ist schiefgelaufen
+            </h1>
+            <p className="text-gray-600 mb-6">
+              Ein unerwarteter Fehler ist aufgetreten. Bitte laden Sie die Seite neu.
+            </p>
+            {this.state.error && (
+              <p className="text-sm text-red-600 mb-6 font-mono bg-red-50 p-3 rounded">
+                {this.state.error.message}
+              </p>
+            )}
+            <button
+              onClick={() => window.location.reload()}
+              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors text-lg"
+            >
+              Seite neu laden
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/WeekPlanner.tsx

@@ -85,8 +85,8 @@ export function WeekPlanner({ year, week, className = '' }: WeekPlannerProps) {
     setPdfSuccess(null);
     
     try {
-      const result = await ExportPDF(weekPlan.id, '');
+      await ExportPDF(weekPlan.id, '');
-      setPdfSuccess(result || 'PDF wurde erfolgreich erstellt.');
+      setPdfSuccess('PDF wurde erfolgreich erstellt.');
       
       // Success-Nachricht nach 5 Sekunden ausblenden
       setTimeout(() => {

frontend/src/hooks/useProducts.ts

@@ -66,7 +66,9 @@ export function useProducts() {
         data.additiveIds
       );
       
+      if (newProduct) {
         setProducts(prev => [...prev, newProduct]);
+      }
       return newProduct;
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Fehler beim Erstellen des Produkts');
@@ -90,7 +92,9 @@ export function useProducts() {
         data.additiveIds
       );
       
+      if (updatedProduct) {
         setProducts(prev => prev.map(p => p.id === id ? updatedProduct : p));
+      }
       return updatedProduct;
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Fehler beim Bearbeiten des Produkts');

frontend/src/hooks/useWeekPlan.ts

@@ -96,11 +96,12 @@ export function useWeekPlan(year: number, week: number) {
         groupLabel ?? null
       );
       
-      // State aktualisieren
+      if (newEntry) {
         setWeekPlan(prev => prev ? {
           ...prev,
           entries: [...prev.entries, newEntry]
         } : null);
+      }
       
       return newEntry;
     } catch (err) {
@@ -138,11 +139,12 @@ export function useWeekPlan(year: number, week: number) {
       // Go: UpdatePlanEntry(id int, productID *int, customText *string, groupLabel *string)
       const updatedEntry = await UpdatePlanEntry(entryId, productId ?? null, customText ?? null, groupLabel ?? null);
       
-      // State aktualisieren
+      if (updatedEntry) {
         setWeekPlan(prev => prev ? {
           ...prev,
           entries: prev.entries.map(e => e.id === entryId ? updatedEntry : e)
         } : null);
+      }
       
       return updatedEntry;
     } catch (err) {