Search code examples
javascriptfirefoxfetchabort

NetworkError on Firefox when aborting request before completion

I'm doing something like:

fetch(url, ...)
.then(...)
.catch(e => {
  // Handle error here
});

On Firefox, however, whenever I navigate to a another page too quickly (ie. without all requests finishing), it will throw an error, which will trigger error handling in the UI

TypeError: "NetworkError when attempting to fetch resource"

I've found the discussion around this topic here, but it falls short of providing a workaround for the time being.

https://bugzilla.mozilla.org/show_bug.cgi?id=1280189

Wondering if there is any way to detect an abort by the browser, and handle it gracefully.

I've seen similar questions, but all those seem to be related with CORS, and are a different problem that this one.

Edit: reproduction in the before mentioned ticket:

window.onbeforeunload = function(event) {
console.log("navigating away")

};
console.log("starting")
fetch("https://jsfiddle.net/").then(x => {
  console.log("fetched")
}).catch(e => {
  console.log("caught", e)
})
window.location = "https://jsfiddle.net/";

Returns:

caught TypeError: "NetworkError when attempting to fetch resource."
Solution

  • After some back and forth I managed to implement Inch High abort controller approach - developer.mozilla.org/en-US/docs/Web/API/AbortController