Check out a free preview of the full Complete Intro to React, v5 course:
The "Error Boundaries" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces error boundaries that allow for graceful capture of errors without an application blowing up. To implement the error boundaries, getDreivedStateFromError, and componentDidCatch React methods are introduced.

Get Unlimited Access Now

Transcript from the "Error Boundaries" Lesson

[00:00:00]
>> Brian Holt: Error boundaries is one of two things that hooks cannot do. You cannot do error boundaries without using classes. So this is actually a pretty critical one, so let's go ahead and take a look at this. So some of these API responses could potentially have errors inside of them, right?

[00:00:20] We don't control this API, it's coming from a third party, right, so we wanna be extra careful with handling errors and handling malformatted data. And so error boundaries are going to allow you to capture some of these errors without crashing your program, right? So I want you to make a new file here called errorboundary.js.

[00:00:49]
>> Brian Holt: And I'm just gonna tell you right now, this is mostly code from the docs.
>> Brian Holt: I'll just keep the reactjs.org/docs/error-boundaries.html. Okay, we're gonna import React from React.
>> Brian Holt: And we're gonna import a link from @reach/router.
>> Brian Holt: So here I'm going to say, class ErrorBoundary, one of those words that looks weird the more you look at it.

[00:01:33] Extends. So we've been doing React.component, but I'm gonna show just a different way that you could do this. You can also put ,Component here like this and just say extends Component. Works the same way right, we're just pulling out component, there's no necessarily benefit to doing it this way.

[00:01:58] You'll just see a lot of people do it this way. Just wanted to show you that.
>> Brian Holt: Okay, we're gonna say state = hasError, false.
>> Brian Holt: Okay, the next thing we're going to write is static getDerivedStateFromError.
>> Brian Holt: And we're just gonna return hasError: true.
>> Brian Holt: hasError: true. You could be more sophisticated about how you do this, but we're not going to.

[00:02:44] And then we're going to say componentDidCatch that top one there.
>> Brian Holt: And we're going to get back the error and the info about the error from that. These are all React methods. And here all we're going to do is going to say console.error, ErrorBoundary caught an error.
>> Brian Holt: And then we're just gonna log out error and info.

[00:03:15] But if you had something here like Azure Monitor or Track JS or Century or something like that, you probably just send that off to the tiered consolidated logging service.
>> Brian Holt: Okay, and then here we're gonna say return, sorry, render rather, render.
>> Brian Holt: And we're gonna say, If this.state.hasError, return.

[00:03:53]
>> Brian Holt: An h1, and again, you'd probably have better UI around this, but we're just gonna return a h1 that says, there was an error with this listing.
>> Brian Holt: Link to equals. I'm just going to have them link to home. Click here to go back to the home page or wait five seconds.

[00:04:26]
>> Brian Holt: So just to give the user a bit of information, like hey there's an error here, just so you know, we're gonna redirect you back to the homepage.
>> Brian Holt: Otherwise, all you're going to do is just pass through all of the components that are coming through, right? So it's just like an error boundary that sits above a component and if there's an error, it does something about it, otherwise it's a pass-through right?

[00:04:47] So you just going to say return this.props.children.
>> Brian Holt: So this.props.children is going to be whether it was contained inside of the component. So for example, we have the link component right here, right? The children, "this.props.children" of link would be click here, right? It's whatever you put inside of it.

[00:05:14] Does that make sense? So if I had like a bunch of components inside of it, this.props.children will be all of those components inside of it. Okay, and then last thing, export default ErrorBoundary.
>> Brian Holt: It's kind of an advanced React use case right? This is not always going to be useful for you.

[00:05:44] I don't think the entire time I was working at Netflix, we ever used error boundaries.
>> Brian Holt: This is prettier, that's breaking it up this way. So if that looks weird, that's where its coming from. This is how you can like break it into multiple lines.
>> Speaker 2: So this will catch an error that occurs in any of its children?

[00:06:10]
>> Brian Holt: Exactly.
>> Speaker 2: Why do we need to return this.props.children?
>> Brian Holt: You always have to return something inside of a render method. So if I have this, there's a potential right that this wouldn't return anything, right? Which means it would be basically eating the children. That's a really weird way of saying that, right?

[00:06:34] But it would not be rendering out the children. So it has to pass through right, it has to take something and then pass it through to the other side, otherwise it would just be blocking it right there.