1
00:00:00,809 --> 00:00:04,431
[MUSIC]

2
00:00:04,431 --> 00:00:08,086
Communication between client and
server is never a done deal.

3
00:00:08,086 --> 00:00:10,326
To paraphrase a famous proverb,

4
00:00:10,326 --> 00:00:14,168
there is many a quiver between
the client and the server.

5
00:00:14,168 --> 00:00:17,226
So how do we deal with
errors when they arise,

6
00:00:17,226 --> 00:00:21,415
when we are communicating between
the client and the server?

7
00:00:21,415 --> 00:00:26,008
Let's talk about that in this exercise.

8
00:00:26,008 --> 00:00:29,931
When the server generates a response,
or the HTTP client,

9
00:00:29,931 --> 00:00:35,110
while communicating with the server,
encounters an error and then generates

10
00:00:35,110 --> 00:00:40,390
an error response, this is delivered
in the form of HTTP error response.

11
00:00:40,390 --> 00:00:43,760
Now, this response,
we want to be able to process it and

12
00:00:43,760 --> 00:00:48,840
then turn that into a response
message string, which

13
00:00:48,840 --> 00:00:54,790
can be delivered to the client so that
the client can display this on the screen.

14
00:00:54,790 --> 00:00:56,727
So to enable us to do that,

15
00:00:56,727 --> 00:01:02,727
we will create a new service named process
HTTP message in this, this is folder.

16
00:01:02,727 --> 00:01:08,663
So to do that, at the prompt type ng,

17
00:01:08,663 --> 00:01:15,174
g service services/ProcessHTTPMsg,

18
00:01:15,174 --> 00:01:22,265
and generate the ProcessHTTPMsg service.

19
00:01:22,265 --> 00:01:26,178
Now, once the service is generated,
we will then go ahead and

20
00:01:26,178 --> 00:01:27,921
add it into the app module.

21
00:01:27,921 --> 00:01:36,240
And then we'll add in a method
to the ProcessHTTPMsg service.

22
00:01:36,240 --> 00:01:40,068
Now that we have created
the ProcessHTTPMsg service,

23
00:01:40,068 --> 00:01:44,653
let's go ahead and
then add that into the app.module.ts file.

24
00:01:44,653 --> 00:01:52,993
So going to the app.module.ts file,

25
00:01:52,993 --> 00:02:02,353
let me import the ProcessHTTPMsg service,

26
00:02:06,191 --> 00:02:15,255
From './services/process-httpmsg.service'.

27
00:02:15,255 --> 00:02:22,945
So once that is imported, then we will
be able to use that in our application.

28
00:02:22,945 --> 00:02:26,463
So let's go ahead and
add that into our providers.

29
00:02:26,463 --> 00:02:29,216
So going into our providers,

30
00:02:29,216 --> 00:02:34,952
let me add in the ProcessHTTPMsgService
into the providers.

31
00:02:34,952 --> 00:02:38,429
The first thing that we will do
is include a new method into

32
00:02:38,429 --> 00:02:41,618
the ProcessHTTPMsgService
called handle errors,

33
00:02:41,618 --> 00:02:45,105
which will take care of handling
errors when they arise.

34
00:02:45,105 --> 00:02:51,220
And then we will make use of them in
the services where we access the server.

35
00:02:51,220 --> 00:02:54,546
To get started, let's first import,

36
00:02:57,928 --> 00:03:03,969
throwError from, rxjs,

37
00:03:03,969 --> 00:03:09,766
and this helps us to throw in
error whenever that arises.

38
00:03:12,005 --> 00:03:20,787
And then we import HttpErrorResponse from,

39
00:03:23,316 --> 00:03:28,193
angular/common/http.

40
00:03:30,926 --> 00:03:35,632
Then we will start designing
handleError method, and

41
00:03:35,632 --> 00:03:41,257
this takes, as a parameter,
an error which could be a response,

42
00:03:41,257 --> 00:03:45,042
which is an error
response from the server,

43
00:03:45,042 --> 00:03:48,746
or any other reason that the error arises.

44
00:03:48,746 --> 00:03:54,095
So within this handleError method,
what are we supposed to do?

45
00:03:54,095 --> 00:04:02,195
Let's try to construct a message that
summarizes what the error is all about.

46
00:04:02,195 --> 00:04:06,389
So we will include a new
string variable here.

47
00:04:07,880 --> 00:04:13,080
If error.error is an instance

48
00:04:13,080 --> 00:04:18,699
of ErrorEvent, so
if this is an error event that occurs,

49
00:04:18,699 --> 00:04:24,170
then the error.error.message
will contain information.

50
00:04:24,170 --> 00:04:26,695
So we'll set the error message to

51
00:04:26,695 --> 00:04:35,630
error.error.message.

52
00:04:35,630 --> 00:04:42,630
If that is not the case, then that means
that this is coming from the server side,

53
00:04:42,630 --> 00:04:48,500
and so in that case, the error message is
constructed by saying equal to backquotes,

54
00:04:48,500 --> 00:04:55,940
note the backquotes here,
and then ${error.status}.

55
00:04:55,940 --> 00:04:59,450
So we are extracting the status
information from there.

56
00:04:59,450 --> 00:05:03,956
And then,- error.statusText,

57
00:05:03,956 --> 00:05:07,710
if the statusText exists, or

58
00:05:07,710 --> 00:05:12,226
that'll be an empty string there.

59
00:05:12,226 --> 00:05:17,691
And then we will also include
the error.error itself,

60
00:05:17,691 --> 00:05:23,866
the complete error object itself,
right there in the string.

61
00:05:23,866 --> 00:05:29,320
And then use that as our error message.

62
00:05:29,320 --> 00:05:33,484
Now, once we have the error message,

63
00:05:33,484 --> 00:05:38,169
then we will be able to
use the throwError to

64
00:05:38,169 --> 00:05:43,520
return an error observable
to our application.

65
00:05:44,940 --> 00:05:48,960
So what this means is this is
throwing an error at this point,

66
00:05:48,960 --> 00:05:51,370
with the error message included there.

67
00:05:51,370 --> 00:05:56,549
So this error message string is
constructed based upon the information

68
00:05:56,549 --> 00:06:02,243
that we obtain here, either because
the server side responded with an error or

69
00:06:02,243 --> 00:06:05,111
the error could be from other reasons.

70
00:06:05,111 --> 00:06:09,606
So in either case, we will construct
an error message and then return it.

71
00:06:09,606 --> 00:06:12,493
Now, where do we make use
of this handle error?

72
00:06:12,493 --> 00:06:17,549
Now, within our services, for
example the dishservice.ts file,

73
00:06:17,549 --> 00:06:22,866
we saw that earlier when we said this
HTTP get, and then we just said map,

74
00:06:22,866 --> 00:06:28,020
and then assumed that the response
is always a positive response.

75
00:06:28,020 --> 00:06:31,580
But suppose their response
is not positive, and

76
00:06:31,580 --> 00:06:37,330
then it returns an error,
then we need to catch that error.

77
00:06:37,330 --> 00:06:44,180
To help us with this, we import
the catchError operator from rxjs,

78
00:06:44,180 --> 00:06:50,690
and then we also import
the ProcessHTTPMsgService

79
00:06:50,690 --> 00:06:56,001
that we just created earlier into

80
00:06:56,001 --> 00:07:01,860
our dish service so that we can use
the handle error method from there.

81
00:07:01,860 --> 00:07:08,060
So we import this from
the ./process-httpmsg.service.

82
00:07:08,060 --> 00:07:12,670
And then, going down to the constructor,

83
00:07:12,670 --> 00:07:18,690
we now inject the process
HTTP message service

84
00:07:18,690 --> 00:07:22,910
into the constructor,
along with the HTTP client.

85
00:07:22,910 --> 00:07:27,080
So that we can make use of this service,

86
00:07:27,080 --> 00:07:32,280
especially the handle error method
of the service to handle the errors

87
00:07:32,280 --> 00:07:37,710
which are returned by
our HTTP client there.

88
00:07:38,930 --> 00:07:43,009
Now, once we have
configured the constructor,

89
00:07:43,009 --> 00:07:46,988
then to handle error in
the getDishes method for

90
00:07:46,988 --> 00:07:50,980
example, we will pipe
to catchErrors method.

91
00:07:50,980 --> 00:07:54,762
And then call the handleError method after

92
00:07:54,762 --> 00:08:00,446
this.processHTTPMsgService within
the catchError method.

93
00:08:00,446 --> 00:08:07,817
So this way When the HTTP client returns
a error then this will be processed and

94
00:08:07,817 --> 00:08:12,875
the appropriate error
message will be extracted.

95
00:08:12,875 --> 00:08:16,879
And then it will end up
throwing the error through

96
00:08:16,879 --> 00:08:20,112
the handleError method at that point.

97
00:08:20,112 --> 00:08:24,108
Similarly, let's do
the same to the getDish and

98
00:08:24,108 --> 00:08:27,710
the getFeatureDish methods also.

99
00:08:27,710 --> 00:08:31,710
Now, when it comes to
the getDish ids method,

100
00:08:31,710 --> 00:08:36,200
since the getDish ids method is
making use of the getDishes method,.

101
00:08:36,200 --> 00:08:40,670
So we don't need to explicitly call the
handleError because if any error arises

102
00:08:40,670 --> 00:08:45,560
the getDishes method will have already
converted that error into an error string.

103
00:08:45,560 --> 00:08:50,930
So we just need to catch the error and
then return the error from getDish Ids.

104
00:08:50,930 --> 00:08:55,020
Normally, we wouldn't even come up to
this point if an error arises, because

105
00:08:55,020 --> 00:09:00,250
the getDishes method would have handled
the error appropriately at that point.

106
00:09:00,250 --> 00:09:06,880
So once we have configured
the dish service appropriately,

107
00:09:06,880 --> 00:09:12,600
then we will be able to then
make use of the catchError

108
00:09:12,600 --> 00:09:17,283
method to deal with the errors that arise.

109
00:09:17,283 --> 00:09:23,647
Now that we have updated our service
to be able to deal with errors.

110
00:09:23,647 --> 00:09:27,486
How do we handle this within
our component themselves?

111
00:09:27,486 --> 00:09:31,309
So within a component, so for example,
when we go to the menu component.

112
00:09:31,309 --> 00:09:34,557
What we realize is that
when we do the subscribe,

113
00:09:34,557 --> 00:09:38,280
we were expecting the dishes
to be delivered to us.

114
00:09:38,280 --> 00:09:40,750
Now, it is possible that
the instruct of the dishes,

115
00:09:40,750 --> 00:09:44,210
the error will be delivered
by the observable throw and

116
00:09:44,210 --> 00:09:47,430
then that results in the error
message being available to us.

117
00:09:47,430 --> 00:09:52,540
So, to deal with that situation,
I will introduce a new

118
00:09:52,540 --> 00:09:59,088
variable called errMess in the menu
component which is of type string.

119
00:09:59,088 --> 00:10:05,647
And then the subscribe method itself
provides a way of handling errors.

120
00:10:05,647 --> 00:10:12,315
So the subscribe method, right now we
have only specified one function here.

121
00:10:12,315 --> 00:10:17,142
We can also specify a second
function which will

122
00:10:17,142 --> 00:10:21,020
be called when the error results.

123
00:10:21,020 --> 00:10:26,000
So in this case, I can supply
a second error function saying,

124
00:10:26,000 --> 00:10:30,460
errMess, which is the value returned in

125
00:10:30,460 --> 00:10:35,630
when the observable throw
is done by the dishService.

126
00:10:35,630 --> 00:10:43,850
So in this case, I would say this.errMess
= <any>errMess, and that's it.

127
00:10:43,850 --> 00:10:48,709
So here what happens is
that when the observable

128
00:10:48,709 --> 00:10:53,082
is returned by the dishService is a Value,

129
00:10:53,082 --> 00:10:57,707
then that would be handled
by the first part.

130
00:10:57,707 --> 00:11:01,434
If the observable is returned
with the observable throw,

131
00:11:01,434 --> 00:11:03,874
then this function will be executed.

132
00:11:03,874 --> 00:11:07,689
And in this function,
we are taking the error message and

133
00:11:07,689 --> 00:11:12,949
then capturing that error message into
this errMess string that we have here.

134
00:11:12,949 --> 00:11:16,776
So now we have the error
message available to us, so

135
00:11:16,776 --> 00:11:21,940
we can display this error message
on the view of this menu component.

136
00:11:21,940 --> 00:11:25,910
So how do we display this in
the menu components view?

137
00:11:25,910 --> 00:11:33,700
So going to menu components template file,
here we see that if dishes is not null,

138
00:11:33,700 --> 00:11:39,200
then we are displaying
the menu with all the dishes.

139
00:11:39,200 --> 00:11:46,550
If dishes is null then this
spinner is being displayed there.

140
00:11:46,550 --> 00:11:50,903
Now, we will add in one more here,

141
00:11:50,903 --> 00:11:55,107
even if the errMess that we have,

142
00:11:55,107 --> 00:11:59,912
the variable, is not null, then also

143
00:11:59,912 --> 00:12:04,866
the spinner should be hidden and then,

144
00:12:04,866 --> 00:12:10,300
finally, add in one more div with an ngIf.

145
00:12:10,300 --> 00:12:15,077
So what this does is that this
last dive will be displayed in

146
00:12:15,077 --> 00:12:19,470
case there is an errors,
and the error message.

147
00:12:19,470 --> 00:12:23,345
ErrMess string is set up
to the error message.

148
00:12:23,345 --> 00:12:29,648
So in that case,
we'll just simply say h2 error,

149
00:12:29,648 --> 00:12:35,962
and then I'm just going to
display that string as,

150
00:12:41,159 --> 00:12:46,586
A string within the view there, that's it.

151
00:12:46,586 --> 00:12:50,539
You can do a more elaborate way of
displaying the error message if you so

152
00:12:50,539 --> 00:12:51,081
wish to.

153
00:12:51,081 --> 00:12:54,118
But all that I'm going to
do is if there is an error,

154
00:12:54,118 --> 00:12:58,280
I will simply show error on the screen and
then display an errMess.

155
00:12:58,280 --> 00:13:04,283
You can even style it by
changing the color to red and

156
00:13:04,283 --> 00:13:09,875
so on, but
I'll just leave it like that there.

157
00:13:09,875 --> 00:13:16,477
So, with this, we will end up displaying
the error message in the view here.

158
00:13:16,477 --> 00:13:21,471
The same procedure can also be
used with the dish component and

159
00:13:21,471 --> 00:13:26,764
also the home component where we
are accessing the dish service.

160
00:13:26,764 --> 00:13:32,692
So going to the dish component,
am going to do exactly the same thing,

161
00:13:32,692 --> 00:13:42,680
so within the dish component I
will include the, ErrMess here.

162
00:13:42,680 --> 00:13:45,654
And then right here within the subscribe,

163
00:13:45,654 --> 00:13:49,190
this is where we
are receiving the dish value.

164
00:13:49,190 --> 00:13:50,260
So the first part,

165
00:13:50,260 --> 00:13:55,770
what we have already included will be
called if the observable returns a value.

166
00:13:55,770 --> 00:14:00,770
But should it not return a value, then
we need to deal with the error message.

167
00:14:00,770 --> 00:14:04,360
And we'll use exactly the same

168
00:14:04,360 --> 00:14:09,620
error message function that we have
defined earlier in the menu component.

169
00:14:09,620 --> 00:14:15,926
So, we will say that this.errMess

170
00:14:15,926 --> 00:14:20,791
= Ermess here.

171
00:14:20,791 --> 00:14:26,971
That's it, so
my dish component is now updated.

172
00:14:26,971 --> 00:14:31,521
So I need to update the dish
component's template file.

173
00:14:31,521 --> 00:14:34,317
So going to the template file,

174
00:14:34,317 --> 00:14:40,240
we see that we are going to be
displaying the dish if dish is not null.

175
00:14:40,240 --> 00:14:45,034
And then down below here,
we are handling the situation

176
00:14:45,034 --> 00:14:49,326
where we'll show the spinner
if the dish is null.

177
00:14:49,326 --> 00:14:54,826
So let me add in also, if the error
message is not null then I should

178
00:14:54,826 --> 00:15:00,235
be displaying error message
rather than the dish here, right?

179
00:15:00,235 --> 00:15:03,827
So, let me go ahead and

180
00:15:03,827 --> 00:15:10,075
copy the code from the menu component.

181
00:15:10,075 --> 00:15:12,790
I'm going to use exactly the same code for

182
00:15:12,790 --> 00:15:16,171
the dish detail components
template file also.

183
00:15:16,171 --> 00:15:19,435
So, right there.

184
00:15:19,435 --> 00:15:22,823
Let me go ahead and insert that code here.

185
00:15:22,823 --> 00:15:26,130
So we see that if errMess is not null,

186
00:15:26,130 --> 00:15:30,838
then this error will be
displayed in the view there.

187
00:15:30,838 --> 00:15:31,938
Now same thing,

188
00:15:31,938 --> 00:15:36,502
going to the home component we need
to go through the same procedure.

189
00:15:36,502 --> 00:15:40,688
Now within the home component, of course,
we have dish, promotion, and leader.

190
00:15:40,688 --> 00:15:47,625
So I'm going to define separate,
Strings for

191
00:15:47,625 --> 00:15:53,169
each one of them because the error
could arise from any one of the three.

192
00:15:53,169 --> 00:15:57,927
Right now we're only dealing with dish
being fetched from the server side.

193
00:15:57,927 --> 00:16:04,000
The remaining two I will expect you to do
that as part of the, Final assignment.

194
00:16:04,000 --> 00:16:10,252
So we'll, I'll say dish errmess string and
then go down into the code here.

195
00:16:10,252 --> 00:16:13,630
And in the code here,

196
00:16:13,630 --> 00:16:18,146
we'll simply say errmess.

197
00:16:18,146 --> 00:16:23,925
This dish errmess = any

198
00:16:23,925 --> 00:16:30,130
errmess, that's it.

199
00:16:30,130 --> 00:16:35,036
And similarly,
update the home components template files.

200
00:16:35,036 --> 00:16:40,215
And going to the home
components template file,

201
00:16:40,215 --> 00:16:45,392
we see that we have the dish
bin displayed there,

202
00:16:45,392 --> 00:16:50,461
so now for this one I should say or
dish errMess.

203
00:16:50,461 --> 00:16:55,738
And then, down below here,
I will include the code

204
00:16:55,738 --> 00:17:00,648
that I have copied from
the menu component, and

205
00:17:00,648 --> 00:17:04,600
then I update it to dish ErrMess here.

206
00:17:04,600 --> 00:17:11,957
And also, update this to dishErrMess here,
that's it.

207
00:17:11,957 --> 00:17:14,113
Let's save the changes.

208
00:17:14,113 --> 00:17:18,823
Going to the browser, you see that
everything works just like before.

209
00:17:18,823 --> 00:17:24,249
The home, the menu component and also the
dish detail component without any problem.

210
00:17:24,249 --> 00:17:27,498
Now the question is,
how do we cause errors?

211
00:17:27,498 --> 00:17:35,566
To cause errors, one possible way that
we can deal with the issue is we go and

212
00:17:35,566 --> 00:17:40,961
seek a nonexistent
information from the server.

213
00:17:40,961 --> 00:17:45,865
Let me go to the dish service and
then cause

214
00:17:45,865 --> 00:17:51,240
my first problem in the dishService here.

215
00:17:51,240 --> 00:17:55,460
So for the featured dish instead of
dishes, let me make a mistake and

216
00:17:55,460 --> 00:17:59,470
say dishees and then save the change.

217
00:17:59,470 --> 00:18:04,160
Obviously that means that
this url doesn't exist.

218
00:18:04,160 --> 00:18:07,482
So, what will happen if
it access the server?

219
00:18:07,482 --> 00:18:11,514
Going to the browser when we now scroll,

220
00:18:11,514 --> 00:18:16,504
you see that the dish is
not being displayed here.

221
00:18:16,504 --> 00:18:19,570
It says here Error 404 Not Found.

222
00:18:19,570 --> 00:18:24,170
This is because we are trying to
access the dish information at

223
00:18:24,170 --> 00:18:28,424
the URL dishees which doesn't
exist on the server side.

224
00:18:28,424 --> 00:18:32,289
So you see how the error message
is being displayed here.

225
00:18:32,289 --> 00:18:36,172
Of course, you can be a bit more fancy and
do more work around this and

226
00:18:36,172 --> 00:18:39,460
then display the error message
in a more meaningful way.

227
00:18:39,460 --> 00:18:44,750
But the basic principle is
highlighted here saying that you

228
00:18:44,750 --> 00:18:50,357
can show an error message if
something is not properly executed

229
00:18:50,357 --> 00:18:56,194
when you are trying to access
information from your server side.

230
00:18:56,194 --> 00:19:02,373
Of course, so this is an artificially
created error in my application.

231
00:19:02,373 --> 00:19:07,020
To cause yet another kind of error,
I have gone to my terminal window and

232
00:19:07,020 --> 00:19:12,295
then shut down the server to see what my
Angular application will do in this case.

233
00:19:12,295 --> 00:19:15,267
So after shutting down the server,

234
00:19:15,267 --> 00:19:20,330
let's see what the home component
will display in its view.

235
00:19:21,830 --> 00:19:26,620
So going to the home component,
we now see that because my Angular

236
00:19:26,620 --> 00:19:31,330
application is not able to access
the server, it has caused an error again.

237
00:19:31,330 --> 00:19:37,450
And then it shows this string there to
indicate that some error has occurred.

238
00:19:37,450 --> 00:19:40,560
Of course, this is a cryptic string,

239
00:19:40,560 --> 00:19:45,010
doesn't convey anything meaningful
about what the source of the error is.

240
00:19:45,010 --> 00:19:52,420
But that's all that we could get trying
to access the server in this application.

241
00:19:52,420 --> 00:19:56,260
Same thing, if I go to the menu,
you will see the same kind of thing being

242
00:19:56,260 --> 00:19:59,010
displayed, because the server
is not available, and so

243
00:19:59,010 --> 00:20:02,150
the dish information cannot
be fetched from the server.

244
00:20:02,150 --> 00:20:05,110
With this we complete this exercise.

245
00:20:05,110 --> 00:20:07,660
In this exercise,
we have learned how to deal with

246
00:20:07,660 --> 00:20:13,040
errors that arise during client server
communication in our Angular application.

247
00:20:13,040 --> 00:20:18,333
This is a good time for you to do a git
commit with the message http part two.

248
00:20:18,333 --> 00:20:24,225
[MUSIC]