Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

This site uses Umami as a self-hosted and privacy-first analytics tool. An item in Umami's changelog caught my eye – "Update tracker/index.js: SendBeacon() to Fetch API".

sendBeacon is a JavaScript method to send requests to an analytics server. These requests are supposed to be async, not be canceled and outlive the current navigation. But apparently, sendBeacon is sometimes blocked by ad blockers.

That's not a big deal, though, because today I learned I can drop sendBeacon from my memory entirely and use the fetch method with a keepalive option. 👇

fetch(`${root}/api/collect`, {
  method: 'POST',
  body: data,
  // note the `keepalive` option
  keepalive: true,

fetch with a keepalive option has the same characteristics as sendBeacon and acts as its replacement.

Don't confuse the keepalive fetch attribute with the Keep-Alive HTTP header.

This fact is good to know!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles