In the last video we were able to make a request over to the Yelp API successfully so you might think
that yeah we should just steam on forward and start to show that list of restaurants and a nicely formatted
list like so.
However before we do I just want to mention that.
Well remember we're on a mobile device many users on a mobile device.
They might have a very poor or weak signal to their carrier and so the request we're making entirely
possible for it to fail at any given point in time.
So rather than just steaming on forward and moving on to our next feature I really think that anytime
time that we make a network request as we are right here we should always really think about handling
any air that might appear.
So I think that we should add in a little bit of error handling code to our search screen component.
And if this request right here fails for any reason well then we should somehow report that to the user.
Until then very prominently on the screen that something went wrong and that they should try again later
so to do so I'm going to wrap.
RC Let's first introduce an air.
How about we'll start there.
Nice and easy.
So to make sure that we get an error out of the requests that we're making 100 percent the time and
allow us to put in some error handling code.
I'm gonna go back over to my Yelp dot J.S. file and all we have to do to get an error to appear is remove
the space between the word bear and our API key like so once we do that we will no longer properly authorize
ourselves with the Yelp API.
And so the request should result in the error.
So I can remove that space save the file if I then search for positive once again I'll see a big yellow
warning message in this case appear down here.
So we'll want to somehow capture that error message and show it on the screen to the user just you know
these warning messages that you see down at the bottom the screen are only visible during development.
If a user is running your application on a real device they're not going to see that yellow screen.
Instead it's just going to appear that everything failed mysteriously okay.
So now we can show an error message.
Let's flip back over to our search screen and figure out how we can handle this gracefully.
So to get started we first have to detect any time something goes wrong.
To do so I'm going to find my search API function right here and inside of it I'm going to wrap that
request and these set results call with a try catch statement so I can say Try right here and then put
down an opening curly brace and then on the other side of the request and set results.
I'll place a closing curly brace after the closing one I'll put down catch or catch the air which we
usually abbreviate as simply e or E R and then all indent everything inside that try block.
Like so now if anything goes wrong with this request we're going to enter this catch block and we'll
have an era object to describe exactly what went wrong.
Right now let's just try doing a console log of that era object and seeing what it tells us so I'll
save this flip back over once again I'll search for pasta.
We're not going to see anything up here on the screen anymore.
The warning that we saw down below actually said something like uncut air or something like that or
UN handled request rejection.
So now that we've added in some code to handle that error we're not going to see any error or warning
down about on the screen anymore.
However we should be able to just flip back over to our terminal and see the error message over here.
So there's definitely a lot to it.
If we scroll up a little bit it'll tell us.
Request failed with status code four hundred so that's not super useful for you and I.
Well it's useful for you and I suppose but it's definitely not useful for our users.
So we kind of have an option here.
We can either make use of the object that we get back from that area or request and decide how to use
it to actually show some kind of message to the user.
Or alternatively we can just show a very generic message like something went wrong or try again later
or something like that.
I think that right now that would be a pretty good approach to use.
So let's just try to show a user some message like something went wrong any time that we run into an
error.
And here's the catch.
In order to show a error to our users well we need to update the content on our screen.
Remember anytime we say update content on the screen we're always talking about states.
So if we want to somehow detect when an error occurs and update what is visible or show it error message
to the user it means we need to add in a new state variable so underneath my two existing state definitions
I'm going to add in a third one or this third one all called a state variable something like error message
and I'll get the setter of set error message and I'll default its value to be an empty string so by
default we don't have any message at all.
Now that we have this anytime we enter this catch case rather than doing a console log will instead
call set error message and I'll set the error message is something like something went wrong.
Something very simple so now we can reference error message down inside of our ASX block if error message
has a value that we can print out something it says very clearly.
Hey here's the problem in this case something went wrong.
So to do so we'll go down to our ASX block rather than showing this existing text element right here
of search screen I'm gonna reference error message inside there.
Like so.
So now let's test this out really quickly.
I'll save this once again.
Notice how we can't just always have this text element up here.
If we have this text element up here without anything inside of it we're still going to see a big white
space right there where the text technically should be showing up.
So we're going to eventually have to add in something to conditionally render that text element only
if we have an error message nonetheless we'll fix that up in just a moment.
So once again I'll put in pasta and I see right away.
Something went wrong so it looks like it's definitely working.
It's going to add in a little conditional render to this thing to do so we can use a ternary expression.
So I got to wrap this thing with a set of curly braces and I'll say look at the error message value
if it is a truth value then print out that text element.
Otherwise print out nothing at all.
Print out just no.
Let's try saving that.
Now we don't have any extra block right there but if I search for something I'll see that text appear
OK.
So this definitely works.
Now at this point we could definitely add in a lot more styling to make that error message look much
better than it does right now.
But let's just take care of that later on.
There's definitely a certain point at which adding an error handling code gets a little bit boring and
I don't want this to turn it into anything too boring just yet.
So we could add in some better you're better looking.
Error Message in a little bit.
So right now I'm going to go back over to my Yelp dot J.S. file and I'm going to add a space back in
between Bear and the API key.
It's now our application should be working again.
If I look back over and search for pasta once more I should see 50 results appear.
And yeah we definitely get that.
OK.
So this is perfect so we now have some amount of error handling and it's being done automatically for
us.
Let's take a pause right here in the next video.
We will get back to actually talking about getting that list of restaurants to display.
So I'll see you in just a minute.