feat: emit element-selector attribution on web-vitals metrics (#515)

## Summary

Switches the SDK's web-vitals listener from the plain `web-vitals` build
to `web-vitals/attribution` so we can attribute each LCP / CLS / INP /
FID to a specific DOM element. The selector and a couple of high-signal
context fields are emitted as OTel attributes on the gauge metric,
closing a feature parity gap with Datadog RUM's `_target_selector`.

Attribute keys (kept tight to limit cardinality):

- LCP: `web_vital.element`, `web_vital.attribution.url` (sanitized)
- CLS: `web_vital.element` (largest-shift target),
`web_vital.load_state`
- INP: `web_vital.element` (event target), `web_vital.event_type`,
`web_vital.load_state`
- FID: `web_vital.element`, `web_vital.event_type`
- FCP: `web_vital.load_state`
- TTFB: no element-level attribute (timing breakdown is already in the
value)

Both consumers (`sdk/observe.ts` and `client/index.tsx`) get the new
attributes; their existing differing shapes (semconv keys vs. plain
group/category) are preserved.

Bundle-size delta (brotli, the enforced metric): **166.07 kB → 166.99 kB
(+0.92 kB)**, well under the 256 kB cap. Gzipped `index.umd.js` grows by
~1.4 kB.

## Test plan

- [x] `yarn turbo run build --filter highlight.run`
- [x] `yarn turbo run test --filter highlight.run` (406/406 pass)
- [x] `yarn enforce-size` (166.99 kB / 256 kB)
- [x] `yarn format-check`
- [ ] Verify in a real page that gauge metrics now carry
`web_vital.element` / `web_vital.event_type` etc.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes how web-vitals metrics are sourced and adds new per-metric
attribution fields, which can affect telemetry shape/cardinality and
downstream dashboards. Low security risk but does emit additional
(sanitized) URL and DOM-selector data.
> 
> **Overview**
> Web-vitals collection now uses `web-vitals/attribution` and exposes a
typed `WebVitalMetric` union so consumers can safely access per-metric
attribution fields.
> 
> Both metric emitters (`client/index.tsx` and `sdk/observe.ts`) now
attach **additional web-vitals attributes** (e.g. `web_vital.element`,
`web_vital.event_type`, `web_vital.load_state`, and a sanitized
`web_vital.attribution.url`) when recording gauges, while keeping each
emitter’s existing metric attribute/tag shape intact.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
54e116b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Vadman97

sdk/highlight-run/src/client/index.tsx

@@ -57,6 +57,7 @@ import {
 } from './listeners/jank-listener/jank-listener'
 import { HighlightFetchWindow } from './listeners/network-listener/utils/fetch-listener'
 import { RequestResponsePair } from './listeners/network-listener/utils/models'
+import { sanitizeUrl } from './listeners/network-listener/utils/network-sanitizer'
 import { PageVisibilityListener } from './listeners/page-visibility-listener'
 import {
 	PerformanceListener,
@@ -1122,11 +1123,53 @@ SessionSecureID: ${this.sessionData.sessionSecureID}`,
 			this.listeners.push(
 				WebVitalsListener((data) => {
 					const { name, value } = data
+					const tags: { name: string; value: string }[] = []
+					const addTag = (n: string, v: string | undefined) => {
+						if (v) tags.push({ name: n, value: v })
+					}
+					switch (data.name) {
+						case 'LCP': {
+							const a = data.attribution
+							addTag('web_vital.element', a.element)
+							addTag(
+								'web_vital.attribution.url',
+								a.url ? sanitizeUrl(a.url) : undefined,
+							)
+							break
+						}
+						case 'CLS': {
+							const a = data.attribution
+							addTag('web_vital.element', a.largestShiftTarget)
+							addTag('web_vital.load_state', a.loadState)
+							break
+						}
+						case 'INP': {
+							const a = data.attribution
+							addTag('web_vital.element', a.eventTarget)
+							addTag('web_vital.event_type', a.eventType)
+							addTag('web_vital.load_state', a.loadState)
+							break
+						}
+						case 'FID': {
+							const a = data.attribution
+							addTag('web_vital.element', a.eventTarget)
+							addTag('web_vital.event_type', a.eventType)
+							break
+						}
+						case 'FCP': {
+							const a = data.attribution
+							addTag('web_vital.load_state', a.loadState)
+							break
+						}
+						case 'TTFB':
+							break
+					}
 					this.recordGauge({
 						name,
 						value,
 						group: window.location.href,
 						category: MetricCategory.WebVital,
+						tags: tags.length ? tags : undefined,
 					})
 				}),
 			)

sdk/highlight-run/src/client/listeners/web-vitals-listener/web-vitals-listener.tsx

@@ -1,6 +1,34 @@
-import { Metric, onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals'
+import {
+	CLSMetricWithAttribution,
+	FCPMetricWithAttribution,
+	FIDMetricWithAttribution,
+	INPMetricWithAttribution,
+	LCPMetricWithAttribution,
+	onCLS,
+	onFCP,
+	onFID,
+	onINP,
+	onLCP,
+	onTTFB,
+	TTFBMetricWithAttribution,
+} from 'web-vitals/attribution'
 
-export const WebVitalsListener = (callback: (metric: Metric) => void) => {
+/**
+ * Discriminated union of all web-vitals metrics with their per-metric
+ * attribution shape populated. Use `switch (metric.name)` in consumers to
+ * narrow to the specific attribution type.
+ */
+export type WebVitalMetric =
+	| CLSMetricWithAttribution
+	| FCPMetricWithAttribution
+	| FIDMetricWithAttribution
+	| INPMetricWithAttribution
+	| LCPMetricWithAttribution
+	| TTFBMetricWithAttribution
+
+export const WebVitalsListener = (
+	callback: (metric: WebVitalMetric) => void,
+) => {
 	onCLS(callback)
 	onFCP(callback)
 	onFID(callback)

sdk/highlight-run/src/sdk/observe.ts

@@ -653,16 +653,64 @@ export class ObserveSDK implements Observe {
 		WebVitalsListener((data) => {
 			const { name, value } = data
 			const { hostname, pathname, href } = window.location
+			const attributes: Attributes = {
+				group: window.location.pathname,
+				category: MetricCategory.WebVital,
+				[SemanticAttributes.ATTR_URL_FULL]: sanitizeUrl(href),
+				[SemanticAttributes.ATTR_URL_PATH]: pathname,
+				[SemanticAttributes.ATTR_SERVER_ADDRESS]: hostname,
+			}
+			switch (data.name) {
+				case 'LCP': {
+					const a = data.attribution
+					if (a.element) attributes['web_vital.element'] = a.element
+					if (a.url)
+						attributes['web_vital.attribution.url'] = sanitizeUrl(
+							a.url,
+						)
+					break
+				}
+				case 'CLS': {
+					const a = data.attribution
+					if (a.largestShiftTarget)
+						attributes['web_vital.element'] = a.largestShiftTarget
+					if (a.loadState)
+						attributes['web_vital.load_state'] = a.loadState
+					break
+				}
+				case 'INP': {
+					const a = data.attribution
+					if (a.eventTarget)
+						attributes['web_vital.element'] = a.eventTarget
+					if (a.eventType)
+						attributes['web_vital.event_type'] = a.eventType
+					if (a.loadState)
+						attributes['web_vital.load_state'] = a.loadState
+					break
+				}
+				case 'FID': {
+					const a = data.attribution
+					if (a.eventTarget)
+						attributes['web_vital.element'] = a.eventTarget
+					if (a.eventType)
+						attributes['web_vital.event_type'] = a.eventType
+					break
+				}
+				case 'FCP': {
+					const a = data.attribution
+					if (a.loadState)
+						attributes['web_vital.load_state'] = a.loadState
+					break
+				}
+				case 'TTFB':
+					// No high-signal selector to attribute; timing breakdown
+					// is already captured by the metric value itself.
+					break
+			}
 			this.recordGauge({
 				name,
 				value,
-				attributes: {
-					group: window.location.pathname,
-					category: MetricCategory.WebVital,
-					[SemanticAttributes.ATTR_URL_FULL]: sanitizeUrl(href),
-					[SemanticAttributes.ATTR_URL_PATH]: pathname,
-					[SemanticAttributes.ATTR_SERVER_ADDRESS]: hostname,
-				},
+				attributes,
 			})
 		})
 		ViewportResizeListener((viewport: ViewportResizeListenerArgs) => {