1
00:00:02,070 --> 00:00:04,260
Now we improved the user experience

2
00:00:04,260 --> 00:00:08,690
and we are handling the case that we don't have any comments

3
00:00:08,690 --> 00:00:10,123
for a given post.

4
00:00:11,080 --> 00:00:13,330
This could be considered an error,

5
00:00:13,330 --> 00:00:16,840
but I actually also wanna handle real errors

6
00:00:16,840 --> 00:00:19,960
where something goes wrong on the server.

7
00:00:19,960 --> 00:00:22,130
We're not able to reach the database

8
00:00:22,130 --> 00:00:23,640
or anything like this,

9
00:00:23,640 --> 00:00:28,030
because such things, such problems can always occur,

10
00:00:28,030 --> 00:00:31,053
and you should always plan for their occurrence.

11
00:00:32,290 --> 00:00:33,530
And to simulate this,

12
00:00:33,530 --> 00:00:35,520
let's go back to blog.js,

13
00:00:35,520 --> 00:00:37,930
so to the server-side code here.

14
00:00:37,930 --> 00:00:42,930
And there, let's say that we comment out this code

15
00:00:42,960 --> 00:00:45,080
that should actually run,

16
00:00:45,080 --> 00:00:48,130
and instead, I return a response

17
00:00:48,130 --> 00:00:51,870
where I set the status code to 500

18
00:00:51,870 --> 00:00:56,870
and I then return some JSON message where I say, "Error!"

19
00:00:58,420 --> 00:01:00,290
Something like this.

20
00:01:00,290 --> 00:01:04,450
Of course, this is now some code I wrote myself,

21
00:01:04,450 --> 00:01:06,970
but I'm just writing this here to simulate

22
00:01:06,970 --> 00:01:09,430
that this crashes for whatever reason

23
00:01:09,430 --> 00:01:12,450
so that this is actually returning a response

24
00:01:12,450 --> 00:01:15,860
but a response with a 500 status code,

25
00:01:15,860 --> 00:01:17,763
and we wanna handle that as well.

26
00:01:19,690 --> 00:01:21,880
For this, back in comments.js,

27
00:01:21,880 --> 00:01:23,960
in the saveComment function

28
00:01:23,960 --> 00:01:27,010
where we do send a request to that route

29
00:01:27,010 --> 00:01:30,430
which does now return that 500 status code.

30
00:01:30,430 --> 00:01:32,360
There, we now wanna handle that case

31
00:01:32,360 --> 00:01:34,983
that we get a nonsuccess code.

32
00:01:36,700 --> 00:01:40,350
And for this, on this response which we get,

33
00:01:40,350 --> 00:01:44,393
we have this special ok field.

34
00:01:45,290 --> 00:01:49,540
This will be true if we got a 200 response code,

35
00:01:49,540 --> 00:01:53,090
which is a success HTTP status code.

36
00:01:53,090 --> 00:01:55,620
Remember, these HTTP status codes,

37
00:01:55,620 --> 00:01:57,210
I mentioned them earlier.

38
00:01:57,210 --> 00:02:00,230
If you have a 200, or 201,

39
00:02:00,230 --> 00:02:04,090
or 300-ish code, it's a success.

40
00:02:04,090 --> 00:02:07,990
If you have a 400-ish or a 500-ish code,

41
00:02:07,990 --> 00:02:09,250
it's an error.

42
00:02:09,250 --> 00:02:10,970
So 500 is an error.

43
00:02:10,970 --> 00:02:14,423
You got a response, but something went wrong on the server.

44
00:02:15,570 --> 00:02:20,180
And in that case, ok would be false if you got such a 500

45
00:02:20,180 --> 00:02:22,760
or 400-ish code.

46
00:02:22,760 --> 00:02:24,100
So here we can actually check,

47
00:02:24,100 --> 00:02:28,560
if response.ok is true, and only if it is true,

48
00:02:28,560 --> 00:02:30,363
I wanna fetch my comments.

49
00:02:31,300 --> 00:02:35,030
Else, we might want to show a message to the user,

50
00:02:35,030 --> 00:02:39,030
maybe just with the good old built-in alert function

51
00:02:39,030 --> 00:02:42,387
where we just say, "Could not send comment!"

52
00:02:43,620 --> 00:02:46,190
Of course, you could also manipulate the DOM

53
00:02:46,190 --> 00:02:49,240
to show some error message directly on the page.

54
00:02:49,240 --> 00:02:51,080
You could add a new element,

55
00:02:51,080 --> 00:02:53,820
add an overlay, whatever you wanna do.

56
00:02:53,820 --> 00:02:57,053
Here, I'll just use this good old built-in alert.

57
00:02:58,540 --> 00:03:03,200
And therefore, now with this if we go back and we reload,

58
00:03:03,200 --> 00:03:05,680
and I try to send a comment,

59
00:03:05,680 --> 00:03:08,880
this will fail because we changed the server-side code.

60
00:03:08,880 --> 00:03:12,563
And hence, if I click here, I get this alert eventually.

61
00:03:13,530 --> 00:03:17,493
So now we're also handling the case that things go wrong.

62
00:03:19,080 --> 00:03:22,720
Now that's just one way of things going wrong though,

63
00:03:22,720 --> 00:03:25,920
a very common way, hopefully not too common

64
00:03:25,920 --> 00:03:28,000
but definitely something that could occur,

65
00:03:28,000 --> 00:03:30,018
that things go wrong on the server.

66
00:03:30,018 --> 00:03:32,990
But another error that could occur

67
00:03:32,990 --> 00:03:35,880
is that the request is not even sent

68
00:03:35,880 --> 00:03:38,560
because maybe the user is visiting this page

69
00:03:38,560 --> 00:03:42,040
from a mobile phone and the connectivity is lost

70
00:03:42,040 --> 00:03:45,000
whilst the user is on this page.

71
00:03:45,000 --> 00:03:48,920
So in that case, sending the request might already fail.

72
00:03:48,920 --> 00:03:53,010
It's not the response that has a status code of 500 or 400,

73
00:03:53,010 --> 00:03:56,023
instead the request didn't even reach the server,

74
00:03:57,010 --> 00:04:01,630
and we might wanna handle such a scenario as well.

75
00:04:01,630 --> 00:04:04,530
In such a case that the request fails

76
00:04:04,530 --> 00:04:06,320
for a technical reason,

77
00:04:06,320 --> 00:04:09,780
so that we don't have a 400 or 500 status code

78
00:04:09,780 --> 00:04:11,690
but a technical problem,

79
00:04:11,690 --> 00:04:15,643
this fetch function will throw an error.

80
00:04:16,920 --> 00:04:20,519
And you might recall that in an earlier course section,

81
00:04:20,519 --> 00:04:23,110
I did talk about handling errors

82
00:04:23,110 --> 00:04:25,980
that are thrown by some function.

83
00:04:25,980 --> 00:04:30,740
We could do this with try/catch when using async/await.

84
00:04:30,740 --> 00:04:35,740
We can try executing this code here

85
00:04:37,110 --> 00:04:40,210
and catch an error if it fails,

86
00:04:40,210 --> 00:04:41,863
so if it throws an error.

87
00:04:43,520 --> 00:04:45,560
We also might want to move this code,

88
00:04:45,560 --> 00:04:48,100
this if/else block into the try block,

89
00:04:48,100 --> 00:04:51,225
because this should actually also only execute

90
00:04:51,225 --> 00:04:55,393
if we do have a response at least.

91
00:04:56,550 --> 00:04:58,890
So we try this code,

92
00:04:58,890 --> 00:05:01,610
but if it fails, if we got a technical error,

93
00:05:01,610 --> 00:05:04,540
for example, because the request isn't even sent,

94
00:05:04,540 --> 00:05:07,270
then we also might want to show an alert

95
00:05:07,270 --> 00:05:12,270
and say, "Could not send request - maybe try again later!"

96
00:05:13,610 --> 00:05:14,713
or anything like that.

97
00:05:16,290 --> 00:05:17,670
So now that's an error message

98
00:05:17,670 --> 00:05:21,023
which we show in such a technical problem scenario.

99
00:05:22,610 --> 00:05:26,500
Now to simulate this, I'll go back to the DevTools here,

100
00:05:26,500 --> 00:05:28,178
and there in the Network tab,

101
00:05:28,178 --> 00:05:33,178
I can actually go to this drop down here and choose offline.

102
00:05:35,690 --> 00:05:38,963
Now the browser will simulate that I'm offline.

103
00:05:40,620 --> 00:05:45,230
Actually, first of all, I'll go back to no throttling

104
00:05:45,230 --> 00:05:48,970
and reload this page to load the updated JavaScript code,

105
00:05:48,970 --> 00:05:52,990
and then I'll go to offline and now test this.

106
00:05:52,990 --> 00:05:53,823
And now, here I get

107
00:05:53,823 --> 00:05:57,470
"Could not send request - maybe try again later!"

108
00:05:57,470 --> 00:05:59,740
So now I get this different error message,

109
00:05:59,740 --> 00:06:01,840
because now we have a technical error

110
00:06:01,840 --> 00:06:04,120
with sending the request.

111
00:06:04,120 --> 00:06:07,440
If I'm online, if I have no throttling here,

112
00:06:07,440 --> 00:06:10,780
then I get the other error, that server-side error,

113
00:06:10,780 --> 00:06:12,080
which we're handling.

114
00:06:12,080 --> 00:06:14,340
And you wanna handle both errors,

115
00:06:14,340 --> 00:06:17,470
because both things could go wrong.

116
00:06:17,470 --> 00:06:18,430
And therefore, of course,

117
00:06:18,430 --> 00:06:21,570
you don't just wanna handle them here for sending a post,

118
00:06:21,570 --> 00:06:24,350
but also for fetching comments.

119
00:06:24,350 --> 00:06:28,620
Here you also want to check if you got a response

120
00:06:28,620 --> 00:06:31,120
before you continue with parsing it

121
00:06:31,120 --> 00:06:33,950
and outputting something on the page.

122
00:06:33,950 --> 00:06:38,850
So here we could check if response.ok is false

123
00:06:38,850 --> 00:06:41,460
by adding an exclamation mark in front of it,

124
00:06:41,460 --> 00:06:42,510
and if that's the case,

125
00:06:42,510 --> 00:06:44,860
I'll return so that the other code

126
00:06:44,860 --> 00:06:47,980
won't even execute in this case

127
00:06:47,980 --> 00:06:49,997
and also show an alert where I say,

128
00:06:49,997 --> 00:06:54,083
"Fetching comments failed!" like this.

129
00:06:56,070 --> 00:06:57,760
So with this block added,

130
00:06:57,760 --> 00:06:59,660
we ensure that we don't continue

131
00:06:59,660 --> 00:07:01,120
and we show this error

132
00:07:01,120 --> 00:07:03,493
if something goes wrong on the server.

133
00:07:04,700 --> 00:07:08,380
Still, we might also wanna handle technical errors.

134
00:07:08,380 --> 00:07:11,993
And for this, we can wrap this all into a try block.

135
00:07:13,350 --> 00:07:17,090
So take all that code and move that into try

136
00:07:18,480 --> 00:07:23,250
and then just catch any technical errors that might occur

137
00:07:23,250 --> 00:07:28,250
and say "Getting comments failed!"

138
00:07:28,410 --> 00:07:29,820
or anything like that.

139
00:07:32,772 --> 00:07:35,610
Now here, we could again simulate that this fails,

140
00:07:35,610 --> 00:07:38,410
but I did already do that for sending comments,

141
00:07:38,410 --> 00:07:40,270
so I'll not do it again here.

142
00:07:40,270 --> 00:07:43,400
But still, you might wanna keep that in mind,

143
00:07:43,400 --> 00:07:46,190
and you might wanna add error handling like this

144
00:07:46,190 --> 00:07:49,900
for server-side errors and for technical errors

145
00:07:49,900 --> 00:07:52,950
when you are working with Ajax requests,

146
00:07:52,950 --> 00:07:56,740
because that allows you to provide a better user experience

147
00:07:56,740 --> 00:07:58,413
when things go wrong.