When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on, which break the application and result in a blank web page, which is not ideal. To resolve this, many methods are created that handle these errors and improve the user and developer experience.
\nIn React, Error Boundaries comes in the picture, which was introduced in React v16 that catch the javascript errors found in UI and handle them efficiently.
\nReact Error Boundaries are React components that catch tricky javascript errors, log those errors and render them into a fallback UI instead of crashing the whole application.
\nNow let's understand the concept with the code.
\nclass UpdateCount extends Component {\n state = {\n count: 0\n };\n handleClick = () => {\n this.setState({\n count: this.state.count + 1\n });\n }\n render() {\n const {count} = this.state;\n if (count === 4) {\n // Imitate an error!\n throw new Error('Application crashed!');\n }\n return (\n <div>\n <h1>{count}</h1>\n <button onClick={this.handleClick}>+</button>\n </div>\n );\n }\n};When an application encounters an error, the component unmounts completely, leaving the user/developer with a blank web page and no idea what to do next.
\nReact Error Boundaries provides a method to handle these errors efficiently!
\nFirst, let's make an error boundary component. Here is an example:
\nclass ErrorBoundary extends Component {\n state = {\n error: ''\n }\n static getDerivedStateFromError(error) { \n // will update the state \n return {error: error.toString()}\n }\n \n render() {\n const {error} = this.state;\n if (error) {\n return (\n <div>\n <p>Looks like an error occurred!</p>\n <p>\n {error}\n </p>\n <div>\n )\n }\n return <div>{this.props.children}</div>\n }\n}In the above example code, you will see a static method getDerivedStateFromError(error). This method is a lifecycle method in which we catch the error and see it as the state. If an error occurs, the state is updated, and instead of a blank web page, a human-friendly error message appears in rendering; if no error occurs, the control is returned to the original element.
Now let’s see how we can use this
function App() { \n return ( \n <div> \n <p><b>Error Boundary Example code</b></p> \n <hr /> \n <ErrorBoundary> \n <p>Two updatecounts component use same error boundary component.</p> \n <UpdateCount /> \n <UpdateCount /> \n </ErrorBoundary> \n <hr /> \n <p>Two updatecounts component use their own error boundary component.</p> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n </div> \n ); \n} \nexport default App In the above code, when we click on the plus (+) button, it increases the count. The program is programmed to throw an error when the count reaches 4. It simulates a JavaScript error in a component. Here, we have used the error boundary in two ways, which are given below.
\nFirst, these two updatecounts are within the same error boundary. If one of the updateCount components crashes, then the error boundary will replace them both.\nSecond, these two updatecounts are within their individual error limits. So if one crashes, the other component is not affected because both have their own error boundary component.
\nReact Error boundary is a really nice feature in React, and it is comparatively less used.\nThere are a lot of nice error boundary packages out there; you should look into them. Here is a link react-error-boundary
\n","frontmatter":{"date":"May 20, 2021","updated_date":null,"title":"React Error Boundaries","tags":["React","Error Handling","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png","srcSet":"/static/95277564493241e87bee30b1a4197e71/69585/error_boundary_cover.png 200w,\n/static/95277564493241e87bee30b1a4197e71/497c6/error_boundary_cover.png 400w,\n/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png 800w,\n/static/95277564493241e87bee30b1a4197e71/f3583/error_boundary_cover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}}]}},"pageContext":{"tag":"Error Handling"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}