0 Tage Serie
javascript / intermediate
Snippet

Fehlerbehandlung mit Error Boundaries

Error Boundaries sind React-Komponenten, die JavaScript-Fehler an jeder Stelle in ihrem untergeordneten Komponentenbaum abfangen, diese Fehler protokollieren und eine Fallback-UI anzeigen, anstatt des abgestürzten Komponentenbaums.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Logged error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
react
Erklärung
1
static getDerivedStateFromError(error)
Diese Lifecycle-Methode wird aufgerufen, nachdem ein Fehler in einer untergeordneten Komponente aufgetreten ist.
2
componentDidCatch(error, errorInfo)
Wird verwendet, um Fehlerinformationen an einen externen Dienst zu protokollieren.