ref(browser): Unify CLS/LCP recording and add recording event attribute

[Lms24]

This PR refactors our CLS and LCP tracking and recording logic. We now have a listenForWebVitalReportEvents helper function which listens to page hides and navigation span starts and ensures that the standalone span logic is only called once per web vital. Previously, we had this logic in the CLS and LCP function and it was quite a lot of duplicated and identical code.

Despite this change adding an attribute, bundle size should remain constant due to the extraction (🤞)

Note: There's still an edge case with the pageloadSpanId not being obtained correctly in this PR but I'll fix this in a follow-up PR to keep things atomic(ish).

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	23.81 kB	-	-
@sentry/browser - with treeshaking flags	22.53 kB	-	-
@sentry/browser (incl. Tracing)	39.69 kB	+0.08%	+30 B 🔺
@sentry/browser (incl. Tracing, Replay)	77.82 kB	+0.04%	+31 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.74 kB	+0.03%	+14 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas)	82.52 kB	+0.04%	+27 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback)	94.64 kB	+0.04%	+29 B 🔺
@sentry/browser (incl. Feedback)	40.48 kB	-	-
@sentry/browser (incl. sendFeedback)	28.49 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.38 kB	-	-
@sentry/react	25.58 kB	-	-
@sentry/react (incl. Tracing)	41.67 kB	+0.06%	+23 B 🔺
@sentry/vue	28.26 kB	-	-
@sentry/vue (incl. Tracing)	41.48 kB	+0.04%	+16 B 🔺
@sentry/svelte	23.83 kB	-	-
CDN Bundle	25.36 kB	-	-
CDN Bundle (incl. Tracing)	39.66 kB	+0.07%	+25 B 🔺
CDN Bundle (incl. Tracing, Replay)	75.59 kB	+0.03%	+18 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback)	81.06 kB	+0.05%	+38 B 🔺
CDN Bundle - uncompressed	74.08 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.5 kB	-0.18%	-202 B 🔽
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.42 kB	-0.09%	-202 B 🔽
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.23 kB	-0.09%	-202 B 🔽
@sentry/nextjs (client)	43.31 kB	+0.07%	+28 B 🔺
@sentry/sveltekit (client)	40.13 kB	+0.06%	+23 B 🔺
@sentry/node	167.85 kB	-	-
@sentry/node - without tracing	100.59 kB	-	-
@sentry/aws-serverless	128.69 kB	-	-

View base workflow run

[cursor]

Bug: Race Condition Causes Web Vital Data Loss

A race condition in listenForWebVitalReportEvents leads to web vital data collection failures and memory leaks. If a report event (e.g., pagehide) occurs before pageloadSpanId is asynchronously set, the _runCollectorCallbackOnce function incorrectly marks collection as complete (collected = true) without actually invoking the collectorCallback. This permanently prevents web vital reporting and, unlike previous behavior, leaves instrumentation cleanup handlers uncalled, causing resource leaks.

packages/browser-utils/src/metrics/utils.ts#L211-L218

sentry-javascript/packages/browser-utils/src/metrics/utils.ts

Lines 211 to 218 in 006b7a6

	let collected = false;
	function _runCollectorCallbackOnce(event: WebVitalReportEvent) {
	if (!collected && pageloadSpanId) {
	collectorCallback(event, pageloadSpanId);
	}
	collected = true;
	}

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎

[s1gr1d]

Nice changes