javascript / intermediate
Snippet
React-Fehlergrenzen
Error Boundaries sind Class-Komponenten, die JavaScript-Fehler an jeder Stelle in ihrem Kind-Komponentenbaum abfangen, diese Fehler protokollieren und eine Fallback-UI anstelle des abgestürzten Komponentenbaums anzeigen.
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, info) {console.error('Error caught:', error, info);}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 aktualisiert den State, damit der nächste Render nach einem Fehler die Fallback-UI anzeigt.
2
componentDidCatch(error, info)
Diese Methode wird verwendet, um Fehlerinformationen an einen Fehlerberichtsdienst oder die Konsole zu protokollieren.