1
00:00:02,160 --> 00:00:08,670
Thus far we always assumed that everything works but in reality, of course you'll also have HttpRequests

2
00:00:08,730 --> 00:00:13,310
that fail and handling such errors is always important.

3
00:00:13,320 --> 00:00:19,500
Now HttpRequests can fail for many reasons, because the internet connection is bad, because the server

4
00:00:19,500 --> 00:00:22,320
is down, because you send invalid data,

5
00:00:22,320 --> 00:00:29,340
there are many ways HttpRequests can fail. Now to be informed about a failing request,

6
00:00:29,340 --> 00:00:36,450
we have to add another listener to our XMLHttpRequest object and that's the onError listener

7
00:00:36,510 --> 00:00:43,450
or handler. This will trigger whenever we have an error when we send a HttpRequest.

8
00:00:43,450 --> 00:00:49,440
Now let's see what we get here and for that, let's console log xhr.response in the error

9
00:00:49,440 --> 00:00:54,730
case and let's also console log something else and that's the xhr.status,

10
00:00:54,750 --> 00:01:00,340
this gives us the status code we got back. Now to simulate an error,

11
00:01:00,480 --> 00:01:08,850
we can for example go to our get request and send this to an invalid URL by basically cutting off

12
00:01:08,850 --> 00:01:14,570
the ts of the path and therefore we have a path which is not supported by the server.

13
00:01:14,850 --> 00:01:21,600
If we do so and we now reload, let's open the console here and now click fetch posts and you see, here

14
00:01:21,600 --> 00:01:22,980
I'm getting an error,

15
00:01:23,040 --> 00:01:33,440
this is getting logged from line 25 of my script, so from the send request in the end, not from line 21

16
00:01:33,570 --> 00:01:34,800
or something like that

17
00:01:35,040 --> 00:01:39,080
and here we also got another error from line 37,

18
00:01:39,090 --> 00:01:42,890
that's just indicating that we failed to loop through all the posts.

19
00:01:43,230 --> 00:01:46,000
If we have a look at the network tab, we also see there

20
00:01:46,020 --> 00:01:55,080
we got a 404 response back, what we don't see is our error handler doing its job here though and that's

21
00:01:55,080 --> 00:02:03,540
indeed important to understand. The error handler here does not kick in for HttpRequests that are technically

22
00:02:03,540 --> 00:02:10,410
successful where we just have a server side error, so where we just get back a non-200 status code.

23
00:02:10,410 --> 00:02:16,070
This error function instead will kick in if you for example have a network error,

24
00:02:16,200 --> 00:02:22,130
so if the request fails to be sent or does time out or anything like that.

25
00:02:22,290 --> 00:02:29,220
If you have a request that leaves your page successfully and you get back a response, even if that response

26
00:02:29,250 --> 00:02:35,820
indicates that something is wrong on the server side, for example that the path wasn't found there, then

27
00:02:35,850 --> 00:02:42,480
you're not making it into onError but instead to onLoad because technically, you have a correct request

28
00:02:42,480 --> 00:02:43,720
and response.

29
00:02:43,800 --> 00:02:55,050
So what you should do is you should check if xhr.status, if that is let's say greater or equal than

30
00:02:55,050 --> 00:03:03,660
200 and at the same time smaller than 300 which indicates a success case,

31
00:03:03,680 --> 00:03:12,020
in this case I want to resolve, else in the other cases, I know something went wrong and then we can reject

32
00:03:12,020 --> 00:03:12,630
this

33
00:03:12,800 --> 00:03:21,980
and for example reject with a new error object here where we say something went wrong, like that.

34
00:03:23,570 --> 00:03:30,680
Here in the onError handler, I of course also want to do that, I want to reject with a new error, failed

35
00:03:30,680 --> 00:03:36,020
to send request but this will simply happen at a different time, this will happen if we technically fail

36
00:03:36,020 --> 00:03:37,900
to send a request.

37
00:03:37,940 --> 00:03:44,150
Now we have proper handling for server side errors as well, by checking the status code here in onLoad

38
00:03:44,150 --> 00:03:48,260
and therefore now if we try this again and we click fetch posts,

39
00:03:48,260 --> 00:03:52,510
now you see something went wrong which is my own custom error message

40
00:03:52,730 --> 00:03:58,730
and now we can of course use the normal ways of handling this on promises, with catch blocks or when

41
00:03:58,730 --> 00:04:05,510
using async await, with the help of try catch to make sure we don't continue if we have a problematic

42
00:04:06,170 --> 00:04:06,890
promise here.

43
00:04:07,250 --> 00:04:14,730
So here, we could then wrap this all into try and catch and error here

44
00:04:16,170 --> 00:04:20,670
and then maybe show the error message to the user

45
00:04:21,300 --> 00:04:26,060
and now with that, we would properly handle that error, if I click fetch posts,

46
00:04:26,160 --> 00:04:30,630
now we just get that error message here instead of that broken script.

47
00:04:30,630 --> 00:04:37,850
The key takeaway here really is that you don't make it into onError because the server reports back

48
00:04:37,860 --> 00:04:44,760
a non-success status code but that you instead stay in onLoad if that happens and you only make it

49
00:04:44,760 --> 00:04:45,950
into onError

50
00:04:46,050 --> 00:04:48,260
if the request fails for different reasons,

51
00:04:48,270 --> 00:04:52,680
if you have no Internet connection for example, then this would trigger,

52
00:04:52,680 --> 00:04:55,930
otherwise you reach onLoad and therefore in onLoad,

53
00:04:55,950 --> 00:05:01,020
you should also handle non-success status codes as we're doing it here.