Reliable Client Telemetry Flushing Using navigator.sendBeacon and VisibilityState

In real-time mobile web applications tracking session metrics, UI performance data, and transaction audit trails, flushing queued analytics during page navigation or tab closure is notoriously fragile. Relying on synchronous XMLHttpRequest or standard asynchronous fetch calls inside unload or beforeunload event listeners frequently triggers browser cancellation or blocks thread execution.

To guarantee asynchronous, non-blocking telemetry transport during lifecycle state changes, combine the visibilitychange event with the native navigator.sendBeacon API:

// telemetry/beaconDispatcher.js
export class ResilientTelemetryQueue {
  constructor(endpointUrl, maxBatchSize = 10) {
    this.endpointUrl = endpointUrl;
    this.maxBatchSize = maxBatchSize;
    this.eventBuffer = [];

    this.initLifecycleListeners();
  }

  enqueueEvent(eventType, payload) {
    this.eventBuffer.push({
      type: eventType,
      data: payload,
      timestamp: Date.now()
    });

    if (this.eventBuffer.length >= this.maxBatchSize) {
      this.flushQueue();
    }
  }

  flushQueue() {
    if (this.eventBuffer.length === 0) return;

    const payloadString = JSON.stringify(this.eventBuffer);

    // Prefer navigator.sendBeacon for non-blocking asynchronous transmission
    if (navigator.sendBeacon) {
      const blob = new Blob([payloadString], { type: 'application/json' });
      const transmitted = navigator.sendBeacon(this.endpointUrl, blob);
      if (transmitted) {
        this.eventBuffer = [];
        return;
      }
    }

    // Fallback using fetch with keepalive flag enabled
    fetch(this.endpointUrl, {
      method: 'POST',
      body: payloadString,
      headers: { 'Content-Type': 'application/json' },
      keepalive: true
    }).then(() => {
      this.eventBuffer = [];
    }).catch((err) => console.warn('Telemetry transmission error:', err));
  }

  initLifecycleListeners() {
    // Rely on visibilitychange rather than brittle unload events
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.flushQueue();
      }
    });
  }
}

// Example usage: monitoring mobile session events
export const sessionAuditor = new ResilientTelemetryQueue('/api/v1/telemetry/ingest');

export function trackUserInteraction(componentId, actionName) {
  sessionAuditor.enqueueEvent('USER_INTERACTION', { componentId, actionName });
}

Key Engineering Advantages:

• Guaranteed Out-of-Process Delivery: The browser handles beacon delivery in the background even if the originating page context has already been unmounted.

• Zero UI Thread Stalls: Eliminates synchronous network requests during page unload, ensuring fluid transitions between views.

For an operational reference of decoupled, low-footprint web viewports running in production, inspect this reference node.