Browser JavaScript and Web Vitals telemetry

What to record and check

Send browser measurements through your server

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
After consent, collect only the Web Vitals or frontend result fields you have approved.
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

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

1Create one reusable server-side client. Set its timeout and retry limit.
2Log an event when the operation succeeds, fails, retries, or times out.
3Send test events with known results 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 schema

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

Check your setup

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

Where to log

Keep the outcome event small and recoverable

This pattern provides

Record the outcome as an event you can query with SQL.
Stable fields for dashboards, alerts, and cross-event correlation.
Test events for checking success, failure, retries, and timeouts.

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

Example event schemas

Check what each event records, when to send it, and which field types it needs. Review the example payload and privacy checklist before using it in production.

Frontend reliability8 fields