Debug React Router Applications with Custom Logs using react-router-devtools

00:00 Hey there, today I have something really exciting to show you and that's how to debug your React Router apps. And we're gonna be using React Router DevTools, the tool I made to debug your React Router. And I already prepared an example for us and I'll show you how to use custom logs to figure out where the issue is and to easily find the bug in your codebase. So if you look at the example here you can see that I've added this subtitle and it says subtitle with Zod and Remix and some numbers 1 2 3 4. Now this comes from the server and it's rendered on the client.

00:35 And now let's say we get a feature request to change this title to remove all vowels, to remove all uppercase letters, and to remove all numbers. Don't ask me why we got that feature request, we just did and now we gotta do it. So how are we gonna do that? Well because we're using the Epic stack as the example repository, what we're gonna do first is we're gonna install React Router DevTools and we're gonna do that as a dev dependency so when we install this as you can see it's been added to our project and now what we're gonna do is we're gonna open the vidconfig and in the vidconfig we will first import the react router dev tools from the react router dev tools obviously and then we can just head on down over here and then just plop it in into the plugins array and save it. And now we have React Auto DevTools running in our project.

01:31 Now let's run our dev server. I'm gonna clear this and then I'm gonna run npm run dev and as you can see everything gets started and now we're running on localhost 3000 and we get these custom logs from the Reactor autodev tools. We're not gonna go into them but the only thing you need to know is they wrap every loader and action and give you some useful information. Alright with that out of the way let's implement the feature we got. So if you don't remember we said we're removing vowels, numbers and uppercase letters from our title.

02:01 So I already prepared the example here and as you can see it's here so in the marketing index route if I scroll up here you can see it's just returned from a loader from the server and then it just passed in here and rendered. So because we want to remove what we just said there are two ways of doing it either in the loader or in the component but I'm gonna do it in the component directly so we're gonna do remove numbers and then we want to wrap this with remove vowels and then we're gonna wrap this with remove uppercase and we're gonna save this and perfect our feature has been implemented or has it let's check the browser now as you can see the title has changed And if you look at it closely, it removed all the vowels, and it removed all the numbers, but if you can see here, it didn't remove the uppercase Z. So why is that? Well, let's figure it out together. And let's go over the code and see what's going on so because we use these three functions I've already prepared some console logs for us that are gonna help us debug where the issue comes from so the first one is remove numbers and logs the string so we get the input string and that's what we want to check if it's inputted correctly and then we go into the second function that is remove vowels we also console.log the input string here as well but because the uppercase is not working, we don't really want to deeply go into these two, but we suspect the error is coming from the uppercase removal.

03:39 So we go here and we console.log before and after the replacement. And that's what we're doing. And as you can see, we wrap the title with all of these and because we go in a certain order we're gonna check the console in the browser. What I'm gonna do now is I'm gonna open up the dev tools I'm gonna go to console and as you can see we get a bunch of these cool little logs and the first part is The part that allows you to open it in your VS code instance when it's logged in the terminal But the second part here when you click it from the browser it's going to take you directly to the function line in the VS Code and indeed if I wanted to open up the remove uppercase all I had to do was I would have to scroll and find it here in the console. And for example, the log that we're looking for is here.

04:37 And we're going to click this link. And it's opened up in VS Code. And now we can look at the input string and figure out where the bug is. And because we looked at the uppercase string and we saw that it didn't remove Z now we look at this implementation and we figure out oh it's from A to T and either chat.gpt wrote this or I don't know the alphabet It's one or the other and you'll never know which one it is. So all I have to do is I remove the T and put it to Z.

05:09 I save this and we should have a bug-free application. So if we go back to the browser and if I close this you can see that the Z in the width Zod is actually removed now which means we successfully debug their application using the custom log and if you're wondering if this works on the server too, All we have to do to check is remove this from here and set it as subtitle and then we scroll up to our loader And then here we just return the subtitle like this And now if I save this and if I enlarge this you can see that again, we get all of these logs and now if I click on this it's gonna take me to the file location if I click on this it's gonna take me to the file location if I click on this it's gonna take me to the file location and because I said it three times I think you get it but either you open it with the first one in your VS Code via terminal or with the link via browser and this link also works in the terminal so if I click ctrl click as you can see it's changed the VS Code file that was open and it showed me what I needed to see.

06:17 And that's pretty much it for this video. I've shown you how to use custom logs to debug your apps and figure out where the bug is coming from. Thank you for watching and see you in the next one. Bye!