JavaScript Navigator sendBeacon() Method

What You’ll Learn

navigator.sendBeacon() sends a small async HTTP POST for analytics without blocking the next page. Learn the boolean return value, visibilitychange best practice, the ~64 KiB limit, five examples, and try-it labs.

Introduction

Analytics often need to fire when the user leaves a page. Old tricks used synchronous XMLHttpRequest or delayed unload with image beacons — and made the next page feel slow.

sendBeacon(url, data) queues a small POST that the browser can finish in the background. Navigation stays snappy, and you still get a reliable chance to log the event.

Understanding the sendBeacon() Method

• URL required — relative or absolute endpoint that accepts POST.
• Data optional — string, Blob, FormData, URLSearchParams, buffers, etc.
• Returns boolean — true if queued, false if not.
• No response body — you cannot read the server reply (use fetch if you need it).
• ~64 KiB limit — keep payloads small.
• Does not block unload — designed for end-of-session analytics.

📝 Syntax

General forms of the method:

navigator.sendBeacon(url)
navigator.sendBeacon(url, data)

Parameters

• url — string URL that will receive the POST.
• data (optional) — body payload (string, Blob, FormData, URLSearchParams, ArrayBuffer, TypedArray, or DataView).

Return value

• true if the data was successfully queued; otherwise false.

MDN-style end-of-session pattern

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
});

Examples Gallery

Examples queue beacons to demo endpoints. In Try It Yourself, use a path on the same origin or a public test URL — the important part is the boolean queue result and the visibilitychange pattern.

const supported = typeof navigator.sendBeacon === "function";
console.log(supported ? "sendBeacon available" : "sendBeacon missing");

sendBeacon available

function pingAnalytics() {
  if (typeof navigator.sendBeacon !== "function") {
    return "sendBeacon not supported";
  }
  // Demo endpoint — replace with your analytics URL in production
  const queued = navigator.sendBeacon("/analytics", "event=page_ping");
  return "queued: " + queued;
}

console.log(pingAnalytics());

queued: true
(false if the browser could not queue the request)

const analyticsData = "session=end&ts=" + Date.now();

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    const ok = navigator.sendBeacon("/log", analyticsData);
    console.log("beacon on hide queued:", ok);
  }
});

console.log("Listening for visibilitychange (switch tab to test)");

Listening for visibilitychange (switch tab to test)
beacon on hide queued: true

function sendJsonBeacon(url, payload) {
  const body = new Blob([JSON.stringify(payload)], {
    type: "application/json"
  });
  return navigator.sendBeacon(url, body);
}

const ok = sendJsonBeacon("/analytics", {
  event: "click",
  path: location.pathname,
  t: Date.now()
});
console.log("json beacon queued: " + ok);

json beacon queued: true

const MAX_BEACON = 64 * 1024;

function sendAnalytics(url, data) {
  const asString = typeof data === "string" ? data : String(data);
  if (asString.length > MAX_BEACON) {
    return { ok: false, reason: "too-large" };
  }
  if (typeof navigator.sendBeacon === "function") {
    const queued = navigator.sendBeacon(url, asString);
    return { ok: queued, reason: queued ? "beacon" : "not-queued" };
  }
  // Fallback sketch for environments without sendBeacon
  try {
    fetch(url, { method: "POST", body: asString, keepalive: true });
    return { ok: true, reason: "fetch-keepalive" };
  } catch (err) {
    return { ok: false, reason: err.name };
  }
}

console.log(JSON.stringify(sendAnalytics("/analytics", "ok")));
console.log(JSON.stringify(sendAnalytics("/analytics", "x".repeat(70000))));

{"ok":true,"reason":"beacon"}
{"ok":false,"reason":"too-large"}

🚀 Common Use Cases

• Session analytics — log duration / last page when the tab hides.
• Error / diagnostics pings — ship a tiny crash summary without blocking unload.
• Feature usage — count button clicks that happen right before navigation.
• A/B metrics — record experiment assignment at leave time.
• Performance breadcrumbs — send a compact timing snapshot on hide.

📝 Notes

• Baseline Widely available (MDN, since April 2018).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Prefer visibilitychange; avoid unload / beforeunload for analytics.
• ~64 KiB queue limit; POST only; no response access.
• Related: setAppBadge(), canShare(), requestMIDIAccess(), Window.

💡 Best Practices