WEBVTT 00:00:00.200 --> 00:00:01.540 Hi, and welcome back. 00:00:01.560 --> 00:00:05.200 Today, I would like to talk to you about different kinds of errors that you might 00:00:05.230 --> 00:00:09.080 be experiencing and how you might be able to debug them. 00:00:09.110 --> 00:00:12.620 One more type of error is called a logical error. 00:00:12.650 --> 00:00:16.640 Those logical errors don't always appear inside the terminal or the simulator. 00:00:16.670 --> 00:00:18.800 It's something that you logically did 00:00:18.830 --> 00:00:22.560 incorrectly, which is going to lead to incorrect results and something 00:00:22.580 --> 00:00:25.620 that you expected is not going to be happening. 00:00:25.650 --> 00:00:28.660 Let's start with something simple. 00:00:28.690 --> 00:00:31.120 Let's say that here inside the list header 00:00:31.150 --> 00:00:35.380 component where we display the user stories, you made a mistake. 00:00:35.410 --> 00:00:40.700 Instead of using user stories here, you used user posts. 00:00:40.730 --> 00:00:42.700 Let's say this is the error. 00:00:42.730 --> 00:00:47.560 Now, when you look at the application in the beginning, nothing might seem wrong. 00:00:47.590 --> 00:00:49.500 But when you start to scroll and 00:00:49.530 --> 00:00:53.760 you want to add more items, here you might experience a very weird 00:00:53.790 --> 00:00:59.100 behavior where the data that you want isn't really appearing here. 00:00:59.130 --> 00:01:00.700 Instead, what you might 00:01:00.730 --> 00:01:06.740 see here is that you might be getting Nicholas the item from here, 00:01:06.770 --> 00:01:13.930 append this to here, and you get 1, 2, 3, 4, 5 items instead of 9 items. 00:01:13.960 --> 00:01:17.570 If that's the case, how do you debug this? 00:01:17.600 --> 00:01:23.660 You go here and you write console log, content to append, and you see 00:01:23.690 --> 00:01:27.620 why the item that was added on scroll is not correct. 00:01:27.650 --> 00:01:29.440 Let's save this. 00:01:29.680 --> 00:01:31.540 Let's reload our application. 00:01:31.570 --> 00:01:33.880 Let's start to scroll and you will see 00:01:33.910 --> 00:01:39.120 that the item that is actually returned to you is the item from user posts. 00:01:39.120 --> 00:01:40.780 You will recognize this because it has 00:01:40.810 --> 00:01:44.340 bookmarks, comments, first name, last name, and so on. 00:01:44.370 --> 00:01:47.460 So if you recognize that, you might understand that, Hey, 00:01:47.490 --> 00:01:50.490 something that is returned by pagination isn't correct. 00:01:50.520 --> 00:01:51.680 What is wrong? 00:01:51.710 --> 00:01:52.900 What did I do wrong? 00:01:52.930 --> 00:01:54.720 You will see that as your database, 00:01:54.750 --> 00:01:57.400 you actually pass user post and not user stories. 00:01:57.430 --> 00:01:59.720 So then you might change it back and your 00:01:59.720 --> 00:02:03.320 logical error is going to be gone, you can reload this application and you're 00:02:03.350 --> 00:02:06.820 going to see that everything is working as you expected it to. 00:02:06.840 --> 00:02:10.820 Great. Let's just delete this and talk about 00:02:10.850 --> 00:02:14.660 a different logical error that you might create. 00:02:14.690 --> 00:02:19.160 So let's say that we set up starting index incorrectly in pagination. 00:02:19.190 --> 00:02:20.610 What would this cause? 00:02:20.640 --> 00:02:22.760 Let's say that instead of current page 00:02:22.790 --> 00:02:28.820 minus one, what I did is current page times page size. 00:02:28.850 --> 00:02:30.500 Let's reload this. 00:02:30.530 --> 00:02:33.160 Right away you're going to see that our 00:02:33.190 --> 00:02:35.700 application actually starts out at the wrong place. 00:02:35.730 --> 00:02:39.380 We start out at Nata, Nicholas, Nino, Nana, and Adam. 00:02:39.410 --> 00:02:40.500 Where is this? 00:02:40.530 --> 00:02:42.640 You're going to go inside the user stories 00:02:42.670 --> 00:02:46.840 and you're going to see that Nata is actually the fourth element. 00:02:46.870 --> 00:02:53.260 You're starting to fetch from the fourth element instead of starting at index one. 00:02:53.290 --> 00:02:55.420 What are you going to do then? 00:02:55.450 --> 00:02:58.660 You're going to come here, you're going to console log, 00:02:58.690 --> 00:03:03.680 and you're going to console start index, and you're going to start exploring what 00:03:03.710 --> 00:03:07.120 the value of start index is and what you might have done incorrectly. 00:03:07.150 --> 00:03:11.580 Here you're going to see that your start index is actually four and two. 00:03:11.610 --> 00:03:14.420 Two is going to be happening because of user posts. 00:03:14.450 --> 00:03:18.600 Because you're also going to start user post at an incorrect place. 00:03:18.600 --> 00:03:19.960 You're going to start it from the third 00:03:19.990 --> 00:03:25.000 element, and you're also going to be fetching incorrectly this user story. 00:03:25.030 --> 00:03:29.180 There's something definitely wrong with your pagination function. 00:03:29.210 --> 00:03:31.560 You start from fourth element inside 00:03:31.590 --> 00:03:35.340 the user stories, and you start from second element inside the user post. 00:03:35.360 --> 00:03:38.240 Something's wrong with your start index, and you got to make sure that you write 00:03:38.240 --> 00:03:41.660 out this formula well, otherwise you're going to be making more mistakes. 00:03:41.680 --> 00:03:43.480 Then you might figure out at some point 00:03:43.510 --> 00:03:47.700 what your formula should be and everything is going to be fixed. 00:03:47.730 --> 00:03:55.340 Now, let's say that you are incorrectly updating the current page. 00:03:55.370 --> 00:03:59.160 Let's say that inside this function here, 00:03:59.190 --> 00:04:04.610 inside the user stories, you incorrectly update the current page. 00:04:04.640 --> 00:04:09.220 Let's say that here you just don't append one. 00:04:09.250 --> 00:04:13.380 You set the user stories current page to the same thing that it was before. 00:04:13.410 --> 00:04:14.120 Let's reload. 00:04:14.120 --> 00:04:17.360 In this case, I think you're going to get warnings when you start scrolling because 00:04:17.390 --> 00:04:21.100 you are actually going to have the same elements here. 00:04:21.130 --> 00:04:23.060 You're going to get a warning and it's 00:04:23.090 --> 00:04:26.540 going to say that encounter two children with the same key. 00:04:26.560 --> 00:04:28.320 This is because you're actually going 00:04:28.340 --> 00:04:33.040 to be looping through the items and those items are going to appear multiple times. 00:04:33.040 --> 00:04:33.840 As you're scrolling, 00:04:33.860 --> 00:04:37.820 it's going to be endless and you're going to see the same and same items. 00:04:37.840 --> 00:04:40.000 And what could cause this issue? 00:04:40.030 --> 00:04:44.020 You should think about when this issue is caused. 00:04:44.040 --> 00:04:50.300 The issue is caused when you try to scroll. 00:04:50.330 --> 00:04:54.060 If you try to scroll, then your issue appears. 00:04:54.080 --> 00:04:57.020 There's something definitely going on when you're reaching the end. 00:04:57.040 --> 00:05:01.700 What you can do is see what you can do is see whatyou're trying to append. 00:05:01.720 --> 00:05:04.040 If you see that, 00:05:06.800 --> 00:05:10.640 let's save this, let's reload it, you're going to see that, okay, 00:05:10.660 --> 00:05:15.500 the first time you tried to append some items that might be correct. 00:05:15.530 --> 00:05:19.700 The second time before you got the error, 00:05:19.720 --> 00:05:24.480 you can scroll up here, you're going to see that you try to fetch the same items. 00:05:24.510 --> 00:05:26.780 You fetched the same items twice. 00:05:26.800 --> 00:05:29.960 The first time it was correct, second time it was incorrect. 00:05:29.960 --> 00:05:32.860 Correct. Why might this happen? 00:05:32.890 --> 00:05:35.920 You can just check out what's going on here. 00:05:35.950 --> 00:05:40.420 You will see that user stories is just a database, so that can't be wrong. 00:05:40.450 --> 00:05:44.680 Then you have user stories current page, so that might be wrong because user 00:05:44.710 --> 00:05:47.380 stories page size is something that's constant. 00:05:47.400 --> 00:05:49.300 User stories and user stories page size 00:05:49.330 --> 00:05:52.500 don't change, but user stories current page does change. 00:05:52.530 --> 00:05:55.280 Here you might guess that you should 00:05:55.300 --> 00:06:00.860 console log user stories current page and see if there's anything wrong with that. 00:06:00.880 --> 00:06:02.600 Let's reload the application one more time. 00:06:02.630 --> 00:06:08.440 Let's start scrolling and you're going to get the first page and then you're 00:06:08.470 --> 00:06:12.240 going to see that you're trying to get the first page again. 00:06:12.270 --> 00:06:16.340 The first page, the first time you try to get this, it will be correct because 00:06:16.360 --> 00:06:21.300 one plus one is two and you're actually trying to get the second page, right? 00:06:21.320 --> 00:06:23.060 But the second time you do it and it's 00:06:23.090 --> 00:06:28.920 still one, it's incorrect because this should actually be two at this point. 00:06:28.920 --> 00:06:30.900 And then it will become because you have 00:06:30.920 --> 00:06:33.380 plus one here and it's going to be correct. 00:06:33.410 --> 00:06:38.100 So you can debug your application using console log. 00:06:38.120 --> 00:06:39.720 You can use this when you have some 00:06:39.750 --> 00:06:44.960 logical errors and your application is behaving in a weird way and you're seeing 00:06:44.980 --> 00:06:48.260 the data appear that just doesn't make sense. 00:06:48.290 --> 00:06:50.860 This is something very important. 00:06:50.890 --> 00:06:54.500 You will use this a lot because logical errors also happen. 00:06:54.530 --> 00:06:56.740 We're all humans, we're not robots. 00:06:56.770 --> 00:07:01.300 Sometimes we think one thing and we write another thing. 00:07:01.330 --> 00:07:03.940 We might actually know that we did it 00:07:03.970 --> 00:07:07.640 correctly inside our heads, and we might assume that we wrote 00:07:07.670 --> 00:07:12.780 the thing that we were actually thinking about, but you might have not done that. 00:07:12.800 --> 00:07:16.800 So console logs are very important part of debugging and it will help you when 00:07:16.830 --> 00:07:21.320 you're facing logical errors, they are not making sense and terminals 00:07:21.350 --> 00:07:26.460 might not be throwing the warnings and errors about certain things. 00:07:26.480 --> 00:07:30.340 So if you have a logical error, just make sure to trace it down. 00:07:30.360 --> 00:07:32.280 You will try to see where it might be 00:07:32.300 --> 00:07:36.180 coming from exactly and then start using console logs. 00:07:36.210 --> 00:07:40.680 What you could also do if you're not sure where the errors are coming from is 00:07:40.680 --> 00:07:42.900 that you can start commenting out certain parts. 00:07:42.920 --> 00:07:45.980 I will comment out here. 00:07:46.010 --> 00:07:50.680 Then you can do some actions with your application. 00:07:50.710 --> 00:07:54.760 If you don't see any errors or weird behavior, you will understand that, hey, 00:07:54.790 --> 00:07:57.280 something might be wrong with this component. 00:07:57.300 --> 00:08:00.760 Then you can comment out some parts of it 00:08:00.780 --> 00:08:03.280 or delete some parts of it and then get those back. 00:08:03.300 --> 00:08:05.280 For example, you can delete this part 00:08:05.280 --> 00:08:08.060 and see if you're getting the errors with the other part. 00:08:08.080 --> 00:08:09.800 Yes, you're getting the errors only when 00:08:09.800 --> 00:08:13.480 you have user stories, so there might be something wrong with the user stories. 00:08:13.510 --> 00:08:17.120 You can then start thinking, okay, what if I delete onenreached function? 00:08:17.150 --> 00:08:18.780 Will I get the errors? 00:08:18.800 --> 00:08:22.780 Then you can save this, reload your application, 00:08:22.800 --> 00:08:25.160 and once you start to scroll, you get no errors. 00:08:25.190 --> 00:08:28.320 Now you trace it down even more and you understand that, hey, 00:08:28.350 --> 00:08:31.860 I must have something wrong exactly in this paragraph. 00:08:31.890 --> 00:08:33.920 You can uncomment this then and you can 00:08:33.940 --> 00:08:36.800 start commenting the certain parts of it out. 00:08:36.820 --> 00:08:40.680 For example, you could comment out this part and then you can start scrolling. 00:08:40.700 --> 00:08:42.460 Okay, everything is still fine. 00:08:42.490 --> 00:08:44.980 What if I uncomment this line? 00:08:45.000 --> 00:08:47.360 You can start scrolling and everything is still fine. 00:08:47.390 --> 00:08:49.180 Then you can uncomment this 00:08:49.200 --> 00:08:53.420 if statement and start scrolling and everything seems fine. 00:08:53.440 --> 00:08:56.240 What you can do after that is uncomment 00:08:56.270 --> 00:08:59.540 this line and something happens after that. 00:08:59.560 --> 00:09:02.780 So it's either this part or just this part. 00:09:02.800 --> 00:09:04.520 You can just trace it down by deleting 00:09:04.550 --> 00:09:07.360 parts of your code and seeing what happens. 00:09:07.390 --> 00:09:10.340 When do you encounter unexpected issues? 00:09:10.370 --> 00:09:14.100 This is something that console logs would help with. 00:09:14.130 --> 00:09:17.400 Just use it a lot because this is your key. 00:09:17.430 --> 00:09:20.040 It's going to save you some time in researching bugs, 00:09:20.060 --> 00:09:23.180 especially the logical bugs, because they're very hard to find. 00:09:23.200 --> 00:09:24.440 Thank you so much for watching. 00:09:24.470 --> 00:09:28.140 I hope this helps you in your projects and in your next endeavors. 00:09:28.160 --> 00:09:30.140 In the next lesson, we're going to explore 00:09:30.170 --> 00:09:34.000 one more debugger tool that might help you debug your applications and have 00:09:34.000 --> 00:09:36.540 visibility into what's happening in your application. 00:09:36.560 --> 00:09:38.840 Stay tuned for that and I'll see you in the next lesson.