sendBeacon in JavaScript

Have you ever needed to transmit information to the server when the user navigates to a different page? 🧐

When a user exits a page, the unload and beforeunload events are triggered.

We can use either the XMLHttpRequest or fetch method to send information to the server when these events occur.

However, the limitation is that you cannot send information to the server using the fetch method or XMLHttpRequest when the user navigates away from the page

what happens is the browser takes a look at the fact that it's leaving this page and says i don't have time to do fetch or XMLHttpRequest.

so your request get rejected ... 😣

but with sendBeacon method from the navigator object , we can actually do the call!

notice: we're not going to get a response back from the server and that's okay.

notice: the sendBeacon method only returns boolean which means if the data successfully sent to the server we receive true and if not we receive false value

let's dive into the code: 🏊🏻

here is a simple express server that i created to get the data from the browser:

as you can see i created a route called : '/analytics' with POST method. but why?

notice : the sendBeacon method sends the data with HTTP POST method and uses Content-Type:text/plain;charset=UTF-8 to transmit string data.

so in order to get the data from the server we need to utilize the express.text() middleware inside our server :

after that we have access to the data via req.body

notice : if you want to add Content-Type:application/json header in your request , you can use *blob *:

let blob = new Blob(data , {type: 'application/json;charset=UTF-8'});
navigator.sendBeacon(url , blob);

for the front side of our example code i created a file called index.html :

i provided a link to a page called : other.html
and I've added an unload event listener to the window object so that means any time i click on the link to go to other.html, this code is going to be triggered:

we are going to call the fetchData function and inside this function we are using the actual fetch method just to see what happens...

so we are not going to able to actually send the request here and we are not gonna get a response.

if you click on the link you'll see this:

you can see here that the status of call to /analytics endpoint was *cancelled * and it was cancelled because the browser unloaded the page.

let's try sendBeacon method this time :

this time if you navigate to other.html page at your server terminal you'll see :

and in your browser you will see that the status of your request changed to pending instead of cancelled!

that is pretty much i have learned from this method 😁
let me know what you think 🧐

Comments

[Edmundas Ramanauskas]

great article.
but I would suggest to always include links to official documentation. for WEB APIs it's MDM Web Docs.
and there it says that one should avoid using unload and beforeunload events.

[Ali nazari]

Thanks for the feedback!
I truly appreciate this feedback because I got so excited about writing about this feature that I completely forgot to include the links. 😁

[ali fallahi]

Well done 👍

[Ali nazari]

thank you for your feedback 🫠