React.js Error Boundaries
Creating React Application:
- Step 1: Create a React application using the following command:
Step 2: After creating the error-boundary directory move to it.
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Step to Run Application: Run the application using the following command from the root directory of the project.
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Explanation:The above code is written in such a way that if the counter reaches the value of 3 then Error Boundaries will throw an error.
As shown in the above code that two counters are included in the same Error Boundary Component through which if any one of them causes any sort of error by reaching the value of 3, then instead of rendering any of them a detailed message will be provided on the screen.
On the other end below both counters are included in the individual error Boundaries component through which what happens is only that counter which has caused the error is not rendered, while others are rendered normally.
Error boundaries do not catch errors for the following events:
- Event Handlers
- Asynchronous code(Example request Animation Frame etc)
- Server-Side Rendering
- Errors are thrown in the error boundary itself (rather than its children)
Try/Catch: One question which might be tickling in your mind is since Error Boundaries works like Catch, Why not just go with try/catch and why should you learn this new Concept. Well, the answer is try/catch is used with imperative code but As we know that React is declarative in nature, and Error Boundaries help in preserving the declarative nature of React.
Uncaught changes: Since it does not catch errors in some particular cases, So what about those errors that left unchecked or Uncaught. As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree. This means after migrating to React 16 and using Error Boundaries, you will be able to provide a better user experience as now users will be able to see the reason before an unexpected crash, instead of just guessing.
Component Stack Trace: React 16 prints all errors that occurred, it provides component Stack Trace. This helps the user in identifying the point where an error has occurred.
Event Listeners: Error Boundaries does not check errors in event handlers, So should this be counted as some sort of Limitation of Error Boundaries, Well the answer is no, the Reason being Event Listeners does not happen during rendering, So if any error is caused due to them React will simply display it on the screen.
- It can only be used with Class Components.
- It does not catch errors for Event Handlers, Asynchronous code(Example request Animation Frame), Server Side Rendering, and Errors are thrown in the error boundary itself (rather than its children).
- It is available only in react 16 or after.