1
00:00:01,030 --> 00:00:05,830
In the last video we were able to make a request over to the Yelp API successfully so you might think

2
00:00:05,830 --> 00:00:10,840
that yeah we should just steam on forward and start to show that list of restaurants and a nicely formatted

3
00:00:10,840 --> 00:00:12,100
list like so.

4
00:00:12,100 --> 00:00:14,720
However before we do I just want to mention that.

5
00:00:14,800 --> 00:00:18,910
Well remember we're on a mobile device many users on a mobile device.

6
00:00:18,910 --> 00:00:25,720
They might have a very poor or weak signal to their carrier and so the request we're making entirely

7
00:00:25,720 --> 00:00:28,980
possible for it to fail at any given point in time.

8
00:00:29,080 --> 00:00:33,600
So rather than just steaming on forward and moving on to our next feature I really think that anytime

9
00:00:33,600 --> 00:00:38,410
time that we make a network request as we are right here we should always really think about handling

10
00:00:38,500 --> 00:00:40,660
any air that might appear.

11
00:00:40,660 --> 00:00:44,760
So I think that we should add in a little bit of error handling code to our search screen component.

12
00:00:44,950 --> 00:00:49,960
And if this request right here fails for any reason well then we should somehow report that to the user.

13
00:00:49,960 --> 00:00:54,220
Until then very prominently on the screen that something went wrong and that they should try again later

14
00:00:55,140 --> 00:00:57,860
so to do so I'm going to wrap.

15
00:00:57,880 --> 00:00:59,350
RC Let's first introduce an air.

16
00:00:59,350 --> 00:01:00,170
How about we'll start there.

17
00:01:00,170 --> 00:01:00,990
Nice and easy.

18
00:01:01,100 --> 00:01:05,240
So to make sure that we get an error out of the requests that we're making 100 percent the time and

19
00:01:05,240 --> 00:01:07,410
allow us to put in some error handling code.

20
00:01:07,520 --> 00:01:12,710
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

21
00:01:12,710 --> 00:01:19,910
the space between the word bear and our API key like so once we do that we will no longer properly authorize

22
00:01:19,910 --> 00:01:21,770
ourselves with the Yelp API.

23
00:01:21,770 --> 00:01:24,390
And so the request should result in the error.

24
00:01:24,410 --> 00:01:31,010
So I can remove that space save the file if I then search for positive once again I'll see a big yellow

25
00:01:31,160 --> 00:01:33,550
warning message in this case appear down here.

26
00:01:33,830 --> 00:01:38,900
So we'll want to somehow capture that error message and show it on the screen to the user just you know

27
00:01:38,900 --> 00:01:43,890
these warning messages that you see down at the bottom the screen are only visible during development.

28
00:01:44,030 --> 00:01:49,370
If a user is running your application on a real device they're not going to see that yellow screen.

29
00:01:49,370 --> 00:01:54,640
Instead it's just going to appear that everything failed mysteriously okay.

30
00:01:54,640 --> 00:01:56,260
So now we can show an error message.

31
00:01:56,290 --> 00:02:00,770
Let's flip back over to our search screen and figure out how we can handle this gracefully.

32
00:02:00,850 --> 00:02:04,840
So to get started we first have to detect any time something goes wrong.

33
00:02:04,840 --> 00:02:10,120
To do so I'm going to find my search API function right here and inside of it I'm going to wrap that

34
00:02:10,120 --> 00:02:19,660
request and these set results call with a try catch statement so I can say Try right here and then put

35
00:02:19,660 --> 00:02:25,290
down an opening curly brace and then on the other side of the request and set results.

36
00:02:25,330 --> 00:02:32,820
I'll place a closing curly brace after the closing one I'll put down catch or catch the air which we

37
00:02:32,820 --> 00:02:39,900
usually abbreviate as simply e or E R and then all indent everything inside that try block.

38
00:02:39,900 --> 00:02:45,840
Like so now if anything goes wrong with this request we're going to enter this catch block and we'll

39
00:02:45,840 --> 00:02:49,650
have an era object to describe exactly what went wrong.

40
00:02:49,650 --> 00:02:55,430
Right now let's just try doing a console log of that era object and seeing what it tells us so I'll

41
00:02:55,430 --> 00:03:01,210
save this flip back over once again I'll search for pasta.

42
00:03:01,380 --> 00:03:03,830
We're not going to see anything up here on the screen anymore.

43
00:03:03,900 --> 00:03:08,640
The warning that we saw down below actually said something like uncut air or something like that or

44
00:03:08,640 --> 00:03:11,680
UN handled request rejection.

45
00:03:11,760 --> 00:03:16,320
So now that we've added in some code to handle that error we're not going to see any error or warning

46
00:03:16,320 --> 00:03:18,270
down about on the screen anymore.

47
00:03:18,270 --> 00:03:23,560
However we should be able to just flip back over to our terminal and see the error message over here.

48
00:03:23,730 --> 00:03:25,890
So there's definitely a lot to it.

49
00:03:25,890 --> 00:03:27,480
If we scroll up a little bit it'll tell us.

50
00:03:27,480 --> 00:03:33,190
Request failed with status code four hundred so that's not super useful for you and I.

51
00:03:33,240 --> 00:03:38,190
Well it's useful for you and I suppose but it's definitely not useful for our users.

52
00:03:38,190 --> 00:03:39,920
So we kind of have an option here.

53
00:03:40,050 --> 00:03:45,240
We can either make use of the object that we get back from that area or request and decide how to use

54
00:03:45,240 --> 00:03:47,720
it to actually show some kind of message to the user.

55
00:03:47,910 --> 00:03:53,400
Or alternatively we can just show a very generic message like something went wrong or try again later

56
00:03:53,430 --> 00:03:55,090
or something like that.

57
00:03:55,140 --> 00:03:58,090
I think that right now that would be a pretty good approach to use.

58
00:03:58,090 --> 00:04:02,850
So let's just try to show a user some message like something went wrong any time that we run into an

59
00:04:02,850 --> 00:04:03,940
error.

60
00:04:04,090 --> 00:04:05,290
And here's the catch.

61
00:04:05,290 --> 00:04:10,610
In order to show a error to our users well we need to update the content on our screen.

62
00:04:10,810 --> 00:04:16,600
Remember anytime we say update content on the screen we're always talking about states.

63
00:04:17,440 --> 00:04:22,540
So if we want to somehow detect when an error occurs and update what is visible or show it error message

64
00:04:22,540 --> 00:04:31,440
to the user it means we need to add in a new state variable so underneath my two existing state definitions

65
00:04:31,500 --> 00:04:37,530
I'm going to add in a third one or this third one all called a state variable something like error message

66
00:04:38,280 --> 00:04:47,990
and I'll get the setter of set error message and I'll default its value to be an empty string so by

67
00:04:47,990 --> 00:04:50,530
default we don't have any message at all.

68
00:04:52,140 --> 00:04:57,210
Now that we have this anytime we enter this catch case rather than doing a console log will instead

69
00:04:57,210 --> 00:05:05,910
call set error message and I'll set the error message is something like something went wrong.

70
00:05:06,150 --> 00:05:12,780
Something very simple so now we can reference error message down inside of our ASX block if error message

71
00:05:12,780 --> 00:05:15,670
has a value that we can print out something it says very clearly.

72
00:05:15,720 --> 00:05:18,900
Hey here's the problem in this case something went wrong.

73
00:05:19,420 --> 00:05:25,140
So to do so we'll go down to our ASX block rather than showing this existing text element right here

74
00:05:26,130 --> 00:05:32,140
of search screen I'm gonna reference error message inside there.

75
00:05:32,150 --> 00:05:34,270
Like so.

76
00:05:34,340 --> 00:05:36,170
So now let's test this out really quickly.

77
00:05:36,170 --> 00:05:37,850
I'll save this once again.

78
00:05:37,850 --> 00:05:41,160
Notice how we can't just always have this text element up here.

79
00:05:41,180 --> 00:05:45,050
If we have this text element up here without anything inside of it we're still going to see a big white

80
00:05:45,050 --> 00:05:48,620
space right there where the text technically should be showing up.

81
00:05:48,680 --> 00:05:53,330
So we're going to eventually have to add in something to conditionally render that text element only

82
00:05:53,330 --> 00:05:59,000
if we have an error message nonetheless we'll fix that up in just a moment.

83
00:05:59,000 --> 00:06:02,120
So once again I'll put in pasta and I see right away.

84
00:06:02,120 --> 00:06:05,740
Something went wrong so it looks like it's definitely working.

85
00:06:05,750 --> 00:06:11,360
It's going to add in a little conditional render to this thing to do so we can use a ternary expression.

86
00:06:11,360 --> 00:06:17,600
So I got to wrap this thing with a set of curly braces and I'll say look at the error message value

87
00:06:18,260 --> 00:06:22,140
if it is a truth value then print out that text element.

88
00:06:22,490 --> 00:06:24,890
Otherwise print out nothing at all.

89
00:06:24,920 --> 00:06:28,030
Print out just no.

90
00:06:28,260 --> 00:06:29,810
Let's try saving that.

91
00:06:29,940 --> 00:06:34,830
Now we don't have any extra block right there but if I search for something I'll see that text appear

92
00:06:36,000 --> 00:06:36,200
OK.

93
00:06:36,210 --> 00:06:37,760
So this definitely works.

94
00:06:37,760 --> 00:06:42,060
Now at this point we could definitely add in a lot more styling to make that error message look much

95
00:06:42,060 --> 00:06:43,140
better than it does right now.

96
00:06:43,350 --> 00:06:45,570
But let's just take care of that later on.

97
00:06:45,630 --> 00:06:50,010
There's definitely a certain point at which adding an error handling code gets a little bit boring and

98
00:06:50,010 --> 00:06:52,930
I don't want this to turn it into anything too boring just yet.

99
00:06:53,100 --> 00:06:55,800
So we could add in some better you're better looking.

100
00:06:55,800 --> 00:06:58,080
Error Message in a little bit.

101
00:06:58,080 --> 00:07:02,610
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

102
00:07:02,610 --> 00:07:04,880
between Bear and the API key.

103
00:07:04,910 --> 00:07:07,390
It's now our application should be working again.

104
00:07:07,650 --> 00:07:13,270
If I look back over and search for pasta once more I should see 50 results appear.

105
00:07:13,380 --> 00:07:15,340
And yeah we definitely get that.

106
00:07:15,390 --> 00:07:15,660
OK.

107
00:07:15,660 --> 00:07:21,270
So this is perfect so we now have some amount of error handling and it's being done automatically for

108
00:07:21,270 --> 00:07:22,130
us.

109
00:07:22,140 --> 00:07:24,150
Let's take a pause right here in the next video.

110
00:07:24,150 --> 00:07:28,450
We will get back to actually talking about getting that list of restaurants to display.

111
00:07:28,560 --> 00:07:29,820
So I'll see you in just a minute.