@obtrace/browser 1.0.0

package/dist/browser/vitals.js

@@ -0,0 +1,81 @@
+import { getElementSelector } from "./breadcrumbs";
+export function installWebVitals(meter, reportAllChanges) {
+    if (typeof window === "undefined" || typeof PerformanceObserver === "undefined") {
+        return () => undefined;
+    }
+    const fcpGauge = meter.createGauge("web_vital_fcp_ms", { unit: "ms" });
+    const lcpGauge = meter.createGauge("web_vital_lcp_ms", { unit: "ms" });
+    const clsGauge = meter.createGauge("web_vital_cls", { unit: "1" });
+    const inpGauge = meter.createGauge("web_vital_inp_ms", { unit: "ms" });
+    const ttfbGauge = meter.createGauge("web_vital_ttfb_ms", { unit: "ms" });
+    const cleanups = [];
+    const observe = (type, cb) => {
+        try {
+            const observer = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    cb(entry);
+                    if (!reportAllChanges)
+                        break;
+                }
+            });
+            observer.observe({ type, buffered: true });
+            cleanups.push(() => observer.disconnect());
+        }
+        catch {
+            return;
+        }
+    };
+    observe("paint", (entry) => {
+        if (entry.name === "first-contentful-paint") {
+            fcpGauge.record(entry.startTime, { vital: "fcp" });
+        }
+    });
+    observe("largest-contentful-paint", (entry) => {
+        const lcp = entry;
+        const attrs = { vital: "lcp" };
+        if (lcp.element) {
+            attrs["lcp.element"] = getElementSelector(lcp.element);
+        }
+        lcpGauge.record(entry.startTime, attrs);
+    });
+    observe("layout-shift", (entry) => {
+        const ls = entry;
+        if (ls.hadRecentInput)
+            return;
+        const attrs = { vital: "cls" };
+        if (ls.sources && ls.sources.length > 0 && ls.sources[0].node) {
+            attrs["cls.element"] = getElementSelector(ls.sources[0].node);
+        }
+        clsGauge.record(ls.value ?? 0, attrs);
+    });
+    const interactionDurations = new Map();
+    observe("event", (entry) => {
+        const ev = entry;
+        if (!ev.interactionId || ev.interactionId === 0)
+            return;
+        if (!ev.duration || ev.duration <= 0)
+            return;
+        const existing = interactionDurations.get(ev.interactionId) ?? 0;
+        if (ev.duration > existing) {
+            interactionDurations.set(ev.interactionId, ev.duration);
+        }
+        if (interactionDurations.size > 50) {
+            const sorted = [...interactionDurations.values()].sort((a, b) => b - a);
+            const p98Index = Math.max(0, Math.ceil(sorted.length * 0.02) - 1);
+            inpGauge.record(sorted[p98Index], { vital: "inp" });
+        }
+    });
+    const nav = performance.getEntriesByType("navigation")[0];
+    if (nav) {
+        ttfbGauge.record(nav.responseStart, { vital: "ttfb" });
+    }
+    return () => {
+        if (interactionDurations.size > 0) {
+            const sorted = [...interactionDurations.values()].sort((a, b) => b - a);
+            const p98Index = Math.max(0, Math.ceil(sorted.length * 0.02) - 1);
+            inpGauge.record(sorted[p98Index], { vital: "inp" });
+        }
+        for (const c of cleanups)
+            c();
+    };
+}