Javascript Fetch returns 404 occasionally

Question

We are finding that occasionally our .fetch command is returning a 404. Even though the file exists and is hit regularly sometimes it's receiving a 404.

window.fetch('/category/somepage', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(app.addAntiForgeryToken(postData))
  })
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok');
  })
  .then(result => {
    if (result.Status === 'OK') {
      //...
    }
  })

At the moment it is being caught with the throw new Error.

As we need this to resolve, what is the best way to force try this again until the page is hit? Should we show a button for retry or is there a way to loop this? I'm not sure why this would even throw a 404 as the file definitely exists all the time.

Possible duplicate of [fetch retry request (on failure)](https://stackoverflow.com/questions/46175660/fetch-retry-request-on-failure) — r g, Apr 12 '19 at 12:03
How did you determine it was actually a 404 in the first place? — 04FS, Apr 12 '19 at 12:10
Have you checked the server-side end to see why this happens then? Perhaps this deliberately responds with a 404 to signal that no results where found for the given search query(?) or something like that. — 04FS, Apr 12 '19 at 12:42
Yeah, it's strange for sure. It's a static page we just hit and we know it exists and always does. Just sometimes it 404s. We will investigate the server side to see if there are any findings too. — StuartM, Apr 12 '19 at 12:45
What webserver is that and is there a sub-status code besides the error code, or perhaps a header containing the actual error? — Salman A, Apr 12 '19 at 12:46
Problem is its difficult to reproduce its so sporadic. I'll see what I can find — StuartM, Apr 12 '19 at 12:48

T.J. Crowder · Answer 1 · 2019-04-12T12:27:03.093

The classic thing to do here is to retry the operation, because network communications can be unreliable, particularly on mobile devices. But transient 404s are a different issue, and point to a problem with the web server that may need separate diagnosis. (For instance: If it's a cluster of web servers acting as a single endpoint, one of them may be misconfigured and thus not finding a resource the rest of them can find.)

But for transient failures, the classic thing is a retry:

function fetchJSONWithRetry(input, init, retries = 10) {
    return fetch(input, init)
        .then(function(response) {
            if (response.ok) {
                return response.json();
            }
            throw new Error('Network response was not ok'); // I usually use `new Error("HTTP status " + response.status)`
        })
        .catch(error => {
            if (retries <= 0) {
                throw error;
            }
            return fetchJSONWithRetry(input, init, retries - 1);
        });
}

used like this:

fetchJSONWithRetry('/category/somepage', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(app.addAntiForgeryToken(postData))
})
.then(result => {
    if (result.Status === 'OK') {
        // ...
    }
})
.catch(error => {
    // All retries failed, handle it
});

(input and init are the names used by the spec for fetch, so that's what I used above.)

@StuartM - No worries (BTW, I realized I'd been silly, updated the answer). Network communications, particularly on mobile devices, can be unreliable, so you might need retries for that reason. But transient 404s are not common, no, and point to a problem with the web server. — T.J. Crowder, Apr 12 '19 at 12:13
Maybe you want to add the reason and rationale behind this strange phenomenon for the benefit of other readers — Kunal Mukherjee, Apr 12 '19 at 12:21
@KunalMukherjee & Archer - I've folded that into the answer. :-) — T.J. Crowder, Apr 12 '19 at 12:27

Javascript Fetch returns 404 occasionally

1 Answers1

Linked