Fully implemented fetching data from the API.
But we have one problem what will happen if our API doesn't work?
Let's check this out.
Here is our API call with fetch and what I want to do.
I want just to break the URL.
It is the easiest way to stop fetching data.
Obviously it might happen that for the real URL we're getting 500 error because server has some problem,
so our frontend must be prepared for that.
As you can see here I am reloading the page and now we are getting an error.
Unhandled rejection failed to fetch.
This is not something that we want to show to our user.
And the problem is here that we don't catch an error that we are getting from the network.
As you can see here in the console, we are getting type error failed to fetch and it happens inside
our quiz, which essentially means inside our code.
We must catch this error.
This is why here I want to write catch.
We're getting here our error.
And now I just want to console log this error here.
And let's say it is error message I'm reloading the page and as you can see there is no error.
We are getting inside.
Console error failed to fetch but we don't see anything on the screen.
This is already much better because we don't show a user some broken state, but we must improve that.
What I want to do here, I want to dispatch an action, for example a server error and it must change
a property inside our project.
This is why here let's jump inside our source context quiz.
And here is our initial state.
Now I want to create here one more property error.
And by default it will be null because we don't have an error.
Now inside our switch I want to create one more case.
So here let's create a case for example server error.
And here we want to return our state and update it with the error.
And our error will come from action dot payload, which actually means we simply update the server property
with a dispatch.
Now let's jump back to our component.
And now inside our cache we can write dispatch.
So I copied here dispatch.
And the type will be server error.
And our payload will be an error that we got from the backend.
It is error dot message.
This is exactly what we can see here inside the console, which essentially means this will change the
property inside our state.
And now we can render it and we can easily render it because we have full access to our quiz state.
The only problem is we don't really have some markup to show the error.
This is where I want to reuse this results and results info block because it is extremely similar.
So I want to check here that if we are getting inside our quiz state dot error, then inside I want
to put this block with div results.
And actually I don't want to copy everything, I just need this div results.
Then congratulations and you completed the quiz.
Now let's close this result info and results.
And yes, obviously it would be better if we have separate classes for the error block and not use congratulations
for an error.
But for our small problem this is totally fine.
So inside congratulations!
I just want to write something like server error and inside result info.
I want to write which error we have and it will be quiz state dot error.
But this is not all.
We also must update our condition here because our useeffect will be triggered every single time because
our state changes and it is empty.
This is why here we should not trigger our effect if we have an error.
So if we have quiz state dot error, we just want to return.
Let's reload the page.
As you can see now here we are getting server error failed to fetch.
Why it happens because here inside our code we are trying to trigger this fetch.
It failed.
This is why we dispatched our server error which changed an error property inside our state.
And this is why we are rendering it on the screen with this block.
Let's try to update our API again.
So here I want to return this URL.
Reload the page.
And as you can see everything is still working.
But now our API is fully protected from API errors.