javascript / expert
Snippet
Granulare Fehlerbehebung mit Functional Fallback Mapping
Über generische Error Boundaries hinaus verwendet dieses Muster ein Mapping von Fallback-Komponenten, basierend auf dem Fehlertyp. Dies ermöglicht spezifische UI-Reaktionen auf verschiedene Fehlerszenarien (z.B. NetworkError vs. ValidationError).
snippet.js
1
2
3
4
5
6
7
8
9
10
const ErrorBoundary = ({ children, fallbacks }: ErrorBoundaryProps) => {const [error, setError] = useState<Error | null>(null);if (error) {const Fallback = fallbacks[error.name] || fallbacks['default'];return <Fallback error={error} retry={() => setError(null)} />;}return <div onErrorCapture={(e) => setError(e.nativeEvent as any)}>{children}</div>;};
react
Erklärung
1
fallbacks[error.name] || fallbacks['default']
Wählt dynamisch die passende UI-Komponente basierend auf der abgefangenen Fehlerinstanz aus.
2
retry={() => setError(null)}
Bietet einen Mechanismus, um den Fehlerstatus zurückzusetzen und das erneute Rendern des Komponentenbaums zu versuchen.