Published at
Updated at
Reading time
1min
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 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.