Original subtitles

1 1

Let's now implement, 2

2

real world error handling in our application, 3

3

instead of, always simply logging errors to the console. 4

4

And again, the error that we're gonna work with, 5

5

is basically using a false ID, 6

6

that cannot be found on the server. 7

7

So indeed, we get our error message, invalid ID, 8

8

and then the ID itself, plus the status code. 9

9

Now, the real world way of handling an error like this, 10

10

is to actually display some message here 11

11

in the user interface, 12

12

so that the user can actually know what's going on. 13

13

So basically, handling the error will mean, 14

14

to display an error message here in the view. 15

15

So, right now we are handling the error, 16

16

actually in the model, right. 17

17

So, remember how I said, 18

18

that for now, handling the error 19

19

is simply logging it here with these small emoji here. 20

20

And so again, that's basically 21

21

our current error handling strategy. 22

22

However, it is not correct. 23

23

And also, it doesn't happen in the correct place. 24

24

Because if we want to display something into view, 25

25

then of course, that code should also be in the view 26

26

and not in the model. 27

27

So, let's go back to our code and to our view, 28

28

and implement a new method here, 29

29

which is going to be responsible 30

30

for displaying that error message. 31

31

And actually, the HTML code is already here. 32

32

In this like template. 33

33

So, it's gonna be this class here, 34

34

or this element with the class of error. 35

35

So let's copy this. 36

36

Go to the view, 37

37

and then, let's put it here after this spinner. 38

38

So render error, 39

39

(keyboard typing) 40

40

maintain like this. 41

41

And for some reason, here, I, 42

42

I declared like a normal function. 43

43

Which doesn't make a lot of sense. 44

44

And now, let's create a new markup variable. 45

45

As always, when we create, 46

46

well, some new markup, 47

47

which is exactly what we're doing here. 48

48

Then here, remember, we need to replace this 49

49

with the icons variable. 50

50

And then here, of course, 51

51

we want to have like some custom message. 52

52

So we don't simply want this hard coded message. 53

53

But instead, we want to be able to pass a message, 54

54

into this method. 55

55

So, that's going to be message like this. 56

56

And so let's add a parameter here for that. 57

57

Now, okay. 58

58

And then here, let's clear the parent element. 59

59

So, like this. 60

60

And actually, we should do the same here. 61

61

So, this.clear is a lot nicer 62

62

than having to write all of this. 63

63

And so we abstracted all that away into this method. 64

64

And now we can basically simply get this code, 65

65

because it's going to be the same. Right. 66

66

The variable here is still called markup. 67

67

And, we still want to basically insert this HTML, 68

68

into the parent element. 69

69

So that's, again, this element with the recipe class. 70

70

Okay. 71

71

And so that's actually it, here for the view, at least. 72

72

Okay. 73

73

So let's now go to the model. 74

74

Because remember that right now, 75

75

we are actually handling the error right here, like this. 76

76

But again, that's not what we want. 77

77

So, we want a way of getting this error into the view. 78

78

Now these two are only connected by the controller. 79

79

And so, of course, it is going to be the controller 80

80

who will call recipe view. Right. 81

81

So, let's do that actually. 82

82

So, that's going to be right here in the catch block, 83

83

of the control recipes controller. 84

84

So, recipeView.renderError 85

85

and then some message. 86

86

But what is this message going to look like? 87

87

Or in other words, where are we going to get it from? 88

88

Because now we have the same problem as before. 89

89

So remember, here in the helpers function, 90

90

whenever we got this error, 91

91

then that error was not automatically propagated 92

92

down to this async function, 93

93

which was actually calling the getJSON function. 94

94

And so therefore, we had to re-throw the error here. 95

95

So, basically to mark this whole promise here, as rejected, 96

96

so that then here, we would get into this catch block. 97

97

But now, we're here again, we have the same problem. 98

98

Because now if we get an error here, 99

99

then this promise, 100

100

so this whole load recipe promise, 101

101

will also not get rejected. 102

102

And so therefore, here, we will never enter the catch block 103

103

in this function. 104

104

So, it's a bit confusing, like the flow of the error 105

105

and how we need to propagate it down. 106

106

But essentially, 107

107

we will have to do the same thing as before. 108

108

Which is to throw the error here again. 109

109

And so with this, we will then have access 110

110

to the exact same error object, as we have here. 111

111

And otherwise, we wouldn't. 112

112

So now we can use the same thing here. 113

113

Let's actually get rid of this console.log. 114

114

And so, now here our error handling 115

115

is basically finally complete. 116

116

So, instead of simply logging it to the console, 117

117

we now have a way of rendering it to the user interface. 118

118

And we will be able to access the exact same error 119

119

that we also got access to, here, 120

120

in the load recipe function. 121

121

Okay. 122

122

So, let's try this. 123

123

And indeed, here, we get the error message. 124

124

And it is exactly the same one that is locked down here, 125

125

from the model. Okay. 126

126

However, this is actually not really that useful. 127

127

So, well, this error is not really meaningful 128

128

for anyone using this application. 129

129

And so actually, this is not the message that we want. 130

130

So, let's create a more meaningful message. 131

131

So, something like, we couldn't find that recipe. 132

132

Now, do you think that we should pass in that message here? 133

133

So basically specifying, 134

134

we couldn't or we could not find that recipe. 135

135

Please, try another one. 136

136

So, again, do you think that this is the correct place 137

137

of specifying this message, 138

138

which will get eventually rendered to the view? 139

139

Well, actually, I think that it is not. 140

140

So, I think that this error message, 141

141

should basically be an intrinsic property 142

142

of the view itself. 143

143

So basically, I'm going to cut this from here now. 144

144

And now into view, 145

145

I will add just another private field. 146

146

So, it's going to be called error message. 147

147

And then the message itself. 148

148

And so now, basically, the view itself, 149

149

already knows the message that it wants to display. Okay. 150

150

And then here, in render error, 151

151

we will actually keep the ability of passing in a message. 152

152

But, if no message is passed in, 153

153

then we will simply set a default. 154

154

And so, that default is going to be the error message 155

155

that we just specified. 156

156

Okay. 157

157

So here, we don't pass anything now. 158

158

And so by doing this, 159

159

we are back to having no code that is regarded to the view, 160

160

here in our controller. All right. 161

161

And so instead, the error message 162

162

is then by default, set to the message. 163

163

Or actually the other way round. 164

164

So, the message argument is gonna be set by default, 165

165

to this error message that we set for this entire object. 166

166

So, I think that is the best solution, 167

167

which makes the most sense. 168

168

And so indeed, here, we now get exactly that message. 169

169

And so with this, we now have a very robust 170

170

and very nice error handling strategy, 171

171

that we will then be able to use for other errors 172

172

also in the future. 173

173

So for example, when there are no search results 174

174

for some search term. Okay. 175

175

Now, since we did an error message here, 176

176

let's very quickly also implement a method here 177

177

for success messages even though we don't need it yet. 178

178

But it's still good, 179

179

to already prepare for that in the future. 180

180

And so, since we are working on messages here, 181

181

let's do that right away. 182

182

So, let's call this one simply render message. 183

183

And this one here will have a different class. 184

184

Think it should also be be somewhere here. 185

185

And actually, it's this default. 186

186

So, this is actually the one that we will use. 187

187

So, it has the class of message. 188

188

But then the rest of the code is actually the same. 189

189

So, message, 190

190

and actually not the same. 191

191

So the icon is also different. 192

192

So here it's icon, smile. 193

193

So instead of the alert, it is a smile. 194

194

And then here, we will want some kind of message again. 195

195

And so here, let's now create, 196

196

simply get another field called message. 197

197

Could also call it like success message. 198

198

But let's leave it like this. 199

199

And for now, we don't have any success message. 200

200

Because again, we're not actually going to use this for now. 201

201

Message and then the rest should essentially be the same. 202

202

And then in the future, of course, 203

203

we will be able to use the success message 204

204

in some different places in our application. 205

205

All right, and that's actually it. 206

206

Let's put it back to some normal URL. 207

207

We can just click here. 208

208

And then of course, everything is back to working. Great. 209

209

And with this, we are actually finally ready 210

210

to implement now the searching functionality, 211

211

starting in the next lecture.