Seems I've hit a wall, not sure how to debug this one. I have a dashboard the user goes to after login in that makes 3 calls- one to get a list of faculty, one to get a list of their classes, and one to get whether they have advisees or not. The first two seem to be fine, but the third will sometimes return a 401, and sometimes it won't when in production. When testing locally, it seems to work as expected.

I tried a lot of things that didn't seem to work, but the one that fixed the issue was setting a timeout around the fetch. However, I didn't want to set an arbitrary timeout. Has anyone ran into something similar?

Here is how I'm making the calls:

    useEffect(() => {
    fetch(`${homePath}api/checklogin`, { credentials: "include" })
        .then((res) => {
            if (!res.ok) {
                throw new Error("Unauthorized - Redirecting to login");
            }
            return res.json();
        })
        .then(() => {
            setIsAuth(true);
        })
        .catch((err) => {
            console.error("Login Check Failed:", err);
            setIsAuth(false);
            window.location.href = homePath;
        });
}, []);

// get faculty list
useEffect(() => {
    if (!isAuth) return;

    fetch(`${homePath}api/getfacultylist`, {
        credentials: "include"
    })
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            setFacultyList(data.faculty);
            if (data.faculty.length > 0) {
                setSelectedFaculty(data.faculty[0]);
            }
        })
        .catch((err) => console.error("API Error (Faculty List):", err));
}, [isAuth]);

// get faculty classes
useEffect(() => {
    if (!selectedFaculty) return;
    setIsLoading(true)
    fetch(`${homePath}api/getfacultyclasses?facultyName=${selectedFaculty}`, {
        credentials: "include"
    })
    .then((res) => {
        return res.json();
    })
    .then((data) => {
        setCourses(data.className || []);
    })
    .catch((err) => console.error("API Error (Faculty Classes):", err))
    .finally(() => setIsLoading(false));

    fetch(`${homePath}api/hasadvisees?facultyName=${selectedFaculty}`, {
            credentials: "include"
        })
        .then((res) => {
        if (!res.ok) {
            console.log("RES NOT OKAY: " + res);
            }
        console.log("RES OKAY: " + res)
        return res.json();
    })
    .then((data) => {
        setHasAdvisees(data.HasAdvisees);
    })
    .catch((err) => console.error("API Error (Faculty Advisees):", err));
}, [selectedFaculty]);

Backend is using claims based authentication and everything is under the same controller with an [Authorize]. I've done something similar on another application with no problems, so I don't have reason to believe it's the way that's set up.