javascript / intermediate
Snippet
Graceful Error Handling with Error Boundaries
Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
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
Breakdown
1
static getDerivedStateFromError(error)
This lifecycle method is invoked after an error has been thrown by a descendant component.
2
componentDidCatch(error, errorInfo)
Used to log error information to an external service.