DEV Community

Cover image for sendBeacon in JavaScript
Ali nazari
Ali nazari

Posted on

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:

express server

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 :

express.text()

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);


Enter fullscreen mode Exit fullscreen mode

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

front side

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:

unload event

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:

fetch result

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 :

sendBeacon method

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

server result

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 🧐

Top comments (4)

Collapse
 
edmundasramanauskas profile image
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.

Collapse
 
silentwatcher_95 profile image
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. 😁

Collapse
 
alifallahi profile image
ali fallahi

Well done πŸ‘

Collapse
 
silentwatcher_95 profile image
Ali nazari

thank you for your feedback πŸ«