javascript / expert
Snippet
Eigene Error Boundaries zur Fehlerbehebung
Error Boundaries fangen JavaScript-Fehler an beliebiger Stelle in ihrem untergeordneten Komponentenbaum ab und verhindern so den Absturz der gesamten App durch eine Fallback-UI.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error: Error) {return { hasError: true };}componentCatch(error: Error, info: React.ErrorInfo) {logErrorToService(error, info);}render() {if (this.state.hasError) return <ErrorFallback />;return this.props.children;}}
react
Erklärung
1
static getDerivedStateFromError(error: Error)
Aktualisiert den State, um beim nächsten Render-Durchgang die Fallback-UI anzuzeigen.
2
componentCatch(error: Error, info: React.ErrorInfo)
Lifecycle-Methode zum Protokollieren von Fehlerdetails an externe Monitoring-Dienste.