Workers P2: Fehlergrenze um die Routen, damit ein fehlender lazy-Chunk nicht die ganze Oberfläche leert

Ein alter Tab nach einem Deploy fordert den Seiten-Chunk mit altem Hash an, nginx liefert die index.html, der Import schlägt fehl und React räumte ohne Boundary den gesamten Baum ab. RouteErrorBoundary hält Menü und Rahmen, zeigt den Hinweis mit Knopf „Seite neu laden“ und räumt den Fehler beim Pfadwechsel weg.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.jsx

@@ -23,6 +23,7 @@ import ServicesPage from './pages/ServicesPage'
 import ServerpulsPage from './pages/ServerpulsPage'
 import BankCallbackPage from './pages/BankCallbackPage'
 import AdminRoute from './components/AdminRoute'
+import RouteErrorBoundary from './components/RouteErrorBoundary'
 import { safeReturnPath } from './lib/returnPath'
 
 // Hochhaus der Hustler: erst beim Öffnen laden, damit Engine und Schrift nicht im Haupt-Bundle liegen
@@ -124,7 +125,8 @@ function AppContent() {
           <Link className="brand" to="/tickets"><Logo />WEBklar</Link>
           <button type="button" className="btn btn-quiet" onClick={open} aria-expanded={menuOpen} aria-controls="menue">Menü</button>
         </div>
-        <main id="inhalt"><AppRoutes /></main>
+        {/* Fängt u. a. einen fehlenden lazy-Chunk ab (alter Tab nach einem Deploy): Menü bleibt, Knopf lädt neu */}
+        <main id="inhalt"><RouteErrorBoundary resetKey={location.pathname}><AppRoutes /></RouteErrorBoundary></main>
       </div>
     </div>
   )

src/components/RouteErrorBoundary.jsx

@@ -0,0 +1,42 @@
+import { Component } from 'react'
+import EmptyState from './ui/EmptyState'
+import Button from './ui/Button'
+
+// Fängt Fehler beim Aufbau einer Seite ab, damit nicht die ganze Oberfläche verschwindet.
+// Wichtigster Fall: Nach einem Deploy fehlt einem alten, noch offenen Tab der Chunk einer lazy geladenen Seite
+// (nginx antwortet statt mit der .js-Datei mit der index.html, der Import schlägt fehl). Ohne Boundary räumt React
+// dann den gesamten Baum ab (leere Seite); so bleiben Menü und Rahmen stehen und ein Knopf lädt neu.
+// resetKey ist der Pfad: ein Seitenwechsel im Menü räumt den Fehler weg. Ein fehlgeschlagener lazy-Import bleibt
+// dagegen fehlgeschlagen, bis die Seite neu geladen wird (React merkt sich die abgelehnte Zusage).
+export default class RouteErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null, resetKey: props.resetKey }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey !== state.resetKey) return { error: null, resetKey: props.resetKey }
+    return null
+  }
+
+  componentDidCatch(error) {
+    console.error('Seitenfehler:', error)
+  }
+
+  render() {
+    if (!this.state.error) return this.props.children
+    return (
+      <div role="alert">
+        <EmptyState
+          title="Diese Seite konnte nicht angezeigt werden."
+          hint="Vielleicht gibt es seit dem Öffnen dieses Tabs eine neue Version von WOMS. Lade die Seite neu; bleibt der Fehler, wähle im Menü eine andere Seite."
+          action={<Button type="button" onClick={() => window.location.reload()}>Seite neu laden</Button>}
+        />
+      </div>
+    )
+  }
+}