@dash0/sdk-web/dist/modules/instrumentations/web-vitals.js

Dash0's Web SDK to collect telemetry from end-users' web browsers

import { onLCP, onINP, onCLS } from "web-vitals";
import { EVENT_NAME, EVENT_NAMES, LOG_SEVERITIES } from "../semantic-conventions";
import { nowNanos, roundToTwoDecimals } from "../utils";
import { sendLog } from "../transport";
import { addAttribute } from "../utils/otel";
import { addCommonAttributes } from "../attributes";
export function startWebVitalsInstrumentation() {
    onLCP(onWebVital, { reportAllChanges: true });
    onINP(onWebVital, { reportAllChanges: true });
    onCLS(onWebVital, { reportAllChanges: true });
}
function onWebVital(metric) {
    const attributes = [];
    addAttribute(attributes, EVENT_NAME, EVENT_NAMES.WEB_VITAL);
    const bodyAttributes = [];
    addAttribute(bodyAttributes, "name", metric.name);
    addAttribute(bodyAttributes, "value", roundToTwoDecimals(metric.value));
    addAttribute(bodyAttributes, "delta", roundToTwoDecimals(metric.delta));
    const log = {
        timeUnixNano: nowNanos(),
        attributes: attributes,
        severityNumber: LOG_SEVERITIES.INFO,
        severityText: "INFO",
        body: {
            kvlistValue: {
                values: bodyAttributes,
            },
        },
    };
    addCommonAttributes(log.attributes);
    sendLog(log);
}