1
00:00:02,260 --> 00:00:07,960
For this I'm back in this application we worked on, this goals application where we can add some goals

2
00:00:07,960 --> 00:00:13,510
here and this is the code we wrote there, I haven't changed anything in there.

3
00:00:13,630 --> 00:00:19,370
Now let me showcase the different things that could go wrong and how you fix them.

4
00:00:20,290 --> 00:00:21,760
So let's start simple,

5
00:00:21,790 --> 00:00:28,930
let's say we have a simple syntax error, here where we open our modal in the end by setting the add mode

6
00:00:28,930 --> 00:00:30,000
to true,

7
00:00:30,040 --> 00:00:35,860
let me remove that closing bracket. Now that's a clear syntax error, it's an error we can and we should

8
00:00:35,860 --> 00:00:40,090
totally avoid because we as a developer made a clear mistake.

9
00:00:40,090 --> 00:00:45,490
Now the good thing is even our IDE recognizes this and gives us a warning here though unfortunately,

10
00:00:45,520 --> 00:00:47,890
the error it's showing here is not entirely correct,

11
00:00:47,890 --> 00:00:50,370
it says that it's expecting a comma,

12
00:00:50,380 --> 00:00:54,120
well actually that's not the real problem, the real problem is a missing bracket.

13
00:00:54,190 --> 00:00:57,160
Still, we get an idea that something's wrong here

14
00:00:57,160 --> 00:01:02,890
and whilst you still need to think about the issue and you can't blindly use that solution by looking

15
00:01:02,890 --> 00:01:06,700
at that code, at some point you should find out that there is a missing bracket.

16
00:01:07,030 --> 00:01:12,670
Even if you forget this and you save this let's say, then the Javascript bundle will be built here, as

17
00:01:12,670 --> 00:01:18,520
you see I launched this on both Android and iOS and now we're getting this red error screen I was talking

18
00:01:18,520 --> 00:01:20,440
about and again here,

19
00:01:20,800 --> 00:01:23,280
we can simply read the error message.

20
00:01:23,410 --> 00:01:29,410
It's still pointing us at the wrong solution, expecting a comma but it does point us at the right code

21
00:01:29,410 --> 00:01:29,780
line,

22
00:01:29,830 --> 00:01:36,580
here you see it highlights this button title add new goal line, so it still shows us where we should look

23
00:01:37,060 --> 00:01:41,170
and that the issue is probably stemming from this line.

24
00:01:41,170 --> 00:01:48,490
We get the same error by the way here in this console and also in our expo dev tools here, there

25
00:01:48,490 --> 00:01:53,470
you see the same error message also with a hint at the line where this error is coming from,

26
00:01:53,470 --> 00:01:58,770
so you're getting a lot of help for tracking down this issue. Now here,

27
00:01:58,780 --> 00:02:04,270
it's unfortunately still not picking up that I fixed this error and hence here, we see it crashed, on

28
00:02:04,270 --> 00:02:05,650
iOS on Android,

29
00:02:05,650 --> 00:02:07,690
it's not reloading. Now on Android,

30
00:02:07,690 --> 00:02:10,000
we see a command we can use to reload the app,

31
00:02:10,090 --> 00:02:16,240
we can click down there or press r twice to reload but it's still not picking up the change here even

32
00:02:16,240 --> 00:02:18,010
though I fixed that in code,

33
00:02:18,010 --> 00:02:21,850
so one solution here is to simply stop the package or restart npm start.

34
00:02:21,970 --> 00:02:27,910
This happens rarely but sometimes this breaks and then simply restarting this npm start process is the

35
00:02:27,910 --> 00:02:29,480
thing to do

36
00:02:29,530 --> 00:02:35,500
and with that, I'll rerun it on Android by pressing a and on iOS by pressing i

37
00:02:35,570 --> 00:02:37,850
and now this should relaunch the app on these devices.

38
00:02:37,870 --> 00:02:43,540
Again, this will happen rarely but sometimes it just happens and you can just restart it to get this

39
00:02:43,540 --> 00:02:45,500
back to work correctly.

40
00:02:45,520 --> 00:02:50,380
Now with that running again, let me show you an example for an error message you're getting where you

41
00:02:50,380 --> 00:02:53,800
don't have a syntax error but you still have a clear bug in your code.

42
00:02:54,640 --> 00:03:02,830
Let's say when we add a goal here with the goal title, we add a check where we see if goal title length

43
00:03:02,950 --> 00:03:09,520
is greater than zero to check that the value is not empty or actually that it is equal to zero which

44
00:03:09,520 --> 00:03:11,700
means the user didn't enter a title

45
00:03:11,700 --> 00:03:17,740
and in this case, we just return which means we're not going to add this goal here and we're also not

46
00:03:17,740 --> 00:03:18,790
going to close the modal,

47
00:03:18,790 --> 00:03:21,610
so we're just ignoring the user input because it's empty.

48
00:03:21,640 --> 00:03:23,130
We might want to show an error message

49
00:03:23,140 --> 00:03:26,470
but for now we'll just do it like this.

50
00:03:26,540 --> 00:03:29,120
Now when we do that, it will generally work

51
00:03:29,120 --> 00:03:30,230
alright here,

52
00:03:30,230 --> 00:03:37,400
right? If I save this and we go back here, open this and I click add, you see I can't add an empty goal,

53
00:03:37,430 --> 00:03:40,650
I have to enter something for this to disappear.

54
00:03:40,670 --> 00:03:47,030
Now let's say in our goal input component where we are fetching user input, where we then forward it

55
00:03:47,030 --> 00:03:55,990
by calling on add goal here, we forget to do that, we forward null here or we forward nothing because we

56
00:03:55,990 --> 00:04:02,200
simply forgot to add this here. Now our app starts just fine, it doesn't break immediately because we

57
00:04:02,200 --> 00:04:10,760
have no clear error in our code, no syntax error but if I enter something here and I click add, I get

58
00:04:10,820 --> 00:04:14,510
undefined is not an object, evaluating goal title length

59
00:04:14,540 --> 00:04:18,170
and again, this is an error message that helps us.

60
00:04:18,170 --> 00:04:24,680
It informs us that the problem has something to do with something being undefined and that it is related

61
00:04:24,680 --> 00:04:27,280
to this goal title length check

62
00:04:27,470 --> 00:04:33,130
and then you could dive into the place where you access goal title length and trace down the issue.

63
00:04:33,320 --> 00:04:39,020
So we're having problems getting the length of goal title because it's undefined as it seems. We're

64
00:04:39,020 --> 00:04:39,800
getting it here,

65
00:04:39,800 --> 00:04:45,320
so the error is certainly not here but let's go to the place where add goal handler is called in the

66
00:04:45,320 --> 00:04:46,130
end.

67
00:04:46,130 --> 00:04:51,620
Now if you remember, we're passing this to the on add goal prop here on goal input, so we should probably

68
00:04:51,620 --> 00:04:56,780
go to the goal input which you by the way can also do by holding command or control and clicking on

69
00:04:56,780 --> 00:05:04,460
the component name. Well in there, we call on add goal here and oh, here we see what the error is. Now of course

70
00:05:04,460 --> 00:05:08,360
in this case I constructed this error here but you get my point

71
00:05:08,360 --> 00:05:13,790
obviously, this is an error you could certainly have in your code where you forgot to add it, where you

72
00:05:13,790 --> 00:05:19,120
maybe change the way your code works and you forgot to adjust it in all the places and therefore, you're

73
00:05:19,130 --> 00:05:20,610
suddenly getting this error.

74
00:05:20,720 --> 00:05:23,900
Now the error message helped us find the issue.