Browser JavaScript and Web Vitals Telemetry

Measurement path

A browser measurement crosses one controlled boundary

The browser never receives an ingestion key or chooses a destination table. Your server validates the small payload before forwarding an analytical event.

1
Measure
Collect an allowlisted Web Vital or bounded frontend outcome after consent.
2
Validate
Enforce origin, size, rate, field, route, and numeric-range rules.
3
Forward
Use the server-side key and one controlled event contract.
4
Review
Query samples and release trends with volume beside every aggregate.

Before you start

Prerequisites and boundaries

A same-origin server endpoint that can keep the Telemetry API key private
An allowlist for event names, fields, metric names, route templates, and numeric ranges
Documented consent, sampling, retention, and deletion behavior for browser measurements

Delivery setup

Install and initialize server-side

Import telemetry-sh in server-only code and initialize it once with process.env.TELEMETRY_API_KEY. Keep ingestion credentials out of browser bundles, client-visible environment variables, source control, logs, and exception messages.

browser-javascript-install

npm installation

bash

npm install telemetry-sh

1Prepare one reusable server-side delivery client with bounded network behavior.
2Add the outcome event at the success, failure, retry, or timeout boundary.
3Send controlled fixtures and inspect the stored rows before enabling an alert.

Snippet

Start with one structured event

Add this shape where the workflow completes, fails, or retries. Then build the dashboard from real fields.

browser-javascript

Browser JavaScript and Web Vitals Telemetry event

javascript

// Browser: post only allowlisted measurements to your own origin.
function reportMetric(metric) {
  navigator.sendBeacon("/api/browser-telemetry", JSON.stringify({
    event_name: "browser_performance_observed",
    metric_name: metric.name,
    metric_value: metric.value,
    metric_id: metric.id,
    route_template: routeTemplateFor(location.pathname),
    release: window.__APP_RELEASE__,
    navigation_type: metric.navigationType,
  }));
}

// Server: validate origin, size, rate, names, fields, and numeric ranges first.
await telemetry.log("browser_performance_observed", validatedMetric);

Event contract

metric_name, metric_value, metric_id, route_template, and release

navigation_type, device_category, sampled, consent_state, and environment

No raw URL, query string, DOM text, form value, cookie, referrer identifier, or client-supplied table name

Implementation checkpoints

Checkpoint 1

Send a small allowlisted payload to your own origin; validate origin, content type, body size, rate, event name, fields, and ranges before forwarding.

Checkpoint 2

Use route templates instead of location.href, and apply consent or opt-out rules before the browser sends any measurement.

Checkpoint 3

sendBeacon and keepalive fetch are best-effort. Keep sample count beside percentiles and never treat browser delivery as an exact ledger.

Verification

Prove the event arrived

Run this after exercising known success and failure cases. Replace the fallback table name if your final event contract differs from the snippet.

browser-javascript-verification

Browser JavaScript and Web Vitals Telemetry verification query

sql

SELECT *
FROM browser_performance_observed
ORDER BY timestamp_utc DESC
LIMIT 20;

Confirm one terminal row per logical outcome, with the expected status, identifiers, units, and UTC time.

Inspect the inferred schema and verify that retries do not change field types or generate a new logical event ID.

Search the stored fields for credentials, raw payloads, prompts, private content, and unbounded error messages.

Exercise a provider timeout, ingestion rejection, and process shutdown before treating the dashboard as complete.

Implementation references

Review the event contract, data-safety guidance, and upstream primary documentation before enabling a new production path.

Browser proxy and Web Vitals guide Frontend reliability with SQL Browser performance event schema GoogleChrome web-vitals MDN Beacon API

Production boundary

Keep the outcome event small and recoverable

This pattern provides

A bounded, SQL-ready outcome beside the upstream workflow.
Stable fields for dashboards, alerts, and cross-event correlation.
A fixture-driven path for validating success, failure, retry, and timeout behavior.

This pattern does not provide

An OTLP exporter, automatic collection pipeline, or replacement for detailed traces and diagnostic logs.
Exactly-once delivery merely because the payload contains an event ID.
Permission to collect raw provider payloads, user content, credentials, or regulated data.

Delivery and idempotency Batching and shutdown Troubleshoot ingestion

Event schema starting points

Review the row grain, emit boundary, required types, privacy classes, example payload, and validation checklist before adapting a query or snippet to production.

Frontend reliability8 fields