Capturing Errors in React Component

Capture Errors in React Component and Render Fallback Component

componentDidCatch and getDerivedStateFromError in React

TechnoFunnel presents another article where we are going to talk about the mechanism to capture errors from the component and render a fallback component (ErrorComponent) in case the component results in some Error while rendering.

The following article will talk about the following lifecycle events:

1. Working with “componentDidCatch”
2. Using “getDerivedStateFromError” lifecycle event.

Understanding the Use Case Scenario…

componentDidMount in React, getDerivedStateFromError

1. Create a component “EmployeeDetails” which contains an input box
2. As soon as the user types a blank space in the input box, component should return an Error signifying that blank spaces are not accepted.
3. Deploy a mechanism, which can track the returned error
4. On encountering an Error, component should render some “ErrorComponent” rather than the “EmployeeDetails” component.

Getting Started with EmployeeDetails Component

Let’s first create an “EmployeeDetails” component which thrown an error as soon as the input box contains a blank space.

In the above component, every time when we are making changed in the input box, the “updateName” function is invoked. It checks if the current updated value of the textbox contains the blank space or not. In case the blank spaces are there, the component returns an error. Since the error is not handles the application will crash with the following error “Name Cannot Contain blank Spaces”

Adding Mechanism for tracking Errors using “componentDidCatch”

React componentDidMount, getDerivedStateFromError

To capture the error, we introduce the term “Error Boundary”. We create a component that acts as an error boundary capturing all the errors which will be invoked by all its Child components. Let’s assume we can have a component named “EmployeeDetails” which can throw error based on a certain condition. In order to capture the error caused inside this component, we need to create a parent component that can hold this error-prone child component.

Lets now create a component which can be represented as “ErrorBoundries”

https://gist.github.com/Mayankgupta688/2f6b1e18af3c30abc8070753e1305ffe

The “ErrorBoundaries” component created can now render some child components. The class implements the method ”componentDidCatch” which will be invoked as soon as any of the child components return some error. Since all the error caused inside the child component will be captured in this method, the component can be seen as an outer component which does not let the errors leak out of its boundaries.

Fallback to another Component “ErrorComponent”

Error Handling in React

In case when the component is returning an Error, we want component to display the “ErrorComponent”. This component contains a header expressing what went wrong while using “EmployeeDetails” component. In order to deploy this fallback mechanism during error, we can implement “getDerivedStateFromError” life cycle Event

Understanding “getDerivedStateFromError” Life Cycle

This lifecycle event can be used in order to derive a new state once the error is received. As soon as the error is received, the following life cycle event will execute and it can update the state of the “ErrorBoundries” component displayed above. We can set up the state of “ErrorBoundries” such that, it could represent the error situation in the application. Once the state will be updated, the “ErrorBoundries” component will re-render and we can deploy our “ErrorComponent” on the basis of the component state.

Lets extend the above ErrorBoundries component to implement this…

https://gist.github.com/Mayankgupta688/ed4e7865be5fd26dd7f68296c22e8d57

In the above component, we can see that we have created a state variable “hasError”. This variable can be used in order to track the error inside the child components. The initial value of “hasError” is marked as false since we do not have any error in the initial phase. As soon as the error is encountered on the “EmployeeDetails” component, “getDerivedStateFromError” function is invoked and it sets the value of “hasError” to “true”.

Since the component is setting up the new state, the component will re-render. In the render function, we have specified the condition which represents whether the “EmployeeDetails” or “ErrorComponent” will be visible. Since the value of “hasError” is true, “ErrorComponent” will be rendered. In this scenario, since the error is handled, the application does not break. To access the code, refer to the following URL:

https://codesandbox.io/s/error-boundries-react-kghhd

** The code need to run in production mode, in order to show the required behavior. The above code is just a reference which is not running in production mode.