As developers we have to communicate and ask for help in a different way than others.
Here we talk about how to debug your react and Node application and what to communicate when talking at others
Please show us what you got. Now today, what we're gonna do is talk about errors. So let's look at one of these errors here. I have this particular website. I just downloaded it. I'm getting an error on the back end, but that's okay. I'm getting in the front end, and when I click on it, I get get fetch, not found. Perhaps you're also getting something like a blank page, or the page you're showing is not necessarily blank. And I've seen too much of this. A page shows stuff, but one section where you expect your list of to do, or your list of restaurants, or your list of clowns, whatever it is, you're coming back to show up, and they're not. What I want to show you is how I would debug this issue. Follow along with me so we can't just go in and say, oh no, I checked it. Let me go check my developer. Yup, yup, yup. It's up, it's up. It's working. It's no problem. It's not it, it's not it help. Not at all. Please. You are the developer. You're going to be fixing this. This is why they pay us the big bucks. It isn't over any other reason. Let's go ahead and go to the inspector. Feel free to the first thing you do, go to the inspector. Any screenshots of a website not doing something without the inspector is truly cheating. Whoever you're trying to ask for help, when we are developers, we could first come in here and say, I'm seeing an error. Let me see if there's something that tells me what's going on. The awful course issue is happening here, and course usually means one of two things. It may mean your course is not set up. Let me find that. I'm going to come in here. I'm going to go to the website now, please excuse me. I have both the front end here and the back end together as a project. Don't get confused. It's different. It's no different than you having it on two different projects. I'm going to go to the index. I'm going to go look for that famous line, the course looks flawless. That's not it. So don't necessarily assume that's the case. The issue, when we get that request from the server, and the server fails or crashes, or you don't send the right information and doesn't know what to do, and also crashes or can come back, it will throw an error page. And that could be a course error, or it could be legitimately a course error because you have something that you're not allowed to happen. Let's see which one it is by looking at more than just these errors here. Definitely see what's going on. If it tells you what's going on next, I want you to come to the network tab. Okay, I'm going to scroll up now. The console log is still there. I'm going to press the escape key on the console log now hides. Okay, now I'm going to repeat now what was the air that we know the back end is failing at giving us? Again, I've confirmed the back end is running. There it is running. And of course, I have the front end running on a different window. You can understand the difference when you're going to two different visual studios. So it's running and I've checked it. So I'm going to go over to the browser and look for the network tab and look for something here. There is nothing in there because I have to it doesn't set it or remember this all the time, so you have to just check every so often. I'm going to click on sign up the one that was causing the problem. Again, I'm going to see the same error, but I'm also going to see a new line here. It does say of course, error. Okay, I'm going to click on it now. I'm going to go to headers. Now I'm going to start noticing certain things. I expected to be connecting to the local host. I'm going to remember that and say to myself, I'm testing my local host. And if I'm testing my local host, unless I know for absolute sure, and even if you don't, you normally would test with your local host API. Local host react local hostapi. You can test local host API up to the server, but you have to be absolutely sure the server is perfectly fine and you won't be able to do the next step. We're going to be doing. So local host to local host. The request URL is not local host, it's slash users. In fact, I'm going to copy this and you'll see why in just a second. Copy. It's telling me something else. I'm going to click on the payload and see if I get something back. Right, this is what I'm sending it cha cha cha. It's the password I'm sending with my email address. Well, that's not working. Let's see what the server came back. Well, it didn't come back with anything because there was a cord there and most likely the server crashed. So the first thing I have to remember is we're pointing to the API server up on the cloud. So if it is crashing, we should test it locally first. So I'm going to go to the front end, close the back end because I have it open, and open up the front end and click on Search if I know precisely what it is. It's this one here, create User. I can just go there. I'm going to hold the command key and click on Create User and see what's going on in here. But more importantly, I'm sorry, that was the back end. My sincere apologies. I haven't gotten there yet. Oh my goodness. There's my credentials. I'm going to go to the front end and click on Search. In the Search, I'm going to paste the URL that I showed you there. The pasted URL shows up in two different places. Here's another key. Remember that. And let me show you by getting rid of this URL, that the whole page may have several different versions of the API. So changing in one end would also not constitute the right idea. You may be going like, well, my login is showing my API. For some reason, my other endpoints don't show it. It's because it's hitting a different endpoint. And that's perfectly fine. We're interested in our case to debug just this one. Now in this one, because it was created by you guys, you have done a great job, which is one single line that I can switch between my published version of the API and my local host version of the API. Let's go ahead and save that. And what we'll notice is the page has reloaded. So here it is, the page loading. And now I'm going to come in here. In fact, if I wish. You don't have to clear it. I have fetched, by the way, networking fetch cleared. I'm going to now attempt the same work. Clicking on it goes to the same URL. But now I can see the URL is coming local. Okay, I'm getting an error. And that's good. I can see that it's coming back with a reply. So this is the payload. My chat chat, chat password looks good to me. It does come back to the reply. That means the server is replying. We're having something else. So that's when I would look into the server back end my apologies. Look into the server back in. And remember, scroll down to the bottom, stretch it out and see if you can read what the error is. There might be some errors. And what the rare error is, is irrelevant to this conversation because I can figure out what's going on, I have the wrong header, things like that. But next we're going to do is go into the server. We're going to go ahead and prove the obvious. We think that the app JS is being called. I'm sorry, that's the front end. Let me go to the back end. I'm going to go to the index. We're pretty sure this is coming in there. I'm going to come in here. I'm going to prove that's being called. So I'm going to come in here and I'm going to go console, log, email, password. Okay, so this moment I've gone a little bit further. I haven't fixed the problem, but at the very least, I've proven the obvious. I'm going to go down here and go CTRL command, K. It just wipes it out there. Or you can press Enter a couple of times. What I suggest is you do this so that you can see what's going on. We're not going to see the error, but at least we're going to prove that we're hitting the right server. Sign up again. We're getting the error and we're getting something information over there, right? It's a project problem. It is what's going on in my case. But what I wanted to showcase is I'm going to scroll up here and I'm going to see that I get the two messages there. That's my input. That's that console log I got there. And it sounds silly, I know, but trust me, and it will become quite obvious to you, I am proving that I'm getting this server over here. The error in my case is that I've cloned the project and I haven't changed it on the right place or set it up in the right place on my firebase. That's okay. It allows me to showcase to you that I was in the Inspector. If I were to send you a screenshot, I would say, look, I'm in the route in the last sign up page here you are looking to sign up page. I'm in the network tabs. This is the ply. This is my payload. I've confirmed it's the right payload. I've sent and I could see a reply back. So therefore, I know I'm hitting the server. I have a log of what's going on in here. And this is the screenshot of what the servers coming back from my console log here. And I can see that everything here below is what's giving us the problems. That kind of information is something we can help you, by the way, at that moment, you probably have rubber duct yourself that is, allowed yourself to see exactly what it is that the air is. If you were to Google this or ask around something or just send us this, that would be fine. It's important that you communicate dedicate this as a developer to the other developers. See you next time.