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
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.