MENU


Error Boundary

componentDidCatch() is invoked after an error has been thrown by a descendant component.

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Updating state from these lifecycles lets you capture an unhandled JavaScript error in the below tree and display a fallback UI.


RESETRUNFULL
class ErrorBoundary extends React.Component { constructor(props) { super(props);
  this.state = { hasError: false }; } static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.
     return { hasError: true }; } componentDidCatch(error, info) {
    logComponentStackToMyService(info.componentStack); } render() {
    if (this.state.hasError) {     // You can render any custom fallback UI
    return <h1>Something went wrong.</h1>; } return this.props.children; }}

On development, the errors will bubble up to window, this means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch().

On production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch().