Original subtitles

1 1

In this lecture, we're gonna learn how error handling 2

2

works with a sinc/await. 3

3

So with a sinc/await, we can't use the catch method 4

4

that we use before, because we can really 5

5

attach it anywhere, right. 6

6

So instead, we use something called a try catch statement. 7

7

And the try catch statement is actually used 8

8

in regular JavaScript as well. 9

9

So it's been in the language probably since the beginning. 10

10

So try catch has nothing to do with a sinc/await. 11

11

But we can still use it to catch errors in async functions. 12

12

But before we do that, let's look at a more simple example, 13

13

just to see how try catch works. 14

14

So we can basically wrap all our code in a try block. 15

15

And so JavaScript will then 16

16

basically try to execute this code. 17

17

So just as normal code, so let's just create 18

18

a variable here, set it to one, create another one. 19

19

So this one is a constant. 20

20

And now my goal was to reassign y, but I will accidentally, 21

21

let's say reassign x. 22

22

And so that should then give us an error. 23

23

Because of course, that is not legal. 24

24

So we can reassign a constant. 25

25

And so for now, if we reload at this point, 26

26

first, we get this error, 27

27

that we are missing the catch block. 28

28

So let's actually first do this here without any block. 29

29

And so here, of course, we get the error assignment 30

30

to constant variable. Right. 31

31

But let's go back. And so now here, 32

32

we can add the catch block. 33

33

So we have a catch block, and this catch block 34

34

will have access to whatever error 35

35

occurred here in the try block. 36

36

And so now we can do something with this error. 37

37

So let's say we simply want to alert the error, 38

38

or just the error message. 39

39

So as we know, any error has the message property. 40

40

And so we can simply alert that one. So let's see. 41

41

And indeed, now we get an assignment 42

42

to constant variable here in this alert. 43

43

And you see that the error now no longer 44

44

appears down here in the console. 45

45

So the script does no longer die in this case. 46

46

And instead, we can simply catch the error right here, 47

47

and then handle it accordingly. Now, okay. 48

48

And of course, if there is no error at all, 49

49

so if I was assigning y correctly, 50

50

then we would get no error. 51

51

Well, at least not coming from the try catch block. 52

52

So now we're good. 53

53

But anyway, this year is just a stupid syntax error. 54

54

And of course, we're not going to use try catch 55

55

to find mistakes that we make in our code. 56

56

And so let's know use try catch for something more useful, 57

57

which is to actually handle real errors in async functions. 58

58

Okay. So just like in the small example that we saw, 59

59

let's wrap our entire code of this function 60

60

into a try block. All right, 61

61

so curly braces, and then try like this. 62

62

All right, and then down here after that, 63

63

the catch block, which remember, has access 64

64

to whatever error occurs in the try block. 65

65

And so here in this catch block, 66

66

we can now handle any errors, 67

67

just like we did before in the catch method. 68

68

So let's log the error to the console. 69

69

Give it a safe year, just to format it a little bit better. 70

70

Now, right, and so you see that 71

71

the code still works the same. 72

72

But that's because we didn't cause any error yet. 73

73

But let's also now log the error message. 74

74

But let's now also render the error. 75

75

And so instead of going search that, 76

76

I will simply write some new error message. 77

77

So if something went wrong, then we had this emoji here. 78

78

And then again, the error dot message. 79

79

Okay, and so now let's try again, 80

80

to force an error here by reloading really fast. 81

81

Maybe the easiest way is to simply 82

82

call this function multiple times. 83

83

And now, and now you see, we get some nice errors here. 84

84

Well, they're not really so nice. 85

85

So let's see where they actually start. 86

86

Well, for some reason, 87

87

everything looks the same as before. 88

88

And that's, of course, secrets render error, 89

89

until it actually also add an emoji, 90

90

just so we can see that it's our own error, 91

91

or basically, that we are logging the error ourselves. 92

92

Okay. 93

93

So let's do this. Ah, here we go. 94

94

Whoa. So we get a lot of different errors here. 95

95

So that's a couple of times. 96

96

And so the reason for that is that we are calling 97

97

this function here multiple times, 98

98

and therefore we get multiple errors. 99

99

But the error that gets logged here to the console, 100

100

remember is the one that is coming because of this 404 error 101

101

that the country cannot be found. Okay. 102

102

So at this point, we do have some error handling. 103

103

So we are able to add the error here to the user interface. 104

104

But just like before, this error is not really meaningful, 105

105

because the fetch promise does not reject on a 404 error, 106

106

or on a 403 error, which was actually the original error, 107

107

which caused everything here to collapse. Right? 108

108

So again, the four three is because 109

109

we are doing too many requests to the reverse geocoding API. 110

110

But the solution is simple, 111

111

because it's exactly the same as before. 112

112

So all we have to do is to manually create an error. 113

113

And so that error will then be caught 114

114

here in the catch block. Right? 115

115

So let's do that. So right here. So basically, 116

116

immediately after this fetch, 117

117

and so just like before, 118

118

we can test for the okay property, remember. 119

119

So I'm not going to show that again here, 120

120

because we already saw it before. 121

121

So this response here will have the okay property. 122

122

And if dad is not set to true, well, 123

123

then we want to throw a new error. 124

124

So that's problem getting, let's see location, data. 125

125

Okay. And so this one basically handles 126

126

any error in this fetch. 127

127

And so now the same here. 128

128

So let's say that we come back with a real weird country, 129

129

from this fetch. 130

130

Now to then the second API 131

131

cannot find any country for that name. 132

132

And so here, let's just say problem getting country. 133

133

Now, for this first promise here, this one, 134

134

we do not need to throw an error manually, 135

135

because in the case that something goes wrong 136

136

with the geolocation, we already built our promise 137

137

so that it automatically rejects in that case. 138

138

And so in this case, we will then immediately get an error, 139

139

which will get caught in the catch block. 140

140

But as we already know, the same is not true 141

141

for the promise coming from fetch. 142

142

So that promise only gets rejected 143

143

when the user has no internet connection. 144

144

But in case of a four, three error, or a 404 error, 145

145

the fetch promise does not reject. 146

146

And so again, we do that manually, right here, 147

147

and also right here. 148

148

And so here, we already see that it worked. 149

149

So here, indeed, we got something went wrong 150

150

problem getting a location, and then again, 151

151

here, the same error. 152

152

So here, maybe we don't want all of this error message. 153

153

Let's just take this one out. 154

154

So that we just have the emoji, 155

155

and then the error message itself. 156

156

So the one that we defined here, and here. 157

157

All right. 158

158

So let's see if this triggers an error. 159

159

And yeah, for one of them, we now 160

160

have problem getting location data. 161

161

So an error triggered by this one. All right. 162

162

So that is the complete version now of this async function, 163

163

complete with a pretty robust error handling strategy. 164

164

So again, please never ignore handling errors, 165

165

especially when it comes to asynchronous code 166

166

like this one, because here, 167

167

there is always a lot of stuff that can go wrong. 168

168

And so our application needs to be ready to handle that. 169

169

Now, right? But with that being said, 170

170

in the next lecture, we're going to dive even deeper 171

171

into how async functions really work. 172

172

And so let's go there right away.