Web: Fehlergrenzen - weisse Seiten zeigen jetzt, was schiefging

Im ganzen Frontend gab es keine einzige Error Boundary. In React 18 haengt eine
Ausnahme beim Rendern damit den KOMPLETTEN Baum aus: die Seite wird schlagartig
weiss und nur ein Neuladen hilft. Genau das gemeldete Bild - "keine Karten",
"gar nichts", "muss F5 druecken". Schlimmer noch: man sah nicht, WAS passiert
ist, und konnte es folglich auch nicht melden.

Zwei Ebenen: eine aeussere in main.jsx als letzte Instanz (faengt auch Fehler in
den Providern) und eine je Seite in Protected, damit bei einem Absturz
wenigstens die Navigation bedienbar bleibt. Die innere haengt am Pfad, sonst
haenge man nach einem Fehler dauerhaft in der Fehleranzeige fest.

Angezeigt wird die Meldung selbst, nicht nur ein "Ups", plus die technischen
Angaben zum Aufklappen. Damit ist der naechste Vorfall in einer Minute
eingeordnet statt in einer Stunde.

Das erklaert die Haeufigkeit, die meine vorherige Erklaerung (abgelaufene
Anmeldung) nicht hergab: ein Token gilt sieben Tage, nicht zwanzig Minuten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/App.jsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
-import { NavLink, Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { NavLink, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { api } from "./api";
 import { useAuth } from "./auth";
 import Icon from "./components/Icon";
+import ErrorBoundary from "./components/ErrorBoundary";
 import BrandMark from "./components/BrandMark";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
@@ -138,6 +139,7 @@ function StartFehler({ text, erneut }) {
 
 function Protected({ children, adminOnly = false, wide = false }) {
   const { user, isAdmin, loading, startFehler, erneutVersuchen } = useAuth();
+  const { pathname: pfad } = useLocation();
   if (loading) return <div className="center muted" style={{ padding: 60 }}>Lädt…</div>;
   if (startFehler) return <StartFehler text={startFehler} erneut={erneutVersuchen} />;
   if (!user) return <Navigate to="/login" replace />;
@@ -147,7 +149,12 @@ function Protected({ children, adminOnly = false, wide = false }) {
       <Sidebar />
       <div className="main">
         {/* `wide` hebt die Lesebreite auf – nur fürs Dashboard-Raster sinnvoll. */}
-        <div className={wide ? "content content--wide" : "content"}>{children}</div>
+        <div className={wide ? "content content--wide" : "content"}>
+          {/* Je Seite eine eigene Grenze: stuerzt eine ab, bleibt wenigstens
+              die Navigation bedienbar. `key` setzt sie beim Seitenwechsel
+              zurueck, sonst haenge man nach einem Fehler dauerhaft fest. */}
+          <ErrorBoundary key={pfad} bereich="Diese Seite">{children}</ErrorBoundary>
+        </div>
       </div>
     </div>
   );