Hi, and welcome back.
Today, I would like to talk to you about different kinds of errors that you might
be experiencing and how you might be able to debug them.
One more type of error is called a logical error.
Those logical errors don't always appear inside the terminal or the simulator.
It's something that you logically did
incorrectly, which is going to lead to incorrect results and something
that you expected is not going to be happening.
Let's start with something simple.
Let's say that here inside the list header
component where we display the user stories, you made a mistake.
Instead of using user stories here, you used user posts.
Let's say this is the error.
Now, when you look at the application in the beginning, nothing might seem wrong.
But when you start to scroll and
you want to add more items, here you might experience a very weird
behavior where the data that you want isn't really appearing here.
Instead, what you might
see here is that you might be getting Nicholas the item from here,
append this to here, and you get 1, 2, 3, 4, 5 items instead of 9 items.
If that's the case, how do you debug this?
You go here and you write console log, content to append, and you see
why the item that was added on scroll is not correct.
Let's save this.
Let's reload our application.
Let's start to scroll and you will see
that the item that is actually returned to you is the item from user posts.
You will recognize this because it has
bookmarks, comments, first name, last name, and so on.
So if you recognize that, you might understand that, Hey,
something that is returned by pagination isn't correct.
What is wrong?
What did I do wrong?
You will see that as your database,
you actually pass user post and not user stories.
So then you might change it back and your
logical error is going to be gone, you can reload this application and you're
going to see that everything is working as you expected it to.
Great. Let's just delete this and talk about
a different logical error that you might create.
So let's say that we set up starting index incorrectly in pagination.
What would this cause?
Let's say that instead of current page
minus one, what I did is current page times page size.
Let's reload this.
Right away you're going to see that our
application actually starts out at the wrong place.
We start out at Nata, Nicholas, Nino, Nana, and Adam.
Where is this?
You're going to go inside the user stories
and you're going to see that Nata is actually the fourth element.
You're starting to fetch from the fourth element instead of starting at index one.
What are you going to do then?
You're going to come here, you're going to console log,
and you're going to console start index, and you're going to start exploring what
the value of start index is and what you might have done incorrectly.
Here you're going to see that your start index is actually four and two.
Two is going to be happening because of user posts.
Because you're also going to start user post at an incorrect place.
You're going to start it from the third
element, and you're also going to be fetching incorrectly this user story.
There's something definitely wrong with your pagination function.
You start from fourth element inside
the user stories, and you start from second element inside the user post.
Something's wrong with your start index, and you got to make sure that you write
out this formula well, otherwise you're going to be making more mistakes.
Then you might figure out at some point
what your formula should be and everything is going to be fixed.
Now, let's say that you are incorrectly updating the current page.
Let's say that inside this function here,
inside the user stories, you incorrectly update the current page.
Let's say that here you just don't append one.
You set the user stories current page to the same thing that it was before.
Let's reload.
In this case, I think you're going to get warnings when you start scrolling because
you are actually going to have the same elements here.
You're going to get a warning and it's
going to say that encounter two children with the same key.
This is because you're actually going
to be looping through the items and those items are going to appear multiple times.
As you're scrolling,
it's going to be endless and you're going to see the same and same items.
And what could cause this issue?
You should think about when this issue is caused.
The issue is caused when you try to scroll.
If you try to scroll, then your issue appears.
There's something definitely going on when you're reaching the end.
What you can do is see what you can do is see whatyou're trying to append.
If you see that,
let's save this, let's reload it, you're going to see that, okay,
the first time you tried to append some items that might be correct.
The second time before you got the error,
you can scroll up here, you're going to see that you try to fetch the same items.
You fetched the same items twice.
The first time it was correct, second time it was incorrect.
Correct. Why might this happen?
You can just check out what's going on here.
You will see that user stories is just a database, so that can't be wrong.
Then you have user stories current page, so that might be wrong because user
stories page size is something that's constant.
User stories and user stories page size
don't change, but user stories current page does change.
Here you might guess that you should
console log user stories current page and see if there's anything wrong with that.
Let's reload the application one more time.
Let's start scrolling and you're going to get the first page and then you're
going to see that you're trying to get the first page again.
The first page, the first time you try to get this, it will be correct because
one plus one is two and you're actually trying to get the second page, right?
But the second time you do it and it's
still one, it's incorrect because this should actually be two at this point.
And then it will become because you have
plus one here and it's going to be correct.
So you can debug your application using console log.
You can use this when you have some
logical errors and your application is behaving in a weird way and you're seeing
the data appear that just doesn't make sense.
This is something very important.
You will use this a lot because logical errors also happen.
We're all humans, we're not robots.
Sometimes we think one thing and we write another thing.
We might actually know that we did it
correctly inside our heads, and we might assume that we wrote
the thing that we were actually thinking about, but you might have not done that.
So console logs are very important part of debugging and it will help you when
you're facing logical errors, they are not making sense and terminals
might not be throwing the warnings and errors about certain things.
So if you have a logical error, just make sure to trace it down.
You will try to see where it might be
coming from exactly and then start using console logs.
What you could also do if you're not sure where the errors are coming from is
that you can start commenting out certain parts.
I will comment out here.
Then you can do some actions with your application.
If you don't see any errors or weird behavior, you will understand that, hey,
something might be wrong with this component.
Then you can comment out some parts of it
or delete some parts of it and then get those back.
For example, you can delete this part
and see if you're getting the errors with the other part.
Yes, you're getting the errors only when
you have user stories, so there might be something wrong with the user stories.
You can then start thinking, okay, what if I delete onenreached function?
Will I get the errors?
Then you can save this, reload your application,
and once you start to scroll, you get no errors.
Now you trace it down even more and you understand that, hey,
I must have something wrong exactly in this paragraph.
You can uncomment this then and you can
start commenting the certain parts of it out.
For example, you could comment out this part and then you can start scrolling.
Okay, everything is still fine.
What if I uncomment this line?
You can start scrolling and everything is still fine.
Then you can uncomment this
if statement and start scrolling and everything seems fine.
What you can do after that is uncomment
this line and something happens after that.
So it's either this part or just this part.
You can just trace it down by deleting
parts of your code and seeing what happens.
When do you encounter unexpected issues?
This is something that console logs would help with.
Just use it a lot because this is your key.
It's going to save you some time in researching bugs,
especially the logical bugs, because they're very hard to find.
Thank you so much for watching.
I hope this helps you in your projects and in your next endeavors.
In the next lesson, we're going to explore
one more debugger tool that might help you debug your applications and have
visibility into what's happening in your application.
Stay tuned for that and I'll see you in the next lesson.