@liam-public/browser-telemetry

Frontend distributed tracing for the base CMS: W3C traceparent propagation so browser requests link to the backend's OpenTelemetry spans (@liam-public/node-nest-observability), plus Core Web Vitals — both shipped to an ingest endpoint.

Exports

• initTelemetry({ endpoint, app?, fetch?, webVitals? }) → { tracedFetch, reportSpan, reportVital }. Wires Web Vitals + a traceparent-propagating fetch, beaconing events to endpoint.
• createTracedFetch(baseFetch?, onSpan?) — wrap any fetch to inject traceparent and emit a client span per request.
• generateTraceparent() — a sampled W3C trace context.
• initWebVitals(report) — subscribe to CLS/INP/LCP/FCP/TTFB.

Usage

import { initTelemetry } from '@liam-public/browser-telemetry'
import { createAuthenticatedFetch } from '@liam-public/browser-react-auth'

const telemetry = initTelemetry({
  endpoint: '/ingest/telemetry',
  app: 'newsfeed-cms',
  fetch: createAuthenticatedFetch(authClient),
})

// Use telemetry.tracedFetch for API calls so spans link end-to-end:
const provider = createRestDataProvider({ baseUrl: '/api', fetch: telemetry.tracedFetch })

Backend: read the incoming traceparent header in your OTel middleware to continue the trace. web-vitals is a dependency; the tracing is framework-agnostic (no React required).