‫So whenever we are doing any data fetching
‫in any web application
‫and dealing with asynchronous data,
‫we always need to assume that something can go wrong.
‫And so therefore, let's now account
‫for that situation by handling those errors.
‫So one of the things that can go wrong
‫is your users suddenly losing their internet connection.
‫So let's simulate that here again in our network tab
‫and let's make sure that we are first on slow 3G.
‫Then let's reload here, and then
‫while the movies are loaded, we will click on offline.
‫So right now,
‫so you see that now the application
‫basically never leaves the state.
‫And also when we come to our console here we see
‫that we failed to fetch,
‫which again is because our user basically now
‫lost their internet connection.
‫So when that happens, we want to display some kind
‫of error message here on the screen and not
‫keep the application in this loading state here forever.
‫Because like this, the user will think
‫that the data might eventually arrive
‫but of course it will not.
‫Now, reacting to errors like this is actually not built
‫into the fetch function itself.
‫And so we have to kind of do that manually.
‫And so let's try that here in our fetch movies function.
‫So here on the response object
‫that we receive from fetch exists one, okay, property.
‫And so here we can check for that.
‫So basically if the response is not okay
‫then we want to throw a new error.
‫And again, this is pretty standard JavaScript code.
‫So then let's just say something went wrong
‫with fetching movies now, okay?
‫And so now if we throw an error here
‫we need to wrap all of our code into a try catch block. So,
‫try and catch
‫which again is just a normal JavaScript feature.
‫This one has nothing to do with React.
‫Okay, and here let's console that error.
‫That error, okay?
‫And then let's come back here.
‫Well, if we load now, then of course nothing will work.
‫So let's do that trick again where first
‫we set it to slow 3G,
‫then let's reload and then let's wait for it.
‫We set our users back to offline right now.
‫And so where is it?
‫Well, it's not actually anywhere here,
‫but well, that's not really important anyway.
‫So let's actually just log error dot message.
‫So this is the property of the error
‫where this string here will get saved into
‫but then what we're actually interested in,
‫is to get this message here onto the screen.
‫So basically displaying it right here instead of loading.
‫So that means that we need another piece of state.
‫So basically a piece of state indicating
‫whether we currently have an error or not.
‫So const error
‫and set error.
‫And so here, this one is actually not a bullion,
‫but it's truly the error message.
‫Okay, so here
‫let's then set the error
‫to actually that message.
‫And again, error dot message is basically
‫this string that we passed into the error
‫and error is the error itself
‫as it was passed into this catch block.
‫And again, that is just basic JavaScript.
‫All right,
‫and then let's do some conditional rendering here
‫to basically get the error here
‫onto the screen whenever there exists one.
‫Now, okay, and let's start
‫by creating a new error component here
‫or maybe let's call it error message.
‫And it will receive a prop
‫with some message that it will then display on the screen.
‫So let's return again a paragraph this time
‫with the class name of error, which,
‫as always, I already included into my CSS file.
‫Then here let's maybe add some small emoji here,
‫like this one.
‫So showing there was some kind of problem.
‫And then here we simply display that message.
‫So this is a very simple presentational component.
‫Remember that?
‫Okay. Now here in our conditional rendering
‫basically what we want to do is
‫that when it's no longer loading
‫then we want to display this movie list
‫but only if there was no error.
‫So basically here we now would have to nest another ternary
‫inside this ternary, but that makes for really ugly coat.
‫And so let's do something else instead.
‫So let's comment out this entire part.
‫Or well, only this one.
‫So the box of course we still need,
‫but then let's do is loading.
‫And if there's no error
‫then display this movies list right here.
‫Now if there is an error
‫then display the error message component
‫with the error or I think it's called message.
‫So with the message prop set to error.
‫And here of course, it needs to be
‫that the data is not loading and there is no error.
‫And finally, we also need to account
‫of course for the is loading state.
‫So if it is loading, then just display our loader.
‫So here the situation is indeed a little bit tricky
‫with all these different states that we have
‫and with all the conditional rendering, but well
‫these are now three mutually exclusive conditions.
‫So it is either loading or it is not loading
‫and there is no error or there is an error.
‫So only one of these three here
‫can be true at the same time.
‫And so that's very important
‫so that we don't display multiple
‫of these components at the same time by mistake.
‫So let's give it a save and let's try again.
‫So back to our 3G
‫and then I will set it to offline very soon.
‫Let's wait for it.
‫And there it is.
‫So we get our error message correctly displayed here.
‫However, there's still some problem
‫because the loading state is still set to true
‫and in fact that's actually correct.
‫So as soon as the error here is thrown,
‫this rest of the code is no longer evaluated.
‫And so therefore is loading is never set to fault.
‫So our application will keep thinking
‫that the data is still being loaded.
‫So again, the problem is
‫that after this error is being thrown
‫then React will basically never see
‫this piece of code here,
‫where the loading state is reset.
‫So instead of doing that here
‫let's attach a finally block here.
‫So this block of code here will basically always be executed
‫at the very end.
‫Okay? And as an alternative
‫we could have kept the code here and also pasted it here,
‫but that would've created a duplication of code.
‫So with this, it's going to be a lot better.
‫Now, I will not try this yet here
‫because actually I want to handle another kind of error
‫which is not really an error,
‫but also situation where we want to display a message
‫which is the situation
‫in which we cannot find any movie for the search Query.
‫So let's say the Query is like this one here
‫and of course the API will not find anything.
‫So let's remove all throttling,
‫and well, what happens here?
‫Well, basically the length cannot be read of undefined.
‫And so the problem here is that the data
‫that comes back from the API now,
‫is apparently undefined.
‫So let's take a look at that.
‫So just at data here, and let's try that again.
‫And so indeed, we no longer have the search property here,
‫so we no longer have data dot search.
‫And so what's happening then is that data search
‫is being set to undefined,
‫and therefore we get this other error here.
‫So as I was saying in the very beginning
‫we always need to handle
‫all these different situations that can go wrong.
‫And when we are working with data fetching
‫there's always a lot of things that can go wrong.
‫So working with data is a lot of work
‫but it's also essential in most
‫if not all web applications.
‫But anyway, here we can now use this response
‫to our advantage,
‫in order to throw another error in this situation.
‫So we can say that data dot response,
‫and actually, this now needs to be here
‫after we already have the data.
‫So in this case, if data responds is equal faults
‫and so for some reason the API here responds
‫with the string of faults and not a bullion
‫but while this still works, so in this case, let's
‫also throw a new error and let's simply say
‫movie not found.
‫Alright, and beautiful.
‫Let's just reload.
‫And then here we get this log.
‫So that's this console dot error coming from here.
‫And then indeed we get our error message also displayed
‫on the UI.
‫So this one was maybe a little bit trickier.
‫So let's just quickly recap.
‫So what we did was to implement another state variable,
‫this time, specific for the error
‫so that whenever some error occurred
‫we could store the error message in there
‫and then display it in the UI as soon as an error occurred.
‫Now, as soon as an error did occur, which is
‫in this situation, and in this one we threw a new error,
‫and then we caught that error
‫inside the catch block of this try-catch.
‫And so this is a standard way
‫of catching errors in JavaScript.
‫And so in this situation, we then set the error state
‫to the message of the error that we specified here.
‫Then finally, we used of course, that state variable
‫in order to render something on the screen conditionally.
‫And so that was right here.
‫So this part here is maybe a bit confusing.
‫And so make sure that after this video you just
‫analyze exactly what's happening here and that,
‫in fact these three conditions here are mutually exclusive.
‫So only one of them will ever be true.
‫Okay? And I think that for now this is enough
‫for error handling in this application.
‫So that's always a very,
‫very important part that many people overlook.
‫But it is of course essential
‫to deal with these kind of situations.