Web Vitals Telemetry

This project provides a library for gathering, transforming and exporting web vitals metrics in any JS environment to a telemetry backend. The following metrics are collected and sent to the telemetry backend:

• CLS (Cumulative Layout Shift)
• FCP (First Contentful Paint)
• FID (First Input Delay)
• LCP (Largest Contentful Paint)
• TTFB (Time to First Byte)

Installation

With npm:

npm install @web-services-inmusic/web-vitals-telemetry

With yarn:

yarn add @web-services-inmusic/web-vitals-telemetry

Usage

Import the library:

import { reportWebVitals } from "web-vitals-telemetry"

In the root of your project, call the reportWebVitals function with a configuration object.

reportWebVitals({
  serviceName: "my-service",
})

Configuration

The following properties are supported:

• serviceName: The name of the service to report metrics for.
• exportIntervalMillis: The interval at which to export metrics to the telemetry backend in milliseconds. Defaults to 10000.
• url: The URL of the telemetry backend to export metrics to. Defaults to http://localhost:4318.
• debug: Whether to enable debug logging. Defaults to false.

Accessing the Library

The latest version can be accessed at web-vitals-telemetry on NPM. All versions of this package are also automatically distributed on unpkg. For the latest version, the file can be accessed from https://unpkg.com/[email protected]/dist/index.umd.js.

Individual versions can be accessed from npm, e.g. https://www.npmjs.com/package/web-vitals-telemetry/v/1.0.0 and unpkg, e.g. https://unpkg.com/[email protected]/dist/index.umd.js.