DEV Community

Discussion on: XHR not send to server on 'beforeunload' event in IE

Collapse
 
tom profile image
tom

I think your colleague was more-or-less right.

The HTML Standard says that beforeunload is there "in case the page would like to show a warning prompt".

Specifically, you can specify a message that the browser should show to the user before the page is closed just in case they didn't mean it:

window.addEventListener("beforeunload", function (event) {
  event.returnValue = "Don't leave! We only just met.";
});
Enter fullscreen mode Exit fullscreen mode

It isn't meant for doing (possibly long-running) asynchronous tasks like sending network requests.

The HTML5 spec has more detail, specifically around unloading documents.

It undergoes a complex set of tasks as the page unloads, including some network request cleanup, but it does allow for you to start an asynchronous network request in the beforeunload event handler — see item 4.

That said, I can't find anything specific about in-flight network request cleanup.

It seems likely that your requests works in Chrome because it takes a while to cleanup a document, but IE is faster (or just kills networks requests straight away).

Or, possibly, Chrome is reusing the document (yep, that's a thing) and allowing the request to continue, where IE is not.

This probably also has something todo with tasks and microtasks which is totally out of scope for this reply. The linked post is excellent if you'd like to know more.

All that said, beforeunload isn't the right place to be sending network requests, synchronous or not.


Bonus fact: we needed something like for TweetDeck.

To avoid the network request issue, we write the data we were planning to send into local storage, synchronously, in the beforeunload handler. Then, when the user opens TweetDeck again, we read the data back out of storage and send the request.

This only works for a specific kind of request — in our case, some code instrumentation — but it might work for you too!