Frontend: Error-Toast-Notifications für fehlgeschlagene API-Calls #47

New issue

Open

opened 2026-03-30 19:56:11 +00:00 by David · 0 comments

David commented

2026-03-30 19:56:11 +00:00

Collaborator

Beschreibung

Alle API-Fehler im Frontend werden aktuell still verschluckt (catch { }). User sehen stale Daten ohne Hinweis dass der Fetch fehlgeschlagen ist.

Hintergrund

Dashboard.tsx:28 und andere Seiten haben leere catch-Blöcke. Wenn die API nicht erreichbar ist, das Token abgelaufen ist oder ein Server-Error auftritt, sieht der User keine Fehlermeldung — nur veraltete oder leere Daten.

Akzeptanzkriterien

Toast-Notification-System im Frontend (z.B. react-hot-toast oder eigene Komponente)
Alle API-Fehler zeigen Toast mit: Fehlertyp (Network/Auth/Server), kurze Beschreibung
401-Fehler: Automatischer Redirect zum Login
500-Fehler: "Server-Fehler, bitte später erneut versuchen"
Network-Error: "Verbindung zum Server verloren"
Toasts verschwinden nach 5 Sekunden automatisch
Kein Spam: Gleicher Fehlertyp wird nicht mehrfach gleichzeitig angezeigt

Technische Hinweise

Neue Komponente: frontend/src/components/Toast.tsx
Erweitern: frontend/src/api/client.ts — globaler Error-Handler im Fetch-Wrapper
Erweitern: Alle Pages mit catch-Blöcken
Library-Option: react-hot-toast (3KB, zero-config) oder eigene Implementation mit Tailwind
Migration nötig: nein

Aufwand: M

## Beschreibung Alle API-Fehler im Frontend werden aktuell still verschluckt (`catch { }`). User sehen stale Daten ohne Hinweis dass der Fetch fehlgeschlagen ist. ## Hintergrund `Dashboard.tsx:28` und andere Seiten haben leere `catch`-Blöcke. Wenn die API nicht erreichbar ist, das Token abgelaufen ist oder ein Server-Error auftritt, sieht der User keine Fehlermeldung — nur veraltete oder leere Daten. ## Akzeptanzkriterien - [ ] Toast-Notification-System im Frontend (z.B. react-hot-toast oder eigene Komponente) - [ ] Alle API-Fehler zeigen Toast mit: Fehlertyp (Network/Auth/Server), kurze Beschreibung - [ ] 401-Fehler: Automatischer Redirect zum Login - [ ] 500-Fehler: "Server-Fehler, bitte später erneut versuchen" - [ ] Network-Error: "Verbindung zum Server verloren" - [ ] Toasts verschwinden nach 5 Sekunden automatisch - [ ] Kein Spam: Gleicher Fehlertyp wird nicht mehrfach gleichzeitig angezeigt ## Technische Hinweise - Neue Komponente: `frontend/src/components/Toast.tsx` - Erweitern: `frontend/src/api/client.ts` — globaler Error-Handler im Fetch-Wrapper - Erweitern: Alle Pages mit `catch`-Blöcken - Library-Option: `react-hot-toast` (3KB, zero-config) oder eigene Implementation mit Tailwind - Migration nötig: nein ## Aufwand: M