Practice
Error boundaries are 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.
A class component becomes an error boundary if it defines a new lifecycle method called
or
:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(error, info) {
// You can also log the error to a service
logErrorToMyService(error, info)
}
static getDerivedStateFromError(error) {
// Update the state so that the next render shows the fallback UI.
return { hasError: true };
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>{'Something went wrong.'}</h1>
}
return this.props.children
}
}
After that, use it like an ordinary component:
< ErrorBoundary > < MyWidget /> </ ErrorBoundary >
Comments