Using the Beacon API for Front‑End Log Reporting

The author, a W3C Performance Working Group member and senior front‑end engineer at 360 Navigation, discusses front‑end log reporting in complex applications.

To monitor errors and performance, front‑end code collects data and sends it to a server. Various methods can be used, such as xhr, fetch, script tags, img tags, link tags, and CSS background images.

The most common approach today is to use the src attribute of an img tag to fire a request, for example:

(new Image()).src = `/haopv.gif?a=xx&b=xxx`;

This works because log reporting does not need a response; the request can be sent cross‑origin without CORS issues. However, log reporting is low‑priority and should not compete with high‑priority operations like resource loading, user input handling, or animation.

Sending each log entry immediately improves delivery reliability but may insert additional tasks into the JavaScript event loop, potentially stealing time from critical work and degrading user experience.

The solution is to use the Beacon API, which provides asynchronous, non‑blocking data transmission, minimizing contention with other tasks while guaranteeing that the browser queues the request for delivery.

Beacon (sendBeacon) sends data asynchronously, ensuring that the request is processed even when the page is unloading. Its advantages include:

Beacon requests avoid competing with high‑priority network requests.

They can be merged to reduce energy consumption on mobile devices.

They are guaranteed to be started before page unload and will not block user interactions.

Using Beacon is straightforward:

var data = JSON.stringify({name: 'Berwin'}); navigator.sendBeacon('/haopv', data);

Parameters:

url : the target endpoint for the report.

data : the payload to be sent.

Return value : true if the user agent successfully queued the request, false otherwise.

Note that Beacon is not supported in all browsers, so feature detection is required. All Beacon requests use the POST method and cannot be altered.

Summary : Log reporting in production must balance low priority with reliable delivery. To avoid consuming business‑critical resources and to ensure data reaches the server, the Beacon API is the preferred method.