React Error Boundaries

While developing a React application we may often ended up with 'x' is not a property of undefined and 'y' is not a function error and page gets crashed. We can easily identify this kind of issues in the development and fix it. But what happens if this appears in our production application unexpectedly?. React will completely stop the rendering and displays the white page and error in the console. Technically this makes sense since it is good to stop the rendering rather than displaying broken User Interface.

Our primary goal is to develop the application without any run time issues. However, it is nearly not possible for humans. Alternatively, instead of just showing the blank page, we could display a user friendly message and take the necessary action in the background by capturing those errors and avoid this in the future.

The Solution

React introduced Error Boundaries in 16+ which offers functionality to capture the errors in our React Component and helps us to display a fallback component.

React Error Boundaries are React Component which helps to catch the JavaScript errors anywhere inside the ErrorBoundary component or Child Component tree.

Errors can be captured for,

1. Rendering Methods
2. Constructors
3. Life-cycle Methods

Errors can't be captured for

1. Event Handlers
2. Asynchronous Code
3. Server Side Rendering
4. Errors thrown in the Error Boundary component itself

Simple Error Boundary Component

class ErrorBoundary extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            hasError: false
        }
    }

    static getDerivedStateFromError(error) {
        return { hasError: true }
    }

    render(){
        const { hasError } = this.state;
        if(hasError) {
            return (
                <div>
                    <h1>Oops. Something went wrong!.
                </div>
            )
        } else {
            return this.props.children
        }
    }
}

<ErrorComponent>
  <App />
</ErrorComponent>

Whenever there is an error in the App Component and all of its child tree, ErrorComponent can catch the error. If you have more than on Error Boundary Component, error(s) will be captured in the nearest boundary of it

componentDidCatch vs static getDerivedStateFromError

1. componentDidCatch can be used to have side effects when the error occurred. This method also has access to this object of the class. Whereas, static getDerivedStateFromError is a static method which primarily used to return the updated state and take the action accordingly (like displaying Fallback component)
2. componentDidCatch method receives additional parameter called info object which a componentStack key which contains information about which component threw the error
3. static getDerivedStateFromError is called during the render phase. So, side-effects are not permitted. Whereas componentDidCatch is called during the commit phase which allows to do side-effects