For this I'm back in this application we worked on, this goals application where we can add some goals
here and this is the code we wrote there, I haven't changed anything in there.
Now let me showcase the different things that could go wrong and how you fix them.
So let's start simple,
let's say we have a simple syntax error, here where we open our modal in the end by setting the add mode
to true,
let me remove that closing bracket. Now that's a clear syntax error, it's an error we can and we should
totally avoid because we as a developer made a clear mistake.
Now the good thing is even our IDE recognizes this and gives us a warning here though unfortunately,
the error it's showing here is not entirely correct,
it says that it's expecting a comma,
well actually that's not the real problem, the real problem is a missing bracket.
Still, we get an idea that something's wrong here
and whilst you still need to think about the issue and you can't blindly use that solution by looking
at that code, at some point you should find out that there is a missing bracket.
Even if you forget this and you save this let's say, then the Javascript bundle will be built here, as
you see I launched this on both Android and iOS and now we're getting this red error screen I was talking
about and again here,
we can simply read the error message.
It's still pointing us at the wrong solution, expecting a comma but it does point us at the right code
line,
here you see it highlights this button title add new goal line, so it still shows us where we should look
and that the issue is probably stemming from this line.
We get the same error by the way here in this console and also in our expo dev tools here, there
you see the same error message also with a hint at the line where this error is coming from,
so you're getting a lot of help for tracking down this issue. Now here,
it's unfortunately still not picking up that I fixed this error and hence here, we see it crashed, on
iOS on Android,
it's not reloading. Now on Android,
we see a command we can use to reload the app,
we can click down there or press r twice to reload but it's still not picking up the change here even
though I fixed that in code,
so one solution here is to simply stop the package or restart npm start.
This happens rarely but sometimes this breaks and then simply restarting this npm start process is the
thing to do
and with that, I'll rerun it on Android by pressing a and on iOS by pressing i
and now this should relaunch the app on these devices.
Again, this will happen rarely but sometimes it just happens and you can just restart it to get this
back to work correctly.
Now with that running again, let me show you an example for an error message you're getting where you
don't have a syntax error but you still have a clear bug in your code.
Let's say when we add a goal here with the goal title, we add a check where we see if goal title length
is greater than zero to check that the value is not empty or actually that it is equal to zero which
means the user didn't enter a title
and in this case, we just return which means we're not going to add this goal here and we're also not
going to close the modal,
so we're just ignoring the user input because it's empty.
We might want to show an error message
but for now we'll just do it like this.
Now when we do that, it will generally work
alright here,
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,
I have to enter something for this to disappear.
Now let's say in our goal input component where we are fetching user input, where we then forward it
by calling on add goal here, we forget to do that, we forward null here or we forward nothing because we
simply forgot to add this here. Now our app starts just fine, it doesn't break immediately because we
have no clear error in our code, no syntax error but if I enter something here and I click add, I get
undefined is not an object, evaluating goal title length
and again, this is an error message that helps us.
It informs us that the problem has something to do with something being undefined and that it is related
to this goal title length check
and then you could dive into the place where you access goal title length and trace down the issue.
So we're having problems getting the length of goal title because it's undefined as it seems. We're
getting it here,
so the error is certainly not here but let's go to the place where add goal handler is called in the
end.
Now if you remember, we're passing this to the on add goal prop here on goal input, so we should probably
go to the goal input which you by the way can also do by holding command or control and clicking on
the component name. Well in there, we call on add goal here and oh, here we see what the error is. Now of course
in this case I constructed this error here but you get my point
obviously, this is an error you could certainly have in your code where you forgot to add it, where you
maybe change the way your code works and you forgot to adjust it in all the places and therefore, you're
suddenly getting this error.
Now the error message helped us find the issue.