Blueprint

System Data Flow

Entry Point

Process Node

Data Store

Output

Productionv1.1.0

Global Telemetry Monitor

Observability / Performance

A zero-dependency, tree-shakeable observability module that registers PerformanceObserver listeners for Core Web Vitals (LCP, CLS, FID), buffers the events, and flushes them to a configurable analytics endpoint via navigator.sendBeacon on page hide.

Logic Breakdown

The module initializes three PerformanceObserver subscriptions against the `largest-contentful-paint`, `layout-shift`, and `first-input` entry types with `buffered: true` to catch pre-initialization events. Each entry is normalized into a structured JSON object and staged in an in-memory buffer. The `visibilitychange` event triggers a beacon flush, ensuring no telemetry is lost during tab switches or navigation.

Architecture Decisions

01PerformanceObserver registered for LCP, CLS, and FID with `buffered: true` to capture retroactive entries.
02Each entry normalized to a structured payload: `{ type, name, value, ts }`.
03In-memory buffer accumulates events between flushes to avoid per-event network calls.
04`navigator.sendBeacon()` on `visibilitychange: hidden` guarantees delivery without blocking unload.

Code Snippet

typescript

global-telemetry-monitor.ts

export function initTelemetry(endpoint: string) {
  const buffer: unknown[] = [];

  const flush = () => {
    if (!buffer.length) return;
    navigator.sendBeacon(endpoint, JSON.stringify(buffer.splice(0)));
  };

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      buffer.push({
        type: entry.entryType,
        name: entry.name,
        value:
          (entry as PerformanceEventTiming).processingStart ??
          entry.startTime,
        ts: Date.now(),
      });
    }
  });

  observer.observe({ type: "largest-contentful-paint", buffered: true });
  observer.observe({ type: "layout-shift", buffered: true });
  observer.observe({ type: "first-input", buffered: true });

  window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") flush();
  });

  return { flush, observer };
}

Key Dependencies

PerformanceObservernativeCore Web Vitals collection

navigator.sendBeaconnativeNon-blocking flush to analytics endpoint

visibilitychange eventnativeFlush trigger on tab hide / navigation

Known Limitations

`navigator.sendBeacon` payload is capped at ~64 KB — batch-flush if session volume is high.
FID is deprecated in favour of INP in newer browsers; a v1.2 upgrade will add INP support.

Technical Spec

Vitals: LCP · CLS · FID
Flush Mode: Beacon API
Trigger: visibilitychange
Buffer: In-memory array
Language: TypeScript 5.x
Bundle Size: ~0.8 kB gzip
Deps: Zero
Status: Production