midline-agent 0.3.0 → 0.4.0

package/dist/browser/vitals.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeVitals = observeVitals;
+/** web.dev thresholds: at or under the first is good, over the second is poor. */
+const THRESHOLDS = {
+    LCP: [2500, 4000],
+    INP: [200, 500],
+    CLS: [0.1, 0.25],
+    FCP: [1800, 3000],
+    TTFB: [800, 1800],
+};
+const rate = (name, value) => value <= THRESHOLDS[name][0] ? "good" : value <= THRESHOLDS[name][1] ? "needs-improvement" : "poor";
+/**
+ * Core Web Vitals without a dependency, measured the way the web-vitals library
+ * does and reported once, when the page is first hidden (the last moment a
+ * report reliably gets out). Browsers that don't expose an entry type simply
+ * omit that metric: Safari has no LCP, INP or CLS.
+ */
+function observeVitals(win, onReport) {
+    const Observer = win.PerformanceObserver;
+    const supported = Observer?.supportedEntryTypes ?? [];
+    const perf = win.performance;
+    const doc = win.document;
+    const values = {};
+    const observers = [];
+    let activationStart = 0;
+    let navigationType;
+    try {
+        const navigation = perf?.getEntriesByType?.("navigation")?.[0];
+        if (navigation) {
+            activationStart = navigation.activationStart ?? 0;
+            navigationType = navigation.type;
+            if (typeof navigation.responseStart === "number" && navigation.responseStart > 0) {
+                values.TTFB = Math.max(0, navigation.responseStart - activationStart);
+            }
+        }
+    }
+    catch {
+        // no navigation timing
+    }
+    const observe = (type, handle, extra = {}) => {
+        if (!Observer || !supported.includes(type))
+            return;
+        try {
+            const observer = new Observer((list) => handle(list.getEntries()));
+            observer.observe({ type, buffered: true, ...extra });
+            observers.push({ observer, handle });
+        }
+        catch {
+            // unsupported option in this browser
+        }
+    };
+    observe("paint", (entries) => {
+        for (const entry of entries) {
+            if (entry.name === "first-contentful-paint")
+                values.FCP = Math.max(0, entry.startTime - activationStart);
+        }
+    });
+    observe("largest-contentful-paint", (entries) => {
+        const last = entries[entries.length - 1];
+        if (last)
+            values.LCP = Math.max(0, last.startTime - activationStart);
+    });
+    // CLS is the largest session window: shifts less than 1s apart, at most 5s long.
+    let windowValue = 0;
+    let windowStart = 0;
+    let windowLast = 0;
+    observe("layout-shift", (entries) => {
+        for (const entry of entries) {
+            if (entry.hadRecentInput || typeof entry.value !== "number")
+                continue;
+            if (windowValue && entry.startTime - windowLast < 1000 && entry.startTime - windowStart < 5000) {
+                windowValue += entry.value;
+            }
+            else {
+                windowValue = entry.value;
+                windowStart = entry.startTime;
+            }
+            windowLast = entry.startTime;
+            values.CLS = Math.max(values.CLS ?? 0, windowValue);
+        }
+    });
+    // INP: the slowest interaction, or near the 98th percentile on busy pages.
+    const interactions = new Map();
+    const recordInteractions = (entries) => {
+        for (const entry of entries) {
+            if (!entry.interactionId)
+                continue;
+            interactions.set(entry.interactionId, Math.max(interactions.get(entry.interactionId) ?? 0, entry.duration));
+        }
+    };
+    observe("event", recordInteractions, { durationThreshold: 40 });
+    observe("first-input", recordInteractions);
+    let reported = false;
+    const report = () => {
+        if (reported)
+            return;
+        reported = true;
+        for (const { observer, handle } of observers) {
+            try {
+                handle(observer.takeRecords());
+                observer.disconnect();
+            }
+            catch {
+                // already disconnected
+            }
+        }
+        if (interactions.size) {
+            const durations = [...interactions.values()].sort((a, b) => b - a);
+            values.INP = durations[Math.min(durations.length - 1, Math.floor(durations.length / 50))];
+        }
+        const vitals = {};
+        for (const name of Object.keys(values)) {
+            const raw = values[name];
+            if (typeof raw !== "number" || !Number.isFinite(raw))
+                continue;
+            const value = name === "CLS" ? Math.round(raw * 10000) / 10000 : Math.round(raw);
+            vitals[name] = { value, rating: rate(name, value) };
+        }
+        if (Object.keys(vitals).length)
+            onReport({ vitals, navigationType });
+    };
+    const onVisibility = () => {
+        if (doc?.visibilityState === "hidden")
+            report();
+    };
+    doc?.addEventListener("visibilitychange", onVisibility, true);
+    win.addEventListener("pagehide", report, true);
+    return () => {
+        doc?.removeEventListener("visibilitychange", onVisibility, true);
+        win.removeEventListener("pagehide", report, true);
+        for (const { observer } of observers)
+            observer.disconnect();
+    };
+}