@sophonz/instrumentation-webvitals

한국어

Captures Google Web Vitals (CLS, LCP, FCP, TTFB, INP) and reports them as OpenTelemetry spans and metrics for monitoring core web performance.

Part of the Sophonz OpenTelemetry suite.

Install

bun add @sophonz/instrumentation-webvitals
# or
pnpm add @sophonz/instrumentation-webvitals
# or
npm install @sophonz/instrumentation-webvitals

Usage

import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { SophonzWebvitalsInstrumentation } from '@sophonz/instrumentation-webvitals';

registerInstrumentations({
  instrumentations: [
    new SophonzWebvitalsInstrumentation({
      screenNameOption: 'full', // optional
    }),
  ],
});

The instrumentation auto-registers and listens to all Web Vitals callbacks from the web-vitals library.

API

| Export | Purpose | |--------|---------| | SophonzWebvitalsInstrumentation | Observes web-vitals callbacks (onCLS, onLCP, onFCP, onTTFB, onINP) and creates spans/metrics. | | SophonzWebvitalsInstrumentationConfig | Config interface with optional screenNameOption. |

Metrics tracked: FCP (First Contentful Paint), TTFB (Time to First Byte), CLS (Cumulative Layout Shift), LCP (Largest Contentful Paint), INP (Interaction to Next Paint).

Peer dependencies

• @opentelemetry/api ^1.9.1
• @opentelemetry/instrumentation ^0.217.0
• web-vitals ^5.2.0

License

See LICENSE in this package.

Part of sophonz-js.