‫Let's now quickly learn
‫how to handle errors
‫that might occur during React rendering.
‫So this is something
‫that every single React app should have.
‫And so, let's now go implement
‫an error boundary for this.
‫So first of all, it's just completely normal
‫that bugs in our code make it into production.
‫So all these times where we get a white screen
‫in development when the app stops working,
‫our users would also
‫only get that white screen in production.
‫And so that's just completely unacceptable,
‫because then the user has no idea what to do.
‫For example, here in our bookings table,
‫let's say that for some reason we have a bug here
‫that we didn't detect.
‫So here we are trying to now read bookings.length
‫in a situation where it might not exist yet.
‫So maybe we wrote this code,
‫but for some reason we didn't test it
‫and then this code made it into production.
‫And so then when the users,
‫and let's actually reload this here,
‫so then when a user comes here,
‫well then we get this white screen,
‫because we had an error here inside React rendering.
‫So then we see all of this
‫and this kind of situation happened all the time
‫while we were developing our application, right?
‫And so that means that this might also happen in production.
‫Now luckily for us,
‫we can fix this situation with a React feature
‫called error boundaries.
‫So error boundaries are like try-catch
‫but for React rendering,
‫which basically allows us
‫to react to JavaScript errors in our render code,
‫so in React render logic.
‫Now error boundaries are actually
‫quite hard to use in React because for some reason
‫they're still implemented using class components
‫and in a very weird and hard to use way.
‫And therefore, everyone just uses this package
‫called React error boundary,
‫which makes it really, really easy.
‫So let's come here and install it.
‫So NPM install React error boundary.
‫And so as we can see here on this NPM link,
‫so where this package is hosted,
‫we see that it gets over 3 million downloads a week.
‫So this is basically a package that everyone uses.
‫So that's why it's super important
‫that I'm showing you this package here
‫as we are building this real world application.
‫So this finished successfully.
‫And so this package now all it does
‫is to give us an error boundary component
‫where we can pass in a fallback
‫and also a function to reset the application,
‫so whenever an error has occurred.
‫And so to use this,
‫we basically wrap our entire application
‫into that error boundary.
‫So we could do that here.
‫So right here.
‫But this component
‫is not really part of our application tree itself.
‫So let's actually place it right here.
‫So wrapping this one right here
‫into the error boundary
‫that's coming from this package that we just installed.
‫So here we can then specify a prop called,
‫fallback component, this one right here.
‫And so then here, it's not an element,
‫but really the component itself.
‫And so here, actually we already have
‫the beginning of a component, which is this error fallback.
‫So let's actually start writing some code here.
‫And so this component will then automatically receive
‫the error that has occurred.
‫And then here,
‫let's use this styled error fallback.
‫Then let's add the box component that we have here
‫and then a heading,
‫as an H1.
‫And then let's just say something went wrong.
‫Maybe we can add some nice emoji here,
‫like this guy right here.
‫And so now we can use that here as the fallback.
‫So error fallback.
‫And of course this one right here
‫could have any name that we wanted.
‫Just this one needs, of course,
‫to be exactly this one coming from this package.
‫So let's give this is save.
‫Let's reload.
‫And then here we actually get
‫that fallback error component that we just wrote.
‫Now the problem is
‫that here we are now outside of app.JSX
‫and therefore we no longer have access to our global styles.
‫And so let's bring them back in here.
‫So that's called global styles, like this.
‫And then we need to wrap this once again like so.
‫And then here we could
‫even write the exact error message that has occurred,
‫because remember that this component here
‫actually gets past the error.
‫And so then we can, here do error.message.
‫And so, then that provides at least some information,
‫which isn't that useful to the user,
‫but may be to the developer.
‫Now, what do we have here?
‫Well, that's not really important.
‫Basically it tells us here
‫that React will try to recreate
‫using the error boundary that we have provided.
‫So React is aware that this exists,
‫and so that's why it now rendered this error boundary
‫instead of just this blank screen that we had earlier.
‫Now, this in itself is still not that useful,
‫because the user still doesn't know what to do with it.
‫And so here let's just quickly add a button,
‫which will allow the user to simply go back
‫to the app's home screen.
‫So let's use our button component.
‫Let's make it
‫a large one.
‫And here, let's just say, try again.
‫Now the callback function here,
‫we will actually provide right into the error boundary.
‫So here we can pass in another prop,
‫which is called the on reset prop.
‫And so here, let's then basically redirect the user
‫back to the index page.
‫So here, of course, we're not gonna use React Router,
‫but instead just the regular dump function
‫window.location.replace,
‫and then back to the homepage.
‫All right, and so then inside the error fallback,
‫we get access to this on reset prop,
‫but it's gonna be called,
‫reset
‫error
‫boundary and solve.
‫Here, let's then that connect.
‫And there we go.
‫So let's try this one more time.
‫So it's trying to load our data here.
‫Then that fails, and then we can click try again,
‫which will bring us back to our homepage.
‫Nice.
‫So the error has been reset, and of course,
‫if we then go back here, the error will come back again.
‫But at least now the user knows
‫that they can use the rest of the application.
‫Great, now, just know
‫that these error boundaries really only catch errors
‫while React is rendering.
‫So bugs that occur in some event handlers
‫or in an effect or in some asynchronous code
‫will not be caught by the error boundary.
‫But for those, we many times have some other mechanisms,
‫like for example, those errors that are usually returned
‫from use Query, but for all the bugs that might happen
‫in rendering, like this one, that we should now put back.
‫So for errors like this,
‫you should always, always implement an error boundary,
‫like I just showed you.