Original subtitles

1 1

So until now, 2

2

we have always assumed that everything went well 3

3

with our AJAX calls, so we never handled any errors. 4

4

However, an important part of web development 5

5

is to actually handle the errors 6

6

because it's very common that errors happen 7

7

in web applications. 8

8

And so in this lecture, 9

9

let's talk about how to handle errors 10

10

in promises. 11

11

And to start, remember that a promise 12

12

in which an error happens is a rejected promise. 13

13

And so in this video, 14

14

we're gonna learn how to handle promise rejections. 15

15

Now, actually the only way 16

16

in which the fetch promise rejects 17

17

is when the user loses his internet connection. 18

18

And so for now, that's gonna be the only error 19

19

that we will handle here. 20

20

Now to simulate losing the internet connection 21

21

we can go here to Network 22

22

and then we can basically change the speed here to Offline. 23

23

However, when we then reload the page 24

24

then basically everything will disappear, 25

25

and so that's not really what we want. 26

26

We want to simulate that the page was first still loaded 27

27

but then as the user does the request without internet 28

28

then we want to see the error happening. 29

29

And so let's set it back to Online 30

30

and so now what we want to do 31

31

is to basically only call this function here 32

32

whenever the user clicks on a button. 33

33

And so that will then make it easier for us 34

34

to simulate losing the internet connection. 35

35

So here in the HTML we already have a button, 36

36

so let's comment this one out 37

37

and then in the script I believe, here, 38

38

so we already have it here selected as this btn. 39

39

And so all we will do now is btn.addEventListener 40

40

click, and then here function 41

41

and just like this. 42

42

Now wait, so just to see what happens here 43

43

so indeed that works just fine 44

44

but now watch what happens when we set ourselves Offline. 45

45

Let's go back to the console and now when we do the request, 46

46

then we get these errors here. 47

47

So first this one here, but the one that's most important 48

48

is that we now have an Uncaught promise, 49

49

and so because we have failed to fetch. 50

50

And so at this point for the first time 51

51

the promise that's returned from the fetch function 52

52

was actually rejected. 53

53

And so let's no handle that rejection. 54

54

Now there are two ways of handling rejections 55

55

and the first one is to pass a second callback function 56

56

into the then method. 57

57

So the first callback function here 58

58

is always gonna be called for the fulfilled promise. 59

59

so for a successful one. 60

60

But we can also pass in a second callback 61

61

which will be called when the promise was rejected. 62

62

So let's do that. 63

63

And this callback function will be called with an argument 64

64

which is basically the error itself. 65

65

And so let's simply alert the error. 66

66

Alright, so let's try that. 67

67

And now we are back to having No Internet 68

68

so we first need to do everything normally, 69

69

so load the page. 70

70

Now we lose the connection and now we do the request. 71

71

And so now actually we handled the error 72

72

by displaying this alert window. 73

73

And the error that we saw previously down here is now gone. 74

74

So now, in fact, we no longer 75

75

have this Uncaught error down here 76

76

because we did actually catch the error right here. 77

77

So handling the error is also called catching to error, 78

78

and so again, that's the reason why 79

79

this error that we had here before disappeared. 80

80

So it said Uncaught error, but again 81

81

now we are actually catching it here. 82

82

And so with this we are now handling the error 83

83

that might occur in this promise here, okay. 84

84

Now, in this case there are then no more errors 85

85

because basically the chain stops here 86

86

when this error happens and when it's handled right here. 87

87

But now what if there was actually no error 88

88

in this fetch promise here? 89

89

So basically what if this fetch promise 90

90

was actually fulfilled but then the second one here 91

91

was rejected. 92

92

Well then we would also have to catch an error here. 93

93

So we would have to come here 94

94

get this function and paste it here 95

95

and also handle the error right here. 96

96

However, that is a little bit annoying 97

97

and so in fact there is a better way 98

98

of basically handling all these errors globally 99

99

just in one central place. 100

100

So instead of all of these callback functions here 101

101

let's just delete them. 102

102

okay. So this is a lot nicer 103

103

just having one callback in the then 104

104

and then instead we can handle all the errors 105

105

no matter where they appear in the chain 106

106

right at the end of the chain by adding a catch method. 107

107

And then here we can actually use 108

108

the same call back function 109

109

because the callback function here 110

110

will also be called with the error object that occurred 111

111

and so then we can handle it in some way. 112

112

All right, so again this catch method here 113

113

at the end of the chain will basically catch any errors 114

114

that occur in any place in this whole promise chain 115

115

and no matter where that is. 116

116

So errors basically propagate down the chain 117

117

until they are caught, 118

118

and only if they're not caught anywhere 119

119

then we get that Uncaught error 120

120

that we saw right in the beginning. 121

121

All right, so let's now try this again 122

122

and we will have to put back the internet, reload the page, 123

123

get back Offline. 124

124

And indeed we get the same error now here, 125

125

so the same alert window that we had before. 126

126

Now instead of having that annoying alert window 127

127

let's just lock the error to the console 128

128

and create some string here. 129

129

So error, and then let's just add some emojis 130

130

so that we know exactly which 131

131

errors were printed by ourselves. 132

132

Well, lets add a couple of them here. 133

133

And in fact, we can actually also style this one 134

134

with console.error. 135

135

Remember, I think I showed you this one 136

136

at some point in the beginning of the course. 137

137

But anyway, usually simply logging the error to the console 138

138

is not enough in a real application 139

139

with a real user interface. 140

140

And so instead of just logging something to the console 141

141

let's also display an error message for the user to see. 142

142

And so that's then a more real use case of this catch block. 143

143

All right, so I'm adding a new block here 144

144

so we still want to of course lock the error to the console 145

145

but besides that let's actually now create a function 146

146

that will also render some kind of error, okay. 147

147

So let's do that outside here 148

148

and I'm calling it renderError. 149

149

So this is a function and it can take in a message 150

150

just call it like this. 151

151

And just like the country elements 152

152

we want to attach this to countriesContainer 153

153

and then insert.adjacent. 154

154

And this time not HTML but insertAdjacent text. 155

155

So this is a new one but basically it does the same thing 156

156

as insertAdjacent HTML but simply with text, 157

157

so it doesn't create any new HTML elements. 158

158

Okay. And then besides that 159

159

remember we always have set the opacity back to one. 160

160

So just as we did before in the render countries function, 161

161

because otherwise this container 162

162

is not even gonna be visible. 163

163

And actually let's put this function 164

164

right at the very top of the file 165

165

together with the render country function. 166

166

So just like this. 167

167

Okay, so again in both cases 168

168

in order to actually see the container 169

169

we set the opacity to one. 170

170

Okay. And so now here let's use that 171

171

render, so not country of course Error, 172

172

let's say something went wrong. 173

173

Then here we can use our emoji again, why not? 174

174

And then here let's again print the error 175

175

and actually this error that is generated here 176

176

is a real JavaScript object. 177

177

So we can create errors in JavaScript with a constructor, 178

178

for example, just like a map or a set. 179

179

And any error in JavaScript that was created like this 180

180

contains the message property. 181

181

So we can use that here 182

182

to basically only print the message of that error 183

183

and not the whole object itself. 184

184

And we will actually learn more about 185

185

the built in error object of JavaScript in the next video. 186

186

Now to try this we need to again, get ourselves Online 187

187

then Offline, check the console. 188

188

And indeed we get our custom error down here 189

189

visible by the emojis 190

190

and then our own message here for the user. 191

191

Now it's not super pretty but that's not the point here 192

192

and as you see indeed this here 193

193

is simply the error.msg. 194

194

While down here we have the entire error. 195

195

So that includes the TypeError 196

196

and even it includes this so-called stack trace 197

197

so it shows us exactly where the error comes from. 198

198

All right, and so that's how we handle errors 199

199

happening in promises in any then handler. 200

200

So basically handling any promise rejection 201

201

no matter where it happens in the chain. 202

202

Now just to finish there is one more quick method 203

203

that I want to show you 204

204

and that is also available on all promises. 205

205

So besides then and catch there is also the finally method. 206

206

So let's add a finally here, finally. 207

207

And then the callback function that we defined here 208

208

will always be called whatever happens with the promise. 209

209

So no matter if the promise is fulfilled or rejected 210

210

this callback function that we define here 211

211

is gonna be called always. 212

212

So that's the difference between the other two 213

213

so the then method is only called 214

214

when the promise is fulfilled while this one is only called 215

215

while the promise is rejected. 216

216

Now the finally method is not always useful, 217

217

but sometimes it actually is. 218

218

So we use this method 219

219

for something that always needs to happen 220

220

no matter the result of the promise. 221

221

And one good example of that is to hide a loading spinner 222

222

like these rotating circles that you see everywhere 223

223

in web applications when you load some data. 224

224

So these applications show a spinner 225

225

when an asynchronous operation starts 226

226

and then hide it once the operation completes. 227

227

And that happens no matter 228

228

if the operation was successfully or not. 229

229

And so for that to finally method is perfect. 230

230

And in our case, what we always need to do 231

231

is to fade-in the container. 232

232

So, basically this part here 233

233

always happens no matter what, right? 234

234

So no matter if we render the country 235

235

in the case of success 236

236

or if we render the error in case of an error, 237

237

no matter what we always need to do this. 238

238

And so let's take this out of here, 239

239

so I'm copying it here 240

240

and deactivating this in both cases 241

241

and then let's put it here into the finally handler, okay. 242

242

And now we no longer need the Offline 243

243

so let's just reload, put it here 244

244

and yeah that works beautifully. 245

245

Just notice that this actually works because catch itself 246

246

also returns a promise. 247

247

So that's the only way why this here can work 248

248

so of course this only works on promises. 249

249

And so, yeah, again, this can only work 250

250

if catch itself also returns a promise. 251

251

All right, now let's try to simulate another error 252

252

so that I can show you what we need to do next. 253

253

So let's say that we're trying to search for a country 254

254

that simply doesn't exist. 255

255

And so, or API is not gonna find any result for that. 256

256

Let's say just this, so let's see. 257

257

And well we get to this weird error 258

258

that we Cannot read property flag of undefined in line 152. 259

259

Now, so basically it's coming from this place 260

260

but of course then in stack trace 261

261

we can see where exactly it's coming from, 262

262

so it's coming from getCountryData. 263

263

Well, in this case it's not that helpful 264

264

but sometimes inspecting this stack trace 265

265

can be helpful indeed. 266

266

So anyway, this error here is weird 267

267

and it doesn't really reflect the true error 268

268

which is simply that our API 269

269

cannot find any country with this name. 270

270

So the true error is of course not 271

271

that we Cannot read flag of undefined 272

272

but in fact it is that our API cannot find any country. 273

273

And so that's reflected here with the status code 404. 274

274

However, as I said in the beginning 275

275

the fetch promise only rejects 276

276

when there is no internet connection, 277

277

but with a 404 error like this which is not a real error 278

278

but well it kind of is. 279

279

But anyway with this 404 the fetch promise 280

280

will still get fulfilled. 281

281

So there is no rejection and so our catch handler 282

282

cannot pick up on this error. 283

283

It does pick up on this other error so in this one here, 284

284

but that's not the one that we actually want to handle. 285

285

In this case we really want to tell the user 286

286

that no country was found with this name. 287

287

And so that is what we will do in the next lecture, 288

288

so that this one doesn't become all too long.