jQuery AJAX fires error callback on window unload - how do I filter out unload and only catch real errors?

user_83810 0
Viewed 8537

If I navigate away from a page in the middle of an $.ajax() request it fires the error callback. I've tested in Safari and FF with both GET and POST requests.

One potential solution would be to abort all AJAX requests on page unload, but the error handler is called before unload, so this doesn't seem possible.

I want to be able to handle REAL errors such as 500s gracefully on the client side with a polite alert or a modal dialog, but I don't want this handling to be called when a user navigates away from the page.

How do I do this?

--

(Also strange: When navigating away from a page, the error handler says that the textStatus parameter is "error", the same it throws when receiving a 500/bad request.)

jquery xmlhttprequest ajax javascript
6 Answers

Just wait a while before showing the error. If a request fails due to page unload, the timeout won't fire and the error won't be shown. My experiments have shown that 100ms is enough for desktop Safari and Firefox (desktop and Android) and 500ms is enough for iOS Safari. The durations are fuzzy, so you should increase the numbers if it's possible.

const request = new XMLHttpRequest();

// Firefox calls onabort, Safari calls onerror
request.onabort = request.onerror = () => {
  // A short comprehensive solution
  setTimeout(() => {
    alert('The request has failed completely');
  }, 500);

  // A more gentle solution
  const isWebKit = 'ApplePayError' in window;
  const isDesktopSafari = !('standalone' in navigator);
  const isGecko = 'mozInnerScreenX' in window
  setTimeout(
    () => {
      alert('The request has failed completely');
    },
    isWebKit ? (isDesktopSafari ? 100 : 500) : (isGecko ? 100 : 0) 
  );
}

request.open('get', 'http://example.com', true);
request.send();

I've checked this solutions only in modern browsers (Chrome 87, Firefox 83, IE 11, Edge, Safari 14).

user_11187090
Related