1

I have a feature that loads a map onto a page, and 5% of the time I'm hit with a 403 error and the map data doesn't load properly. I've had a very difficult time with triggering the error, but I was able to catch it and take screenshots (see below).

When the page refreshes, a GET request occurs that loads the right data, and then a POST request occurs that loads the right map. There are multiple pages, each with their own content and maps, and a user can easily navigate between pages.

i.e. When the Mordor page loads, the data for the Mordor map loads simultaneously. When I navigate to the Lothlorien page, the data for the Lothlorien map loads.

Any thoughts on what's causing this? As I said, although this error happens rarely I do want to get to the bottom of it, in order to prevent future complications down the line.

Notes:

  • I used to have an issue to where the 403 error happened frequently (if the page was idle), but I resolved it by doing a if resp.status === 403, window.location.reload. That fixed the problem, but I've wondered if the issue I'm experiencing now is related to it and "leaking through", so to speak.

  • webpack-internal shows up in the console (see screenshots), but searching for 403 errors with webpack comes up short.

  • I'm using empty() throughout the project, so that the old data doesn't remain on the page.


async function loadMaps(){
    let ret = axios.post( // ${location} is referenced at an earlier point, and always works
        `${_Something}/something/_api/web/lists/getbytitle('Middle Earth Maps')/GetItems`,{
        "query": {"__metadata": {"type":"SP.CamlQuery"}, "ViewXml": `<View><Query><Where><Eq><FieldRef Name='MiddleEarthMaps'/><Value Type='TaxonomyFieldType'>${location}</Value></Eq></Where></Query></View>`}
        }, {
            method: "POST",
            credentials: "include",
            mode: "no-cors",
            headers: {
                "Accept": "application/json;odata=verbose",
                "Content-Type": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            }
    }).then(resp => {
        console.log(resp.status)
        // in here there's other code that behaves as intended (95% of the time)
    }).catch(err => {
        if (err.status === 401 || err.status === 403) { // I use this for the main page of the project, and it works as intended
            window.location.reload();
        }

        console.log("Error during loadMaps");
        console.log(err);
        return false;
     });
    return ret;
}

403 in the console

The debugger

Local in the debugger

0

I had a chat with a senior dev, and although they're not 100% sure of the cause they believe it had to do with the POST request and a timing delay.

We converted the POST to a GET and installs a package that reloads the page if an axios call fails a certain number of times.

The problem hasn't happened since, and I hope it stays that way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.