Catching Errors with Error Boundaries

With the componentDidCatch lifecycle method 0:00 comes a new concept of an error boundary. 0:03 Error boundaries are wrapper components that use componentDidCatch 0:06 to capture errors anywhere in their child component tree and 0:09 display a fallback UI in its place. 0:12 They provide an easier way to keep the error catching and conditional rendering 0:15 logic we wrote in the previous video reusable and maintainable in your app. 0:18 You create an error boundary as a class component. 0:23 So in the source components folder, I'll create a new file named ErrorBoundary.js. 0:26 Here, I'll import React, Component from react. 0:35 And to create the ErrorBoundary class, 0:44 I'll write export default class ErrorBoundary extends Component. 0:48 Now, I'll go ahead and move the state and 1:01 the componentDidCatch method over to the new ErrorBoundary component. 1:04 Then in the render function, 1:14 I'll write an if statement similar to the one we wrote earlier. 1:16 So if this component catches an error anywhere in its 1:21 child component tree, it's going to return an h2, 1:27 With the text, no, something went wrong. 1:35 Otherwise, it's going to return its children via this.props.children. 1:44 So now I have a reusable ErrorBoundary component I can wrap around my 1:53 entire app or specific components. 1:58 For example, in app.js, I'll import the ErrorBoundary component. 2:01 Then in the render method, I'll get rid of the if else statement. 2:14 And I'll wrap the ErrorBoundary around the StudentForm component only. 2:25 Back in the app, I'll click the Reset button to produce the error. 2:35 And we see the fallback content, but the rest of the app continues to render 2:42 because the component causing the error is inside the ErrorBoundary. 2:47 So as you can see, this is much better than having your entire app crash or 2:52 unmount any time an error occurs. 2:55 You can isolate errors, making them easier to understand and fix. 2:58 Any errors caught in the Component tree 3:02 get reported up to the ErrorBoundary's componentDidCatch method. 3:05 This provides a handy way to send error reports to an error tracking or 3:09 monitoring service. 3:13 For example, in my project, 3:14 I've already set up the config to an error reporting service I like to use. 3:15 So I'll import the config at the top of ErrorBoundry.js with 3:19 import sendError, from error-config. 3:24 The componenetDidCatch method takes two arguments to help you track and 3:34 investigate errors, error, the error instance itself, and info, 3:38 which contains the component stack trace or 3:42 the path in the component tree leading up to the offending component. 3:45 There are lots of JavaScript error tracking services out there. 3:50 And the tracking service you use is probably different than mine. 3:53 So in the componentDidCatch method, 3:57 I'll call my error reporting APIs captureException method. 3:59 And pass it the error instance. 4:09 The component stack trace contains helpful information for sorting and resolving 4:14 errors, so I'm also going to send it to my error tracking service as extra data. 4:20 So now, any time my ErrorBoundary catches an error, 4:32 information about the error gets sent over to my error tracking 4:36 services dashboard, where I can see what caused the error, 4:41 when it happened, the type of users it's affecting, and more. 4:45 So as you've learned, the componentDidCatch method and 4:53 ErrorBoundary work like try catch statements for your React components. 4:57 They provide a more consistent and dependable way to catch and 5:01 deal with errors. 5:05 You can learn more about error handling in React by reading the resources posted in 5:06 the teacher's notes. 5:10