Complete Intro to React v4 Debugging React Errors
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Debugging React Errors" Lesson
>> Brian Holt: Yeah, question?
>> Speaker 2: So, I, of course, have blown up my app and such, and broadly, in React, how do you debug? Because I'm looking at the stack trace, and none of these lines of code are my code. They're all lines of code within React libraries, and it's sort of hard to isolate an error to anywhere in my code.
>> Brian Holt: Sure, I mean, let's do this, just throw a new error.
>> Brian Holt: ("you smell, so I errored out.").
>> Brian Holt: Where did I put that? I put it in results, so this is right. So as you can see here, you smell. So you can see here, these are just worthless.
[00:00:53] Right, these call stacks are just not useful at all. But, what is actually useful in here is this render up here, usually is where it happened. So you can see here it says you errored out right there. So location provider, that's not mine, that's coming from reach router.
[00:01:13] But you can see here, it usually gives you a pretty good start. This happened in results, right? Right there, so results, which is created by app. So you can kinda see they're at least one layer deep. This is only in the debug or the development builds of React.
[00:01:31] The way that they get React so small, down to 30-ish kilobytes is by taking all the debugging stuff out of here. So that at least helps you get started. We access another concept called error boundaries, which I'm not gonna talk too much about. You can actually handle errors within your React application yourself using error boundaries.
[00:01:51] So that if anything throws while you're doing it, you can actually handle that, catch it, set some sort of error state and recover gracefully as well.
>> Brian Holt: That's typically how I would get started.