Introduction to Next.js 13+, v2 Error Boundaries

Transcript from the "Error Boundaries" Lesson

[00:00:00]
>> Okay, the other one is very similar, and it handles what might go wrong when you try to load some data. And that's an error boundary or an error file. So, suspense and error work very similar. The error boundaries as in nothing can escape them. So if you wrap something in them, then whatever the subject that you're wrapping, it's bound to that context.

[00:00:22] So the error boundary works the same. You can think of it as a try-catch for a component. You can like, I wanna try-catch this component and if something happens, show this component, right? And that's what the error boundary does. So we could do the same thing. So if I go into this slug here and I say new file, I say error.tsx and I want to show an error exports default function post error like this return oops something like that, all right go back to our page here.

[00:01:03] We'll use the delay that I actually exported, got our delay and then you know before I got to render I don't know I'll just. Oops, threw an error. Something like that. So I could throw an error here before the rendering happens and it should show this page in place of what should have been this page.

[00:01:33] Actually what we can do is let's just try it not inside of this dynamic segment we could just try it here it might just be better honestly we'll just say error TSX here on a route for the index page. That's probably a better look. I bet that's something to do with the way that it's working with the dynamic bits there.

[00:01:55] So we'll put an error here. So we'll do that and then I'll go into the page and then inside of here we can try to throw an error. Let's see what happens? Hey there we go so it worked here yeah it's something to do with that dynamic path segment.

[00:02:19] It's I'm pretty sure it's a bug, so you can see it's storing our error page instead, which is just, oops. But everything else still rendered, which is in this case just a layout because we're in the page. So the only thing renders above this is a layout. So pretty powerful stuff.

[00:02:37] The equivalent Is writing your own error boundary, which looks exactly like the suspense boundary, but it's literally just called error boundary. So I'm not gonna write it because that's a whole other example. But I think you get the point and that's if you have it as a server component not as a page that you import it in and you want to wrap it in error boundary, you would do that.

[00:03:02]
>> Would you be able to access like information about the error within like the error dot TSX file, like maybe like telnet telemetry purposes or something like that?
>> Yeah, you don't know what the proper name is here, but it might be error. Let's see I'm in a raw file here to go to this one.

[00:03:24] That was messed up. But now, we're in a regular error boundary. Yes, you have access to the entire error. You can show the message. You can do whatever you want there. It totally works. So let's see if they actually pass that on as the page here actually ever tested this part.

[00:03:49] Yeah it is. So it's an object. So we probably like error dot message. And then, yeah, there it is. So yeah, you get access to it pretty cool.