Error boundary React

 

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). 

Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information.

example:

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, errorInfo) {

    // You can also log the error to an error reporting service

    logErrorToMyService(error, errorInfo);

  }

  render() {

    if (this.state.hasError) {

      // You can render any custom fallback UI

      return <h1>Something went wrong.</h1>;

    }

    return this.props.children; 

  }

}

<ErrorBoundary>

  <MyWidget />

</ErrorBoundary>