Current section: Error Boundaries 59 exercises
Problem

Other Errors

Loading exercise

Transcript

00:00 So when you're writing a program, you have a try-catch and you got stuff going on in there. And if one of those things performs some asynchronous thing or they set up a callback or whatever, if when that callback finishes, that ends up throwing an error, your try-catch cannot

00:16 handle that error because that's happening in a different context. And for the same reason, React can't catch every error that happens in our application. We may not even want it to. And so we're thinking about call stacks and context and when errors are thrown is like

00:34 when React can handle our errors. So as React is rendering our components, it has try-catches around and it can handle those errors. But if we set up an event handler and that event handler throws an error, then React's not going to catch that. So when I hit submit right here,

00:50 nothing's happening in here and we actually end up getting an error. Cannot read properties of null reading two uppercase. What is that all about? Well, we can dive into that right here and we'll see we've got console log account type two uppercase. We're trying to log the uppercase

01:06 version of the account type, but that has a typo when we're trying to get that. So that's not working very well for us. So your job is to make it so that we can handle this type of error. Now, this is a little bit contrived because of course, like the proper solution is just to

01:23 not make the typo, but also to not tell TypeScript to be quiet. Because if we handled this properly, like TypeScript is trying to tell us to, then we wouldn't experience this error. So it is a little bit contrived, but you absolutely will be using this type of an API as you're writing your React.

01:40 And so made the contrived example so that you can get some practice using this in a simple controlled environment like this. All right, that should be enough for you to get going. Have a good time with this one.