fix: Eliminate redundant CLS/LCP tracking when span streaming is enabled

cursoragent · claude · cursoragent · commit d3ccbaa21110 · 2026-03-24T16:11:49.000Z
When span streaming is enabled, startTrackingWebVitals was registering
handlers via _trackCLS() and _trackLCP() that accumulated values in
_measurements, which were then immediately deleted in addPerformanceEntries.
Meanwhile, trackClsAsSpan() and trackLcpAsSpan() registered their own
handlers doing the actual work, resulting in two handlers firing on every
CLS/LCP update.

This fix adds recordClsOnPageloadSpan and recordLcpOnPageloadSpan parameters
to startTrackingWebVitals to control whether _trackCLS() and _trackLCP()
should be called. When span streaming is enabled, these are set to false,
preventing the redundant handlers from being registered.

Co-Authored-By: Claude Sonnet 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -77,6 +77,8 @@ let _clsEntry: LayoutShift | undefined;
 interface StartTrackingWebVitalsOptions {
   recordClsStandaloneSpans: boolean;
   recordLcpStandaloneSpans: boolean;
+  recordClsOnPageloadSpan?: boolean;
+  recordLcpOnPageloadSpan?: boolean;
   client: Client;
 }
 
@@ -89,6 +91,8 @@ interface StartTrackingWebVitalsOptions {
 export function startTrackingWebVitals({
   recordClsStandaloneSpans,
   recordLcpStandaloneSpans,
+  recordClsOnPageloadSpan = true,
+  recordLcpOnPageloadSpan = true,
   client,
 }: StartTrackingWebVitalsOptions): () => void {
   const performance = getBrowserPerformanceAPI();
@@ -97,9 +101,21 @@ export function startTrackingWebVitals({
     if (performance.mark) {
       WINDOW.performance.mark('sentry-tracing-init');
     }
-    const lcpCleanupCallback = recordLcpStandaloneSpans ? trackLcpAsStandaloneSpan(client) : _trackLCP();
+    let lcpCleanupCallback: (() => void) | undefined;
+    if (recordLcpStandaloneSpans) {
+      trackLcpAsStandaloneSpan(client);
+    } else if (recordLcpOnPageloadSpan) {
+      lcpCleanupCallback = _trackLCP();
+    }
+
     const ttfbCleanupCallback = _trackTtfb();
-    const clsCleanupCallback = recordClsStandaloneSpans ? trackClsAsStandaloneSpan(client) : _trackCLS();
+
+    let clsCleanupCallback: (() => void) | undefined;
+    if (recordClsStandaloneSpans) {
+      trackClsAsStandaloneSpan(client);
+    } else if (recordClsOnPageloadSpan) {
+      clsCleanupCallback = _trackCLS();
+    }
 
     return (): void => {
       lcpCleanupCallback?.();
diff --git a/packages/browser/src/tracing/browserTracingIntegration.ts b/packages/browser/src/tracing/browserTracingIntegration.ts
@@ -519,6 +519,8 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
       _collectWebVitals = startTrackingWebVitals({
         recordClsStandaloneSpans: !spanStreamingEnabled && (enableStandaloneClsSpans || false),
         recordLcpStandaloneSpans: !spanStreamingEnabled && (enableStandaloneLcpSpans || false),
+        recordClsOnPageloadSpan: !spanStreamingEnabled,
+        recordLcpOnPageloadSpan: !spanStreamingEnabled,
         client,
       });
 
