Skip to content
NeuralSkills
Fehlerbehebung

Error-Boundary-Architekt

Umfassende Error Boundaries und Fallback-Strategien entwerfen, die Kaskadenfehler verhindern und die Nutzererfahrung verbessern.

Experte Kostenlos Veroeffentlicht: 15. April 2026
Kompatible Tools claude-codechatgptgeminicopilotcursorwindsurfuniversal

Das Problem

Wenn eine Komponente abstuerzt, wird die gesamte Seite weiss. Wenn ein API-Aufruf fehlschlaegt, bricht das ganze Feature. Wenn ein Microservice ausfaellt, kaskadieren Fehler durchs gesamte System. Anwendungen ohne Error Boundaries sind Kartenhaeuser — ein Fehler reisst alles um. Error Boundaries zu entwerfen bedeutet nicht nur, Fehler zu fangen, sondern zu entscheiden, was der Nutzer sehen soll, was weiterhin funktionieren soll, und wie die Anwendung sich elegant erholt.

Der Prompt

Du bist ein Resilienz-Engineering-Experte. Entwirf eine Error-Boundary-Architektur fuer meine Anwendung:

ANWENDUNGSTYP: [SPA / SSR / API-Server / Microservices]
FRAMEWORK: [React/Vue/Next.js/Express/etc.]
KRITISCHE FLOWS: [die nutzerkritischen Pfade auflisten]
AKTUELLES ERROR-HANDLING: [was passiert aktuell bei Fehlern]

Entwirf die Error-Boundary-Architektur:
1. **Fehlermodus-Katalog**: Fuer jeden kritischen Flow jede moegliche Fehlerart auflisten.
2. **Boundary-Platzierungsstrategie**: Wo sollen Error Boundaries platziert werden? Zonen definieren: Seiten-Level, Feature-Level, Komponenten-Level, Daten-Level.
3. **Fallback-Design-Matrix**: Fuer jede Boundary-Zone den passenden Fallback definieren: Retry-Button, gecachte Daten, reduzierte UI, Skeleton, Redirect oder volle Fehlerseite.
4. **Recovery-Strategien**: Fuer jeden Fehlermodus den Wiederherstellungspfad definieren.
5. **Error-Reporting-Pipeline**: Fehlererfassungsfluss entwerfen: was wird geloggt, wohin es geht, was Alerts ausloest.
6. **Implementierungscode**: Error-Boundary-Komponente, Wrapper-HOC oder Hook und Fallback-UI-Komponenten liefern.

Beispiel-Ausgabe

Boundary-Hierarchie:
  App-Level: faengt fatale Abstuerze → zeigt "Etwas ist schiefgelaufen" + Aktualisieren-Button + Sentry-Report
  Route-Level: faengt Seitenkomponenten-Abstuerze → zeigt Fehlerseite fuer diese Route, Navigation funktioniert weiter
  Feature-Level: faengt Widget-Abstuerze (Chat, Benachrichtigungen) → versteckt Widget + zeigt "Nicht verfuegbar"-Badge
  Daten-Level: faengt API-Fehler → zeigt gecachte Daten mit "Zuletzt aktualisiert vor 5min"-Banner

Recovery-Matrix:
  API-Timeout → Auto-Retry 3x mit exponentiellem Backoff (1s, 2s, 4s), dann gecachte Daten
  Netzwerk offline → Offline-Indikator + Service Worker Cache
  Auth abgelaufen → Stille Token-Erneuerung, bei Fehlschlag → Redirect zu Login

Wann verwenden

Diesen Skill einsetzen beim Aufbau der Error-Handling-Architektur einer neuen Anwendung, bei Nutzerberichten ueber weisse Seiten, zur Verbesserung der Resilienz kritischer Flows, oder beim Entwurf von Error-Handling fuer Microservice-Kommunikation.

Profi-Tipps

  • Error Boundaries sollten granular sein, nicht global — eine einzige App-Level-Boundary faengt alles, bietet aber schlechte UX. Jedes unabhaengige Feature in eine eigene Boundary einwickeln.
  • Immer Kontext in Fehlerberichte aufnehmen — die Fehlermeldung allein ist nutzlos. Einschliessen: Komponentenbaum-Pfad, letzte 5 Benutzeraktionen, aktuelle URL und relevanter State.
  • Fallback-UI VOR dem Happy Path entwerfen — wenn Fallbacks zuletzt entworfen werden, sind sie Nachgedanken.
  • Error Boundaries explizit testen — Tests schreiben, die Komponentenabstuerze erzwingen und verifizieren, dass der korrekte Fallback erscheint.