fix: combine all Web Vitals into one event per page load

Instead of sending LCP/TTFB/PageLoad/INP/CLS as separate events
(which creates a new issue for every unique value), all metrics are
now collected and sent as a single "Performance vitals" event on
pagehide/visibilitychange. The constant message means all page loads
group into ONE issue on the dashboard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

src/index.d.ts

@@ -54,6 +54,19 @@ export interface DevPulseException {
   stacktrace: StackFrame[];
 }
 
+export interface WebVitals {
+  /** Largest Contentful Paint in ms */
+  lcp?: number;
+  /** Time to First Byte in ms */
+  ttfb?: number;
+  /** Total page load time in ms */
+  page_load?: number;
+  /** Interaction to Next Paint in ms */
+  inp?: number;
+  /** Cumulative Layout Shift score (0–1, unitless) */
+  cls?: number;
+}
+
 export interface DevPulseEvent {
   level: "error" | "warning" | "info";
   /** Present on error events */

src/index.js

@@ -1,7 +1,7 @@
 import {
   buildFromError,
   buildFromMessage,
-  buildFromPerformance,
+  buildFromVitals,
 } from "./payload.js";
 import { Transport } from "./transport.js";
 
@@ -280,26 +280,31 @@ class DevPulseClient {
   _trackWebVitals() {
     if (!("PerformanceObserver" in window)) return;
 
-    // LCP — only report the final value
+    // Accumulate all metrics; send ONE combined event per page load.
+    // Keeping the message constant ("Performance vitals") means all page loads
+    // group into a single issue instead of flooding the list.
+    const vitals = {};
+    let sent = false;
+
+    const sendVitals = () => {
+      if (sent || Object.keys(vitals).length === 0) return;
+      sent = true;
+      const payload = {
+        ...buildFromVitals(vitals),
+        environment: this.config.environment,
+        release: this.config.release,
+        session_id: this._sessionId,
+      };
+      this.transport.send(payload);
+    };
+
+    // LCP — only the final value before page hides
     let latestLcp = null;
     this._observe("largest-contentful-paint", (entries) => {
       latestLcp = entries[entries.length - 1];
     });
 
-    const sendLcp = () => {
-      if (latestLcp) {
-        this.transport.send(buildFromPerformance("LCP", latestLcp.startTime));
-        latestLcp = null;
-      }
-    };
-    window.addEventListener("pagehide", sendLcp, { once: true });
-    document.addEventListener(
-      "visibilitychange",
-      () => { if (document.visibilityState === "hidden") sendLcp(); },
-      { once: true },
-    );
-
-    // INP — Interaction to Next Paint
+    // INP — worst interaction on the page
     let inpValue = 0;
     this._observe(
       "event",
@@ -310,29 +315,38 @@ class DevPulseClient {
       },
       { durationThreshold: 40 },
     );
-    window.addEventListener("pagehide", () => {
-      if (inpValue > 0) this.transport.send(buildFromPerformance("INP", inpValue));
-    });
 
-    // CLS — Cumulative Layout Shift (unitless)
+    // CLS — cumulative score (unitless 0–1)
     let clsValue = 0;
     this._observe("layout-shift", (entries) => {
       for (const entry of entries) {
         if (!entry.hadRecentInput) clsValue += entry.value;
       }
     });
-    window.addEventListener("pagehide", () => {
-      if (clsValue > 0) this.transport.send(buildFromPerformance("CLS", clsValue, { unit: "" }));
-    });
 
-    // TTFB + PageLoad
+    // TTFB + PageLoad — available after load event
     window.addEventListener("load", () => {
       const nav = performance.getEntriesByType("navigation")[0];
       if (nav) {
-        this.transport.send(buildFromPerformance("TTFB", nav.responseStart));
-        this.transport.send(buildFromPerformance("PageLoad", nav.loadEventEnd));
+        vitals.ttfb = Math.round(nav.responseStart);
+        vitals.page_load = Math.round(nav.loadEventEnd);
       }
     });
+
+    // Flush all accumulated vitals on page hide / tab switch
+    const onHide = () => {
+      if (latestLcp) vitals.lcp = Math.round(latestLcp.startTime);
+      if (inpValue > 0) vitals.inp = Math.round(inpValue);
+      if (clsValue > 0) vitals.cls = +Number(clsValue).toFixed(4);
+      sendVitals();
+    };
+
+    window.addEventListener("pagehide", onHide, { once: true });
+    document.addEventListener(
+      "visibilitychange",
+      () => { if (document.visibilityState === "hidden") onHide(); },
+      { once: true },
+    );
   }
 
   _observe(type, callback, observeOptions = {}) {

src/index.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach } from "vitest";
 import {
   buildFromError,
   buildFromMessage,
-  buildFromPerformance,
+  buildFromVitals,
 } from "./payload.js";
 
 describe("buildFromError", () => {
@@ -118,29 +118,27 @@ describe("buildFromMessage", () => {
   });
 });
 
-describe("buildFromPerformance", () => {
-  it("rounds ms timing values to whole numbers", () => {
-    const payload = buildFromPerformance("LCP", 1234.56);
-    expect(payload.context.performance.value).toBe(1235);
-    expect(payload.context.performance.unit).toBe("ms");
-    expect(payload.message).toBe("Performance: LCP = 1235ms");
+describe("buildFromVitals", () => {
+  it("produces a constant message so all page loads group into one issue", () => {
+    const payload = buildFromVitals({ lcp: 156, ttfb: 59 });
+    expect(payload.message).toBe("Performance vitals");
+    expect(payload.level).toBe("info");
+    expect(payload.platform).toBe("browser");
   });
 
-  it("preserves 4 decimal places for unitless scores (CLS)", () => {
-    const payload = buildFromPerformance("CLS", 0.1234, { unit: "" });
-    expect(payload.context.performance.unit).toBe("");
-    expect(payload.context.performance.value).toBe(0.1234);
-    expect(payload.message).toBe("Performance: CLS = 0.1234");
+  it("embeds all provided vitals under context.vitals", () => {
+    const payload = buildFromVitals({ lcp: 200, ttfb: 80, page_load: 900, inp: 120, cls: 0.05 });
+    expect(payload.context.vitals).toEqual({ lcp: 200, ttfb: 80, page_load: 900, inp: 120, cls: 0.05 });
   });
 
-  it("includes context and request", () => {
-    const payload = buildFromPerformance("TTFB", 200);
+  it("includes context.url and request.url", () => {
+    const payload = buildFromVitals({ ttfb: 50 });
     expect(payload.context).toHaveProperty("url");
     expect(payload.request).toHaveProperty("url");
   });
 
   it("request includes method and referrer fields", () => {
-    const payload = buildFromMessage("test");
+    const payload = buildFromVitals({ lcp: 100 });
     expect(payload.request).toHaveProperty("method");
     expect(payload.request).toHaveProperty("referrer");
   });

src/payload.js

@@ -25,18 +25,20 @@ export function buildFromMessage(message, level = "info", options = {}) {
   };
 }
 
-// unit defaults to "ms" for timing metrics; pass { unit: "" } for unitless
-// scores like CLS which are in the 0–1 range, not milliseconds.
-export function buildFromPerformance(name, value, options = {}) {
-  const unit = options.unit ?? "ms";
-  const displayValue =
-    unit === "ms" ? Math.round(value) : +Number(value).toFixed(4);
+/**
+ * Build a single combined vitals event for one page load.
+ * All metrics are nested under context.vitals so the message stays
+ * constant ("Performance vitals") and all events group into one issue.
+ *
+ * @param {object} vitals — e.g. { lcp: 156, ttfb: 59, page_load: 820, inp: 120, cls: 0.01 }
+ */
+export function buildFromVitals(vitals) {
   return {
     level: "info",
-    message: `Performance: ${name} = ${displayValue}${unit}`,
+    message: "Performance vitals",
     context: {
       ...buildContext(),
-      performance: { name, value: displayValue, unit },
+      vitals,
     },
     request: buildRequest(),
     platform: "browser",