React Error Boundaries

Introduction to React Error Boundaries

In react js the React Error Boundary allows us to handle errors, it helps our components from getting corrupt because of error in any internal states. So we can understand it like suppose we have 3 components A, B, C and A is the parent component of the B and C so what will happen is any error occurs in the component C and B. In that case it will impact the components A which is parent component also, in react 16 they introduced it show that whole flow will not get disturb because of any error, with help of this concept it can catch error anywhere in the child components.

Syntax

Below is a simple syntax and we can extend it with any component, basically in the below we can create a component and any content of the pages and suppose the page is not available in that case we can write this line which will be handled. We will write the logic inside the components itself to check if error happens. This error message will be inside any child component for displaying the error, which allows other components to execute even if an error occurs in a child component.

throw new Error("Occurs error while rendering");

How Error Boundaries work in React?

Before going to understand how the error boundary in the react js works we need to understand some of the important aspects of it. It was introduced in the react version 16. After this version we will be able to handle errors that occur in the any child components of the react js.

• It is not any particular package, it is a combination of new error and a component class which will check if the error occurs or not.
• In any case the error will occur in any component, instead of impacting on all the components it will only affect the child components.
• We have added a boundary in this concept because the boundary means we are talking about the limitation upto which we want to handle error, so inside the div or div inside another div.
• Once we define the boundary for the error, anything happening in that boundary will capture the error message which we have defined for it and display it to show that the display of other components will not stop.

Example of React Error Boundaries

Below example contains two sections one is HTML section and another is react js core javascript code, we will focus more on the react js part.

We have created one component and few html constants with specific jobs in using react js, and each component and html constants are performing their respective tasks, we will see the working of both components and constants.

• In the first place we have some of the important packages needed for the program.
• Like we have important Switch, Route and few things related to navigation.
• Then we have created the component called ExampleError and inside this component we are performing some of the important tasks.
• Inside the function called ExampleError we have initialized the initial states for the rendering.
• We have written the component didmount and render related functions.
• This component is mainly made to control the error occurring while displaying various pages by clicking on them.

Next we have created several constants which will perform the task of displaying the data of the various pages. We will see the each constant and their works.

• Firstly we have created constants for various pages like constant for start screen, constant for user screen and constant for end screen along with the html contents.
• Finally we have designed the example constant which is the main constant and it is going to play an important role to display all the contents.

See the below example along with the screen of the output.

Component for error rendering

Code:

//Importing the required packages
const { Switch, Route, NavLink,BrowserRouter } = ReactRouterDOM;
//Creating the error components which will come to play when any error will happen
class ExampleError extends React.Component {
//Defining the initial states for this component
state = { isError: false };
componentDidCatch() {
//Setting the value of the error state as the true when catching any error .
this.setState({ isError: true });
}
//Render function to render the html screens
render() {
if (this.state.isError) {
//This message will be display in case if any error happens
return <h2>An issue happens while opening end.</h2>;
}
return this.props.children;
}
}

Constants for various screens and to display the outputs

Code:

//Defining the various constants for the screens of start ,user and end
const StartScreen = () => <h3>Start</h3>;
const UserScreen = () => <h3>User Pages</h3>;
const EndScreen = () => {
//Throw an error
throw new Error("Occurs error while rendering");
};

Main constant to handle the all constant and display

Code:

//This is the main constant it will contain all other constants in the form of display which we can see in the image below .
const Example = () => (
<BrowserRouter>
//Start displaying the various screens
<div className="container">
<nav>
<NavLink exact to="/start" className="link">
Start====
</NavLink>
<NavLink to="/user" className="link">
User====
</NavLink>
<NavLink to="/end" className="link">
end
</NavLink>
//end of NavLink
</nav>
//end of nav
<Switch>
//Start of of Switch
<Route
exact
path="/start"
render={() => (
<ExampleError>
<StartScreen />
</ExampleError>
)}
/>
<Route
path="/user"
render={() => (
<ExampleError>
<UserScreen />
</ExampleError>
)}
/>
<Route
path="/end"
render={() => (
<ExampleError>
<EndScreen />
</ExampleError>
)}
/>
//End of switch
</Switch>
</div>
</BrowserRouter>
);
ReactDOM.render(<Example />, document.getElementById("main"));
HTML section ,
Below is the Html which will contains the above Example on the main id
<div id="main"></div>

In the below we have shown four screens each screen will appear on clicking on the respective link, like screen on clicking on Start, screen on clicking on the user and The error screen on clicking end.

Output:

Conclusion

From this tutorial we saw the basic concept of the React Error Boundary and we saw its simple syntax also. We saw the working of the React boundary Error with its importance in the programming. We saw one example with a proper explanation of that.

Recommended Articles

This is a guide to React Error Boundaries. Here we discuss how error boundaries work in react with example respectively. You may also have a look at the following articles to learn more –

1. React Router Transition
2. React Component Library
3. React Native Navigation
4. React Native SQLite