feat(browser): Add CLS sources to span attributes

[AbhiPrasad]

resolves #16707

The session focused on enhancing CLS (Cumulative Layout Shift) spans by adding attributes detailing the elements that caused layout shifts.

• In packages/browser-utils/src/metrics/cls.ts, the sendStandaloneClsSpan function was updated. It now iterates over LayoutShift entry sources and adds them as cls.source.N attributes to the span, converting DOM nodes to readable CSS selectors using htmlTreeAsString(). This aligns standalone CLS spans with the existing implementation for regular pageload spans.
• Test expectations in dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/test.ts were updated to assert the presence of these new cls.source.N attributes on the captured CLS spans.
• yarn.lock was updated to reflect changes in dependency resolutions, likely due to package installations during the session.

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	23.99 kB	-	-
@sentry/browser - with treeshaking flags	23.76 kB	-	-
@sentry/browser (incl. Tracing)	38.84 kB	+0.12%	+43 B 🔺
@sentry/browser (incl. Tracing, Replay)	76.98 kB	+0.06%	+46 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	70.07 kB	+0.07%	+43 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas)	81.74 kB	+0.06%	+45 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback)	93.83 kB	+0.05%	+42 B 🔺
@sentry/browser (incl. Feedback)	40.74 kB	-	-
@sentry/browser (incl. sendFeedback)	28.7 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.59 kB	-	-
@sentry/react	25.76 kB	-	-
@sentry/react (incl. Tracing)	40.84 kB	+0.12%	+45 B 🔺
@sentry/vue	28.36 kB	-	-
@sentry/vue (incl. Tracing)	40.7 kB	+0.1%	+38 B 🔺
@sentry/svelte	24.01 kB	-	-
CDN Bundle	25.5 kB	-	-
CDN Bundle (incl. Tracing)	38.92 kB	+0.11%	+39 B 🔺
CDN Bundle (incl. Tracing, Replay)	74.83 kB	+0.06%	+44 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback)	80.29 kB	+0.05%	+37 B 🔺
CDN Bundle - uncompressed	74.5 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	115.42 kB	+0.08%	+89 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed	229.47 kB	+0.04%	+89 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	242.3 kB	+0.04%	+89 B 🔺
@sentry/nextjs (client)	42.47 kB	+0.1%	+39 B 🔺
@sentry/sveltekit (client)	39.33 kB	+0.11%	+40 B 🔺
@sentry/node	150.89 kB	-	-
@sentry/node - without tracing	98.64 kB	+0.01%	+2 B 🔺
@sentry/aws-serverless	124.4 kB	-	-

View base workflow run

[s1gr1d]

Nice!

[andreiborza]

Mhm, are we ok with that bundle-size increase?

[AbhiPrasad]

I think we are.

When span streaming comes we'll drop attaching CLS as measurements in favour of only using standalone spans, so I think this is the right direction to go down.