stabile version

src/components/ErrorBoundary.jsx

@@ -0,0 +1,29 @@
+import { Component } from 'react';
+
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{ padding: 32 }}>
+                    <h2>Etwas ist schiefgelaufen.</h2>
+                    <p>{this.state.error?.message || 'Unbekannter Fehler'}</p>
+                    <button onClick={() => this.setState({ hasError: false })}>
+                        Erneut versuchen
+                    </button>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

src/components/Layout.jsx

@@ -14,6 +14,7 @@ import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import HomeIcon from '@mui/icons-material/Home';
 import StoreIcon from '@mui/icons-material/Store';
 import { useAuth } from '../context/AuthContext';
+import ErrorBoundary from './ErrorBoundary';
 
 const DRAWER_WIDTH = 240;
 
@@ -34,9 +35,9 @@ const navCategories = [
   {
     label: 'Reporter',
     items: [
-      { label: 'Neuigkeiten',        path: '/posts',       icon: <ArticleIcon />,    roles: ['ADMIN', 'REPORTER'] },
-      { label: 'Kalendereinträge',        path: '/calenderPosts',       icon: <CalendarMonthIcon />,    roles: ['ADMIN', 'REPORTER'] },
-      { label: 'Sehenswürdigkeiten', path: '/attractions', icon: <LocationOnIcon />, roles: ['ADMIN', 'REPORTER'] },
+      { label: 'Neuigkeiten',        path: '/posts',       icon: <ArticleIcon />,       roles: ['ADMIN', 'REPORTER'] },
+      { label: 'Kalendereinträge',   path: '/calenderPosts', icon: <CalendarMonthIcon />, roles: ['ADMIN', 'REPORTER'] },
+      { label: 'Sehenswürdigkeiten', path: '/attractions', icon: <LocationOnIcon />,    roles: ['ADMIN', 'REPORTER'] },
     ],
   },
   {
@@ -173,8 +174,11 @@ export default function Layout() {
               </Tooltip>
             </Toolbar>
           </AppBar>
+
           <Box sx={{ p: 3 }}>
-            <Outlet />
+            <ErrorBoundary>
+              <Outlet />
+            </ErrorBoundary>
           </Box>
         </Box>
       </Box>