How to Ensure HTTP Requests Complete When Users Leave a Page

When a user navigates away from a page, browsers often cancel any pending HTTP requests, so data such as logs may never reach the server.

The reliability of these requests depends on network speed, server response time, and browser behavior, which can cause data loss for analytics.

One approach is to prevent the default navigation, send the request with fetch, await its completion, and then manually trigger the navigation.

document.getElementById('link').addEventListener('click', async (e) => {
  e.preventDefault();
  await fetch("/log", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: 'FedJavaScript' })
  });
  window.location = e.target.href;
});

However, waiting for the request can introduce noticeable latency, especially on mobile devices.

Modern browsers support the keepalive option in fetch, which allows the request to continue in the background even after the page starts unloading, eliminating the need to block navigation.

document.getElementById('link').addEventListener('click', (e) => {
  fetch("/log", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: 'FedJavaScript' }),
    keepalive: true
  });
});

Using keepalive ensures that logging data is reliably sent without affecting user experience.