In the previous exercise when we updated
our React application to use Fetch to fetch the data from the server,
we made an implicit assumption that everything will work perfectly.
That is, the communication between
our React application and the server will work perfectly,
and the server is up and running,
and is serving up the data.
But, there is many a slip between the cup and the lip.
So, when your application is communicating with the server,
a lot of things can go wrong along the way.
The client may not be having access to the Internet,
the server may not be up and running.
So, many errors could be encountered.
Now, the previous implementation did not have a way of
handling errors if they occur when you are communicating with the server.
In this exercise, we are going to update our application to handle errors.
Now, the remaining part of displaying
the error messages and so on has already been set up in our application.
So, it's only a matter of handling errors within
our action creators where we issue the Fetch request to the server.
So, that's where we will make modifications to handle
the situation when we encounter errors while communicating with the server.
To get started on this exercise as I mentioned,
the views are all well
updated in order to handle when error messages are delivered there.
So, we have seen how error messages are handled and how they are rendered into views.
But, we haven't updated the place where we are actually accessing the server.
So, here for example,
when we fetched the dishes,
we were optimistically assuming that all the communication with the server is
going to work perfectly and so we never bother about handling errors here.
Now, how do we update this to handle errors?
So, this is where we will go into our code here,
and then I will update this to handle errors.
So, when we encounter an error,
the first thing that they will do here,
is to worry about handling errors.
So, when we receive a response from the servers,
this response could be a response that is sending back the data,
or the response could be an error response from the server.
So, whatever will be the case,
we need to handle that problem here.
So, to handle the problem, we'll say, "Okay,
if you receive the response correctly from the servers,
then what do you do?"
So, we'll say, "If response.ok".
So, the "Ok" property will tell you that the response from
the server was okay and so you can handle things appropriately.
Then in that case,
we'll just return the response.
So, when you return the response, what happens?
This response then will become available to the next "Then".
So, if you know how promises work,
so when this returns something,
that will be delivered in as the incoming parameter to the next
"Then" that has been changed into the set of promise handlers here.
So, then in here,
the corresponding callback function should be able to handle that appropriately.
So, if the response is "Ok",
I'm just going to pass it down here,
and then you're done.
See, the otherwise is where the problem is.
If you encounter errors,
then what do you do?
So, in that case then we'll say,
"Var error is new error".
So, we'll generate a new error object.
So, this is error object that can be generated in JavaScript.
So, we'll generate a new object and then inside this error object,
we can set up a message to be delivered.
So, we'll say, "Error" and
then we'll extract a status from the response.
So, the response's status will contain the status code for the response.
So, the status code like Azure itself;
300, 400, 500 response codes.
"200 Okay" is fine which means that it should have already been handled by that part.
The other ones we will handle here.
The error codes that we'll handle here.
So, we will take the response error code,
and then we'll join that together into a error message here.
So, we'll say, "response status text".
So typically, the status will contain the status code,
and the status text will contain
any error message if the server sent back an error message.
So, that is what we will construct as an error object here,
and after we construct the error object,
then we'll say, "Error.response is response".
And then we will throw the error here.
So, when you throw the error in a promise handler,
we can then implement a catch at the bottom
which will catch the error and then handle the error appropriately.
That I will show you in a minute how we complete.
So, if you receive a response from the server,
then this is how you handle the response from the server.
Now, there could be situations where the server doesn't even respond.
So, in that case,
in a promise handler,
you can also supply an error handler here.
If you have learnt about promises,
you know how the promise handling should be implemented.
So, here we will implement an error handler here.
In the error handler,
we'll say, "Var error message".
We'll say, "New error".
Typically, when an error is encountered when communicating with the server,
that error.message will contain some information about what this error is related to.
So, I'm going to take that part and then generate a new error object,
and then we will throw an error.