fix(browser): Send web vital span sentry.segment.name attribute

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/test.ts

@@ -38,6 +38,10 @@ sentryTest('captures CLS as a streamed span with source attributes', async ({ ge
   expect(clsSpan.attributes?.['sentry.exclusive_time']).toEqual({ type: 'integer', value: 0 });
   expect(clsSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
 
+  // Check the CLS span carries the transaction/segment name it belongs to
+  expect(clsSpan.attributes?.['sentry.transaction']).toEqual({ type: 'string', value: '/index.html' });
+  expect(clsSpan.attributes?.['sentry.segment.name']).toEqual({ type: 'string', value: '/index.html' });
+
   // Check browser.web_vital.cls.source attributes
   expect(clsSpan.attributes?.['browser.web_vital.cls.source.1']?.value).toEqual(
     expect.stringContaining('body > div#content > p'),

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/test.ts

@@ -31,6 +31,10 @@ sentryTest('captures INP click as a streamed span', async ({ getLocalTestUrl, pa
   expect(inpSpan.attributes?.['sentry.origin']).toEqual({ type: 'string', value: 'auto.http.browser.inp' });
   expect(inpSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
 
+  // Check the INP span carries the transaction/segment name it belongs to
+  expect(inpSpan.attributes?.['sentry.transaction']).toEqual({ type: 'string', value: '/index.html' });
+  expect(inpSpan.attributes?.['sentry.segment.name']).toEqual({ type: 'string', value: '/index.html' });
+
   const inpValue = inpSpan.attributes?.['browser.web_vital.inp.value']?.value as number;
   expect(inpValue).toBeGreaterThan(0);
 

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/test.ts

@@ -40,6 +40,10 @@ sentryTest('captures LCP as a streamed span with element attributes', async ({ g
   expect(lcpSpan.attributes?.['sentry.exclusive_time']).toEqual({ type: 'integer', value: 0 });
   expect(lcpSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
 
+  // Check the LCP span carries the transaction/segment name it belongs to
+  expect(lcpSpan.attributes?.['sentry.transaction']).toEqual({ type: 'string', value: '/index.html' });
+  expect(lcpSpan.attributes?.['sentry.segment.name']).toEqual({ type: 'string', value: '/index.html' });
+
   // Check browser.web_vital.lcp.* attributes
   expect(lcpSpan.attributes?.['browser.web_vital.lcp.element']?.value).toEqual(expect.stringContaining('body > img'));
   expect(lcpSpan.attributes?.['browser.web_vital.lcp.url']?.value).toBe(

packages/browser-utils/package.json

@@ -40,7 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "10.64.0"
+    "@sentry/core": "10.64.0",
+    "@sentry/conventions": "^0.15.1"
   },
   "scripts": {
     "build": "run-p build:transpile build:types",

packages/browser-utils/src/metrics/webVitalSpans.ts

@@ -22,6 +22,7 @@ import { isValidLcpMetric } from './lcp';
 import type { WebVitalReportEvent } from './utils';
 import { getBrowserPerformanceAPI, listenForWebVitalReportEvents, msToSec, supportsWebVital } from './utils';
 import type { PerformanceEventTiming } from './instrument';
+import { SENTRY_SEGMENT_NAME, SENTRY_TRANSACTION } from '@sentry/conventions/attributes';
 
 // Locally-defined interfaces to avoid leaking bare global type references into the
 // generated .d.ts. The `declare global` augmentations in web-vitals/types.ts make these
@@ -79,7 +80,9 @@ export function _emitWebVitalSpan(options: WebVitalSpanOptions): void {
     [SEMANTIC_ATTRIBUTE_SENTRY_OP]: op,
     [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: 0,
     [`browser.web_vital.${metricName}.value`]: value,
-    'sentry.transaction': routeName,
+    // oxlint-disable-next-line typescript-eslint/no-deprecated
+    [SENTRY_TRANSACTION]: routeName,
+    [SENTRY_SEGMENT_NAME]: routeName,
     // Web vital score calculation relies on the user agent
     'user_agent.original': WINDOW.navigator?.userAgent,
     ...passedAttributes,
@@ -304,7 +307,9 @@ export function _sendInpSpan(inpValue: number, entry: PerformanceEventTiming): v
     value: inpValue,
     attributes: {
       [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry.duration,
-      'sentry.transaction': routeName,
+      // oxlint-disable-next-line typescript-eslint/no-deprecated
+      [SENTRY_TRANSACTION]: routeName,
+      [SENTRY_SEGMENT_NAME]: routeName,
     },
     startTime,
     endTime: startTime + duration,

packages/browser-utils/test/metrics/webVitalSpans.test.ts

@@ -80,6 +80,7 @@ describe('_emitWebVitalSpan', () => {
         'sentry.exclusive_time': 0,
         'browser.web_vital.lcp.value': 100,
         'sentry.transaction': 'test-transaction',
+        'sentry.segment.name': 'test-transaction',
         'user_agent.original': 'test-user-agent',
       },
       startTime: 1.5,
@@ -256,6 +257,7 @@ describe('_sendLcpSpan', () => {
           'browser.web_vital.lcp.size': 50000,
           'browser.web_vital.lcp.report_event': 'pagehide',
           'sentry.transaction': 'test-route',
+          'sentry.segment.name': 'test-route',
         }),
         startTime: 1, // timeOrigin: 1000 / 1000
         parentSpan: mockPageloadSpan,
@@ -348,6 +350,7 @@ describe('_sendClsSpan', () => {
           'browser.web_vital.cls.source.2': '<span>',
           'browser.web_vital.cls.report_event': 'navigation',
           'sentry.transaction': 'test-route',
+          'sentry.segment.name': 'test-route',
         }),
         parentSpan: mockPageloadSpan,
       }),
@@ -414,6 +417,7 @@ describe('_sendInpSpan', () => {
           'sentry.op': 'ui.interaction.click',
           'sentry.exclusive_time': 120,
           'sentry.transaction': 'test-route',
+          'sentry.segment.name': 'test-route',
         }),
       }),
     );
@@ -472,6 +476,7 @@ describe('_sendInpSpan', () => {
         name: 'body > CachedButton',
         attributes: expect.objectContaining({
           'sentry.transaction': 'cached-route',
+          'sentry.segment.name': 'cached-route',
         }),
         parentSpan: mockRootSpan,
       }),