00:00 Let's start out by bringing in error boundary and fallback props. We're gonna bring in the type for fallback props from React error boundary. We need the type because we're gonna be using that in our component that we make. Cody is telling us we want to rename this to onboarding form. The reason is that we can't wrap this in an error boundary.

00:19 Like I can't just say, okay, error boundary right here and wrap all that because remember the error occurs while we're creating these elements. So the error is right down here. And so we haven't actually given React our error boundary yet by the time this error happens. We're in the process of creating that error boundary

00:39 and then the error happens. So we can't wrap it in the error boundary because React doesn't know about our error boundary because we throw an error before we actually end up finishing creating it. And so that is why we're going to rename this from app to onboarding form. And then I'm gonna come down here.

00:56 We're gonna make a function called app. We're gonna return the onboarding form. And now everything is gonna be exactly as it was before except now we have a place that we can put our error boundary. So I'm gonna wrap this in an error boundary, stick our onboarding form in there.

01:13 And then for our error fallback, we'll put our error fallback. We're gonna make that function. Or actually we need to use fallback component type. That's why it's complaining fallback component. There we go. And then we're gonna make our error fallback. This is gonna take some props that are our fallback props.

01:35 And then we can make whatever we want to here to display. And I'm not gonna be too particular about what you do in here. It doesn't really matter all that much. Like your designer will give you, well hopefully they think about error states and they'll give you what they want it to look like. I think I have a style with the color of white

01:55 or no, of red that would make it invisible. And whatever, you can make it look however you really want it to. And with that, there's also an on error prop that Olivia the owl is telling us about that you could use to report errors to some reporting service or something if you need. So there we go.

02:12 We got our something went wrong, invalid time value. We're getting invalid time value because we are passing the error message as part of the props here. You may or may not want to do that depending on how comfortable you are showing those types of errors to your users.

02:31 But yeah, that gets us showing a much better experience for our users. It's at least telling the users something went wrong and they can report it to you and you can go and try and reproduce it, all that. And then everything that we just did is not going to impact a working version of the app. And so the app still totally works, but if there's any error at any time

02:50 in the process of React doing its thing, then it's going to end up rendering this error fallback instead. And that is what we call declarative error handling where you can compose these things together so that the error boundaries around our component that could potentially throw an error

03:09 and React handles handing that error off to our error boundary component, which will render the error fallback in the event of a problem. So there you go. That is your first look at error boundaries.