1
00:00:01,450 --> 00:00:06,520
Everything is working, but we still have a lot to improve, so firstly I want to do is go back over

2
00:00:06,520 --> 00:00:10,840
to the browser and show you one or two things that perhaps is not quite working as expected.

3
00:00:11,480 --> 00:00:12,670
Again, going to open up my console.

4
00:00:14,310 --> 00:00:20,640
I'm then going to once again add in some code here that will definitely transpire correctly and bundled

5
00:00:20,640 --> 00:00:23,490
correctly, but throw an error while it is being executed.

6
00:00:23,970 --> 00:00:28,830
I'm going to put in console, dot whatever we've seen and air around this stuff before.

7
00:00:28,830 --> 00:00:34,470
We should see some kind of error message that says L'Aquila blow whatever is not a function that will

8
00:00:34,470 --> 00:00:36,510
be the result or the air that comes out of this.

9
00:00:37,110 --> 00:00:37,770
I'm going to submit.

10
00:00:38,250 --> 00:00:40,310
We definitely bundle and transpired correctly.

11
00:00:40,320 --> 00:00:45,520
We passed that code down into the iFrame, but, well, we don't see anything inside the iFrame.

12
00:00:45,960 --> 00:00:49,050
Instead, we get an error thrown at our console and error thrown.

13
00:00:49,060 --> 00:00:51,270
Being thrown at our console is totally fine.

14
00:00:51,270 --> 00:00:56,580
But remember, a user who is making use of our book application might not always have their console

15
00:00:56,580 --> 00:00:57,030
open.

16
00:00:57,520 --> 00:01:01,950
So if you write out this code, click submit and saw nothing happen, you would probably think this

17
00:01:01,950 --> 00:01:06,510
is a bad application I'm using right now without any thought that, hey, maybe there's a problem with

18
00:01:06,510 --> 00:01:07,200
your code.

19
00:01:07,720 --> 00:01:12,810
So the first improvement I want to make is to make sure that whenever we eval a user's code, if something

20
00:01:12,810 --> 00:01:18,660
goes wrong with it to the best of our ability, I want to try to capture that error and display some

21
00:01:18,660 --> 00:01:24,360
message inside the iFrame telling the user, hey, sorry about your code is not quite working as expected.

22
00:01:24,990 --> 00:01:27,540
So let's try that out back inside my editor.

23
00:01:29,090 --> 00:01:34,010
I'm going to find where we are currently evading the users code, and I'm going to again wrap that with

24
00:01:34,010 --> 00:01:35,210
a try catch.

25
00:01:36,440 --> 00:01:42,320
Now, remember, as we saw a little bit ago, a try catch is not necessarily going to handle asynchronous

26
00:01:42,320 --> 00:01:42,670
errors.

27
00:01:42,950 --> 00:01:47,360
So if we ever have a set time out or something like that inside the code that we are executing, that

28
00:01:47,360 --> 00:01:49,460
is going to throw an error at some future point in time.

29
00:01:49,790 --> 00:01:51,410
This trick catch is not going to handle that.

30
00:01:51,650 --> 00:01:53,900
But this is at least a good place to get started.

31
00:01:54,260 --> 00:01:57,740
After we had in the tri catch and get this working, we can start to think about some other things we

32
00:01:57,740 --> 00:01:59,150
might do to improve this.

33
00:02:00,280 --> 00:02:01,180
OK, so.

34
00:02:02,350 --> 00:02:07,240
When we catch this air, we're going to take that air, we're going to generate some kind of text message

35
00:02:07,600 --> 00:02:11,230
and we could just insert that air message directly into that div right there.

36
00:02:11,800 --> 00:02:16,090
If an error occurs, whenever a users code is being executed, nothing is going to be rendered into

37
00:02:16,090 --> 00:02:16,390
there.

38
00:02:16,450 --> 00:02:20,650
So in other words, if a user is trying to make use of this device to render a react component, we're

39
00:02:20,650 --> 00:02:25,100
just going to pretty much overwrite that component that they tried to put in there with this error message.

40
00:02:25,120 --> 00:02:25,930
Totally fine if we do.

41
00:02:27,010 --> 00:02:30,800
So I'm going to first begin by just getting a reference to that element inside the couch.

42
00:02:31,430 --> 00:02:33,700
They'll do a concert route is document.

43
00:02:34,880 --> 00:02:35,950
Where he selecter.

44
00:02:39,950 --> 00:02:44,780
Then I'll do a route dot inner HTML, so I'm going to forcibly write some HTML inside their.

45
00:02:46,400 --> 00:02:48,740
In a place inside a div.

46
00:02:50,440 --> 00:02:55,150
That contains whatever er just occurred, we'll just put in.

47
00:02:56,040 --> 00:02:58,740
Er, like, so oops, I want to do.

48
00:02:59,740 --> 00:03:01,630
Plus er er we go.

49
00:03:04,270 --> 00:03:08,890
The notice that we have d'Hiv as a string plus air plus closing div.

50
00:03:10,960 --> 00:03:12,820
Let's save this and do another test.

51
00:03:14,770 --> 00:03:20,950
Now, if I do console, dot, whatever and submit, we get a nice air being printed inside there, so

52
00:03:20,950 --> 00:03:24,010
that's pretty much the sign to the user of, hey, there's something wrong with your code.

53
00:03:25,190 --> 00:03:30,080
Right now, however, showing this as plane kind of black text, not quite so great, maybe we could

54
00:03:30,080 --> 00:03:33,850
add in some additional formatting just to make sure it's super clear that something went wrong.

55
00:03:34,610 --> 00:03:36,710
So for that, I'm going to go back over.

56
00:03:36,710 --> 00:03:37,670
I'm going to find that div.

57
00:03:38,480 --> 00:03:41,750
I'm going to manually just add in some style to it right now.

58
00:03:42,790 --> 00:03:46,540
I'm going to put in some style of color red like so.

59
00:03:49,380 --> 00:03:54,990
Before printing out the air itself, I'm also going to put it right inside of this opening div, right

60
00:03:54,990 --> 00:03:56,430
inside of that string right there.

61
00:03:56,820 --> 00:03:58,560
I'm going to put in an H or.

62
00:03:59,690 --> 00:04:01,820
That says runtime error.

63
00:04:03,460 --> 00:04:07,540
Now, I've got a lot of quotes on this line right here, so please make sure that you've got all the

64
00:04:07,540 --> 00:04:11,830
appropriate matching quotes, because since we are writing all this stuff into a string, your editor

65
00:04:11,830 --> 00:04:13,000
isn't really going to help you out.

66
00:04:13,370 --> 00:04:16,680
So please double check all your formatting, all the syntax inside of here.

67
00:04:16,959 --> 00:04:20,560
And as you start to run this code, if you get any other kind of error, something that doesn't say

68
00:04:20,560 --> 00:04:23,560
runtime error, well, chances are it's coming from this snippet right here.

69
00:04:25,160 --> 00:04:31,700
All right, let's try that out onslaught dot, whatever, submit that's a little bit better, still

70
00:04:31,700 --> 00:04:36,080
doesn't look great, but we can come back in a little bit, maybe add in a little bit better formatting

71
00:04:36,350 --> 00:04:36,730
right now.

72
00:04:36,740 --> 00:04:41,330
It's definitely very obvious to any user, I would say, that something went wrong and a user should

73
00:04:41,330 --> 00:04:43,490
probably figure out what is going wrong with their code.

74
00:04:43,910 --> 00:04:48,200
We're also giving them a nice message right here to say, hey, here's your hint of what's gone wrong.

75
00:04:48,800 --> 00:04:53,510
And the one downside to this approach is that sometimes the air object that is thrown will have some

76
00:04:53,510 --> 00:04:56,540
really useful message or some useful data inside of it.

77
00:04:56,900 --> 00:04:59,590
So as an optional step, you can do this if you want to.

78
00:04:59,600 --> 00:05:00,310
You don't have to.

79
00:05:00,770 --> 00:05:01,700
We might decide.

80
00:05:03,160 --> 00:05:09,340
After putting the message in there to re throw that er if we re throw the air, that will cause the

81
00:05:09,340 --> 00:05:14,920
air to still be displayed at the console so the user can take a look at that air and figure out exactly

82
00:05:14,920 --> 00:05:15,690
what is going wrong.

83
00:05:16,540 --> 00:05:17,770
So again, totally optional.

84
00:05:19,090 --> 00:05:24,460
Right after the rootin tml, we can read through air or just really throw air.

85
00:05:26,470 --> 00:05:27,430
Now, if we run this.

86
00:05:28,550 --> 00:05:34,580
And do our council, whatever limits, now, we get the very visible air message on the screen, but

87
00:05:34,580 --> 00:05:38,660
the user can also see this right here, take a look at the call stack, all that kind of good stuff

88
00:05:38,810 --> 00:05:40,150
and figure out what is going wrong.

89
00:05:42,010 --> 00:05:46,540
Last possible thing you can do just to really exhaust some options here, we can technically change

90
00:05:46,540 --> 00:05:50,230
instead of doing it through here, we can go with a console dot er.

91
00:05:51,370 --> 00:05:55,680
Which will print up this air in a kind of air looking way at the console as well.

92
00:05:56,950 --> 00:05:59,260
So there's the other way we can handle this.

93
00:06:00,650 --> 00:06:05,150
Now, if I do my bad code summit, we still get stuff printed out here.

94
00:06:06,520 --> 00:06:11,530
The one good thing about doing a console, er, if you're using some kind of monitoring software, it

95
00:06:11,530 --> 00:06:16,960
might happen either you could do the ER or the console, but er I'm not going to try to speculate,

96
00:06:16,960 --> 00:06:18,790
to be honest, on which way is going to be better.

97
00:06:18,790 --> 00:06:21,880
Either one totally fine, but either way totally optional as well.

98
00:06:21,880 --> 00:06:23,550
If you want to print the ER out today, fine.

99
00:06:24,190 --> 00:06:25,530
OK, it's definitely a good improvement.

100
00:06:25,540 --> 00:06:26,660
Still lots for us to do.

101
00:06:26,710 --> 00:06:28,060
Well let's continue in just a moment.