Tips and Tricks for Debugging React Applications

hey everyone welcome back to another web dev junkie video i hope you guys are having a great day in this video um one of my subscribers asked me if i could kind of walk him through how i would typically debug stuff when i'm doing like web development uh more specifically he's working with react so i'm probably going to make this a react debugging tutorial and honestly the best way to get better at debugging is to run into bugs and fix them over time so i'm just going to try to show you some tips and tricks for debugging or what i would do so the setup is we have this application built in react and i went ahead and just added a bunch of bugs to the application okay so i already know the solutions to the bugs so it's not going to be a really good debugging session it's not going to be a true debugging session but hopefully you can take something away from this okay so starting off we have a a bug where there's a bug on the home page so if i were to navigate over to the homepage you'll notice that the application crashes okay you're gonna see a lot of bugs like this potentially when you're dealing with react and when you see those bugs what you need to do is actually read the errors okay a lot of times beginners don't read the errors if you see something in red take some time and read it says type error cannot read property find of undefined so that means you're trying to do a dot find on some type of undefined object so if you look at this code here usually it tells you like what line right but i'll be honest the stack traces for some of this stuff is is awful so it doesn't actually tell you what line number it failed on but it does tell you like the function uh actually it does tell you i just need to look right so that's my problem i didn't even look at the look at the text it tells you right here line 10 things because it's just really small and hard to read but it says inside source common voting widget line 10 this failed okay so cannot read property find undefined and look for where we're using the fine keyword okay we're using it here so upvoters.find so that makes me think that the up voters variable is actually undefined here so if you want to actually go a step further you can add like a debugger statement here and refresh your page and you'll notice that if i hover over up voters it's undefined so that's what the issue is now we need to figure out why is this undefined what are we passing down into here which is causing it to be undefined so at that point what i would do is copy this voting widget and do a full project search right so if you don't know how to do a full project search it's command shift f in vs code and then you can type in like a dom element like this and this will show me everywhere in the application where it's being used so it turns out it's used two places it's used on the discussion page and the postcard page so we want to make sure that we are like on the right page okay so we went to the home page which means that this happens to be on the postcard okay so since i know this application it makes more sense and i know like where to look but if you don't know we're trying to go to this route here where it says path of slash you can verify that up here you see how there's like no no trailing anything it's just locals 3000 so we know we're on the home page so if you just go ahead and dive into that by doing f12 and i think i need to do it again let's see why is this not working there we go that's that's a quick way to just kind of dive into the implementation of whatever class or function that you're looking on another way i could just do it is command p type in like home page and just open it that way but just do whatever works for you so as you're looking through here you'll notice that there's nothing too much going on here but speed card looks familiar because i think that was printed out somewhere oh that was over here so we saw that the voting widget was actually inside something called a postcard let's try to dive into the feed card and you kind of just have to like know the code in this space all right so now that we see that the feed has a postcard let's dive into the postcard and see what's going on here so we have a postcard a lot of stuff going on here but really you don't need to know much about what's going on let me zoom in i forgot to zoom in so sorry if the text is a little bit small i usually zoom in for the youtube videos so it's easier to see on your phone all right so now we have to kind of look through here and figure out where are we calling that voting widget so we're calling it here and let's just actually look at the upvoters right that's the thing that we passed in which happened to be bad let me close some of this stuff so we know what's going on all right so we have two widgets we have the postcard and the voting widget and remember we just saw that up voters was undefined so it makes sense that we look at what we're passing to the upvoters property here okay so if we look at it post dot up voter okay so this looks okay what you could also do is maybe just do a console log here so what i like to do inside of vs or inside of your react components is you can just console log the value here if you want so now i need to get rid of the debugger let's try refreshing and see what happens so okay so that printed out undefined undefined um let's just print out post okay so voter is undefined like we already kind of saw we print out post we get an object in our console log and if we zoom in a little bit we see that it has an upvoters array but it's called up voters okay so now going back to your code you'll notice that we call this up voter let's change this to up voters and see if that fixes the issue and now the ui is working so let's just kind of zoom back out cool now everything's working so that is one bug workflow that i'm going to work with you through there are a couple of other easier ones i started with kind of the hardest one first let's look at some other ones so turns out there's a bug if you try to click on the top contributors over here it takes you to a 404 page all right so let's try to debug why that's happening because it should take us to the page of the actual contributor um let me get rid of that console log real quick all right so what i would like to do is if you're at a new code base that you're not familiar with you want to know what component this list has been rendered in okay so what you could do is install the react dev tools here and go to this components tab and there is a inspect element here so if you look at there's two of them make sure you click the one that's closest to your react console and you can hover over your components to figure out what jsx component they existed all right so this one is in section page and this one's in contributors this one's in contributors you can also click it i think you can click it um i'm not sure maybe i need to refresh my page it usually actually like tells you yeah i had to refresh my page for some reason so now if you actually click it it tells you okay this is the contributor's component so what i would do is command p and say contributors go to that file and let's figure out what's going on here um so it looks like this is just made up of a bunch of like we loop over the users and we create a bunch of author boxes okay so let's just make sure that we're in the right file i'll put some text we see that that renders out for us so we're in the right file and now we need to kind of look at the author box and see maybe is the bug in here so i'm going to dive into this one shift or f f12 i believe um and in the author box let's see what's going on here so really all this does is it's just a link right this is using a react router link so it makes me think that okay maybe we're just going to the wrong url so let's look at the url that we're passing to the authorbox component again this is like a custom component that we worked on that takes a url property so if you look at this it goes to profiles slash the username okay so off the bat that doesn't look like there's anything wrong with that but what i would do is verify do we actually have a route called profiles slash username so i'm gonna go to my router which is in the app and i'm gonna look through my routes and say okay we have um slash profile username and it doesn't have an s so maybe that's the issue so i'm going to go here and just remove the s here and you'll see this bug a lot where you accidentally added an s we don't need an s so now when i click on bobby it actually redirects me to the correct page so another simple issue where we were able to fix it by just figuring out the correct routes that we have in our application and then changing the url to match that path so in our application we get a 404 error when you're doing issues like that so once you fix an issue with the 404 you're kind of familiar with the issue and you will kind of know based on your memory that if i see a four or four page i'm probably going to a route that doesn't actually exist right so always just check the routes if that's the issue all right so i think we did posts are broken we did reef let's see settings dark theme yeah we did this one all right so now if we go to the settings page there's another bug i kind of added in where you can go over here and change oh i guess you can't change light mode there's something going on with the um the dark mode toggle okay you can actually toggle dark mode so this might be another simple issue let's just go ahead and use the component inspector figure out where this is so maybe just click on this card and figure out what top level parent component this exists in so this isn't a user settings page so even if you don't know the application you can use this like technique to get more familiar with it so we're in the user setting page this one's a little bit more beefy a lot of stuff going on here so we want to find explicitly where are we doing this dark theme so what i would do is copy some text here and just search this file for it and that'll take you straight to the issue or the relative component right so let's look at the input box this is the the button the toggle button if we look at it when we click it it's supposed to dispatch a dark light theme redux action okay so let's verify that that's happening so i'm gonna go to my redux tab here this is another extension you have to kind of install in chrome and i don't know if there's a way to clear this out but when you click it let's see if it fires off a redux action so it did it fired off mumble theme and what i'm noticing here is that it's not changing any state okay so this this action was supposed to dispatch a payload to basically change the true or false but what i'm noticing is that it's not actually doing anything like usually this diff tab will tell you what changed in your state like for example if i click this it showed me that loading became false from true but this isn't doing anything so what i would do is just dive into this action some more and try to find where in the application we're checking for mumble theme usually there's like a reducer so i'm going to go down here there is a local file which happens to be in my reducers folder so i'm going to click it and that'll take me to the reducer so what's going on here we are basically saying if we get this mumble theme event we are setting into local storage the the negation of dark theme so this is basically what's making it go from false to true and true to false and then we set it onto our state dark theme equals state dart dark theme okay so if you look closely you'll notice that we toggle it here with an uh exclamation mark but we forgot to do it here so let's just add one in and hopefully this will fix it now it didn't fix it sometimes you have to restart your page there we go i don't know why i have this to restart my page but sometimes you just have to refresh your page so that's another really important debugging tool is the refresh if you made a change and you don't think it's being reflected on your ui make sure you do a hard refresh of your page that's command r typically or you can go up here and like do a hard reload that'll like clear the cache and refresh your page super important to know all right so we got that fixed there's i think two more bugs so another one is the modal won't open so if i click on these edit buttons it was supposed to open up a modal for me that way i can actually edit my about skills but right now that's not working so again let's just suspect this this happens to exist on the same user setting page here you can also like hover over this stuff to see so i'm going to go to my user setting page and look for skills or edit whichever one i'll go to skills um [Music] okay so we have a button here called edit so this is like the edit button and when you click it it calls an update function okay now the bug is when you click this it's not actually doing anything so let's look at the update function which is declared somewhere in this file a quick trick is again f12 we'll take you straight to the function and we just need to look at this function and figure out what's going on so we looks like we get the data from data type i'm not sure what this is doing but we set the modal content to data type and and then we have to figure out why the model's not popping up so it turns out if we look up here maybe there's like a function that we didn't call like how do we actually get the modal to show um so we need to actually understand like where the modals are displayed so let's look around here a little bit and you'll see that we have two modals and we have a user settings model and a profile picture crop modal and this is only going to be displayed when uh let's see active so it looks like there's an active boolean that we pass and you can kind of dive into the implementation to figure out how active is working but i'm assuming this is just dynamically showing the modal if active is set to true right so this is the modal we're just passing active down further this will take some more like deep diving to understand the code base but usually on modals and different components there's a way to like toggle it so i'm going to assume that active equals this is how we do it um so let's look at update modal active and see like where that's defined so that happens to be a state variable that set the false and just to kind of verify this if i default this to true you'll see that the modal pops up so we have the functionality in place but it seems like we're just not setting this to true when we need to so let's go back to that function i think it's called update and i think we just need to make sure we call set update modal active to true and that should hopefully make it pop up so i'm going to click edit here and notice that the modal is now popping up so we fixed that bug pretty cool making some progress now let's look at the last bug refresh on settings page so there's like a strange bug going on here when i refresh the page it like clears out everything right so like for some reason i can't see my user settings although i'm logged in like i can verify i'm logged in here but when i go to my settings with a refresh it seems like everything is cleared out so let's go back to the user setting page and kind of look through this so it turns out how is this working all right so what i would first do is maybe look at your network tab and i'm going to go ahead and just look at if there's any errors this is also really important to know when debugging keep a track of this little red icon and look at errors that happen in your console so off the bat it looks like we're trying to hit api user slash undefined when we refresh the page so let me clear this and refresh so that's kind of red a red flag right whenever you're trying to see undefined in url you're probably forgetting to pass something so with that being said let's try to figure out where that's coming from okay so typically there's like a reducer that's going to be sending out that information so let me kind of look at my reducer so we get a user detail failed which is probably related so let's search the project for a user detail failed or just fail and find the reducer okay so again the issue we're looking at was the actual request to the back end had undefined so we probably want to go up let's go up the ladder and find the action that's trying to make that request okay so let's go to the list detail list user details action and you'll notice here we make a request to the backend right so let's just put a debugger here real quick and see if we figure out what a username is so on the first request username is rick so i think it works fine but when i do a hard refresh that's when the bug happens let's look at username all right so username is undefined here so when we actually refresh the page there's something somewhere in the application dispatching this action creator let's look at the user settings page and try to figure out what is calling list user details so if i search the project or if i search this component or this page you'll see that it shows up once here right so since we have a effect kind of watching on username there is a chance that username is going to be null when the application loads and then later on username is set due to another request okay so you're not guaranteed that this is going to be always defined when this effect fires so what you want to do is you want to check so if username then you dispatch that okay so that will make it so that if somewhere else in the application maybe it's when the the main app component is loading it's gonna do a request to the back end to get your user information and then that's when you have username defined on your state and then this effect should re-fire off with the actual username so let's go back to the ui and refresh and now when i refresh the page notice we get back all the user information okay all right so we fixed all those synthetic bugs i added into our application i hope this was kind of useful for you all to understand how you might want to debug a react application and more specifically a larger scale react application you notice here there's quite a bit of components going on a lot of reducers a lot of action so there's a lot of things that you have to kind of look into but even if you don't know the project or you're new to the project i think some of the techniques i showed you such as like using this components plugin using the redux plugin using your network tab maybe even just using the element inspector you can quickly figure out where in the code base this component is defined and then you can start diving into the code from there to understand what's going on also the f12 to kind of jump around to where stuff is defined is really really useful remember that one and then also doing a full project search is super important especially when you're doing redux because this is an event based tool okay so it's really decoupled so you can't just do an f12 and dive into the red reducer to figure out where this is being used you kind of have to like make sure you actually search your reducers folder if you want to be more explicit you could say like only find the folders that are in files to include i could do like mumble run in slash door slash reducers maybe so if you want to be more explicit where you're trying to search things you do that um it really just depends on where you stored your reducers and stuff so yeah let me know if this was useful give me a thumbs up if you enjoyed watching this video be sure to leave a comment below if you have different ways you like debugging your react applications and like always if you're new to this channel be sure to click the subscribe button because i'm gonna have other videos like this in the future that should hopefully help you become a better web developer and react developer well have a good day and happy coding

Channel: Web Dev Junkie

Views: 727

Rating: 4.8947368 out of 5

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: UXDAp0ILOwg

Length: 21min 19sec (1279 seconds)

Published: Sun May 23 2021