Complete Intro to React, v5

Complete Intro to React, v5 Error Boundary Middleware


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v5 course:
The "Error Boundary Middleware" 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 demonstrates how to wrap the application in the error boundary and wire it up to a component.

Get Unlimited Access Now

Transcript from the "Error Boundary Middleware" Lesson

>> Brian Holt: So we wanna wrap details in this, so in case there's an error from the API, that it doesn't crash.
>> Brian Holt: Now, I would be super tempted to wrap this inside of an error boundary. But there's a big thing that you have to know about error boundaries, is it only works with children inside of it.

[00:00:20] This was an ErrorBoundary here.
>> Brian Holt: Or ErrorBoundary?
>> Brian Holt: This wouldn't work. And the reason being is that you would catch things in carousel, but you wouldn't catch them inside of the class itself. So it can't catch it inside of the class that it's in, so we have to make it basically a higher order component above details.

[00:00:45] And I'll show you just a really quick way of doing that. So rather than mess with details itself, what we're gonna do is we're going to export a default function here.
>> Brian Holt: Function, there it's going to be called Details.
>> Brian Holt: WthErrorBoundary.
>> Brian Holt: It's gonna take in props, and it's going to return an ErrorBoundary,

>> Brian Holt: And then, it's going to render details inside of it.
>> Brian Holt: So this automatically imported up here ErrorBoundary as well, so make sure you import that there like I did on line four.
>> Brian Holt: And then down here, we still have a problem with this. So this is correctly wrapping an ErrorBoundary around Details.

[00:01:41] And now this will catch all of the various different errors that could happen inside of Details. But we have these props. And we want to pass these props into Details. How do we do that? I mean, you could do something like props=props, but this isn't quite the same.

>> Brian Holt: Because now inside of here, I would have to say this.props.props. It would be weird, so that's not right. I could go figure out everything that Details is getting from its parent components, and then, by name, pass them in. But that's burdensome, I don't want to do that either.

[00:02:26] So I'm gonna show you a little trick that you can do as well. You can actually just put these curly braces here and say {...props} like that. This is going to spread the props across Details. So imagine for a second that props had some, what is Details even using from props?

[00:02:46] Props.
>> Brian Holt: ID, right? So it's getting ID.
>> Brian Holt: So this would be equivalent from saying id={}, and then writing out all of those piece by piece. This is just a faster way of doing it.
>> Brian Holt: Now, let me offer you a cautionary tale. The advantage of React, the reason why we use React is because it's very explicit.

[00:03:18] It's very easy to go through and understand piece by piece what everything is doing. ErrorBoundary here has no interaction and does not care at all about the props, it's just trying to wrap something, and then, let it continue rendering. So ErrorBoundary's not doing anything for you other than catching errors, and it's Details that's actually doing all the work here.

[00:03:38] So we just want to be a pass through for this DetailsWithErrorBoundary. I spelled that wrong, it's DetailsWithErrorBoundary, not that that matters, that's just for debugging purposes, and that's all.
>> Brian Holt: So you only wanna use these spread operators when the component doesn't actually really care about what those props are.

[00:04:00] It's just meant to be a pass through. Don't use this willy nilly, it makes your code harder to read for the most part. Make sense? Okay.
>> Brian Holt: So now, if we go look at our app, everything should look exactly the same cuz this has no errors on it, but what happens if I go into the Details page now and say Details?

>> Brian Holt: And let's say here instead of componentDidMount, we're just gonna say, throw new Error like that.
>> Brian Holt: What's gonna happen? Hopefully, you can say that there was an error with this page. Click here to go back, and wait five seconds. We'll go do the five seconds part, we haven't done that part.

[00:04:50] You can also see here that you get the error.
>> Brian Holt: And you can see ErrorBoundary caught in error. So you do the message, which is this very descriptive error that I just invented, and it also gives you all of the stuff where this came from componentDidMount. Blah, blah, blah, all that kind of stuff.

>> Brian Holt: Now, if we click here, it'll take us back here. Now, if we didn't have the ErrorBoundary, this would just crash the entire program.
>> Brian Holt: So that's what ErrorBoundaries are useful for.