Axios requests randomly stop working

[zanabilis]

I’ve got a MERN chat app that I’m trying to make for my resume, but a problem that I’m running into is that if I change between my profile page and chat page a couple of times, the Axios request that is sent will not be received by the server. This is somewhat fixed by manually refreshing the page, but doesn’t resolve it happening over time. The initial requests function normally, but over time, my server stops receiving requests from that specific client.

Github repository: GitHub - CardinalCyn/ChatApp

The relevant files should be in the server routes.js, with the check session route, as well as in the client, at the profile page axios request.

app.get("/checkSession",async (req,res)=>{
        console.log("checked");
        if(req.session.user){
            return res.json({loggedIn:true, user:req.session.user});
        }
        else{
            return res.json({loggedIn:false});
        }
    })

Clientside code:

Axios.defaults.withCredentials=true;
    useEffect(()=>{
        console.log("checking session");
        Axios.get("https://192.168.1.192:5000/checkSession").then((response)=>{
        console.log(response);
            if(!response.data.loggedIn){
                navigate("/");
            }
            else{
                console.log(response.data);
                setProfileName(response.data.user.username);
            }
        
        }).catch((err)=>{
            console.log(err);
        })
    },[navigate])

[lasjorg]

navigate is a function, I don’t think you want to use that for the useEffect dependencies array.

Is the useEffect not just supposed to run on mount? The components should get mounted/unmounted between navigations so I’d think all you want is an empty array for the dependencies.

---

As an aside, exact is not a thing in react router V6

React Router | Upgrading from v5

[zanabilis]

I added navigate as a dependency just because I would get a warning in the terminal stating that it was missing it as a dependency if I used an empty dependency. Even if I empty out the dependency array, or use no dependency array at all, the issue continues to occur consistently. The code still just runs once, only when the page is loaded. The code in the block still seems to run, as when I add a console.log statement in the useEffect block, it will still print out. Once the client is in this state, even if I navigate to the chat page, it will not receive any data from the server. For some reason, it seems as though the Signin page is not subject to this, even though it goes through the same exact route as the other two pages. Is there some sort of error handling I can do with Axios?

[zanabilis]

It seems as though my requests are being made, as in the network tab, the requests are shown, but are pending, rather than successful compared to the same requests being successful.

[zanabilis]

Looks like I figured it out, I forgot to send a response from my server to the client when they posted requests, so that caused the requests afterwards to be stuck in pending.