ref(browser): Store browser metrics as attributes instead of tags (#10823)

Extracted this out from
#10808, as this is a
bit more impactful, possibly.

Author: mydea

dev-packages/browser-integration-tests/suites/tracing/metrics/handlers-lcp/test.ts

@@ -29,9 +29,9 @@ sentryTest(
     expect(eventData.measurements).toBeDefined();
     expect(eventData.measurements?.lcp?.value).toBeDefined();
 
-    expect(eventData.tags?.['lcp.element']).toBe('body > img');
-    expect(eventData.tags?.['lcp.size']).toBe(107400);
-    expect(eventData.tags?.['lcp.url']).toBe('https://example.com/path/to/image.png');
+    expect(eventData.contexts?.trace?.data?.['lcp.element']).toBe('body > img');
+    expect(eventData.contexts?.trace?.data?.['lcp.size']).toBe(107400);
+    expect(eventData.contexts?.trace?.data?.['lcp.url']).toBe('https://example.com/path/to/image.png');
 
     const lcp = await (await page.waitForFunction('window._LCP')).jsonValue();
     const lcp2 = await (await page.waitForFunction('window._LCP2')).jsonValue();

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

@@ -23,7 +23,7 @@ sentryTest('should capture a "GOOD" CLS vital with its source(s).', async ({ get
   expect(eventData.measurements?.cls?.value).toBeGreaterThan(0.03);
   expect(eventData.measurements?.cls?.value).toBeLessThan(0.07);
 
-  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p#partial');
+  expect(eventData.contexts?.trace?.data?.['cls.source.1']).toBe('body > div#content > p#partial');
 });
 
 sentryTest('should capture a "MEH" CLS vital with its source(s).', async ({ getLocalTestPath, page }) => {
@@ -37,7 +37,7 @@ sentryTest('should capture a "MEH" CLS vital with its source(s).', async ({ getL
   expect(eventData.measurements?.cls?.value).toBeGreaterThan(0.18);
   expect(eventData.measurements?.cls?.value).toBeLessThan(0.23);
 
-  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p');
+  expect(eventData.contexts?.trace?.data?.['cls.source.1']).toBe('body > div#content > p');
 });
 
 sentryTest('should capture a "POOR" CLS vital with its source(s).', async ({ getLocalTestPath, page }) => {
@@ -50,5 +50,5 @@ sentryTest('should capture a "POOR" CLS vital with its source(s).', async ({ get
   // Flakey value dependent on timings -> we check for a range
   expect(eventData.measurements?.cls?.value).toBeGreaterThan(0.34);
   expect(eventData.measurements?.cls?.value).toBeLessThan(0.36);
-  expect(eventData.tags?.['cls.source.1']).toBe('body > div#content > p');
+  expect(eventData.contexts?.trace?.data?.['cls.source.1']).toBe('body > div#content > p');
 });

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

@@ -10,9 +10,10 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
     sentryTest.skip();
   }
 
-  await page.route('**/path/to/image.png', (route: Route) =>
-    route.fulfill({ path: `${__dirname}/assets/sentry-logo-600x179.png` }),
-  );
+  page.route('**', route => route.continue());
+  page.route('**/path/to/image.png', async (route: Route) => {
+    return route.fulfill({ path: `${__dirname}/assets/sentry-logo-600x179.png` });
+  });
 
   const url = await getLocalTestPath({ testDir: __dirname });
   const [eventData] = await Promise.all([
@@ -24,7 +25,7 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
   expect(eventData.measurements).toBeDefined();
   expect(eventData.measurements?.lcp?.value).toBeDefined();
 
-  expect(eventData.tags?.['lcp.element']).toBe('body > img');
-  expect(eventData.tags?.['lcp.size']).toBe(107400);
-  expect(eventData.tags?.['lcp.url']).toBe('https://example.com/path/to/image.png');
+  expect(eventData.contexts?.trace?.data?.['lcp.element']).toBe('body > img');
+  expect(eventData.contexts?.trace?.data?.['lcp.size']).toBe(107400);
+  expect(eventData.contexts?.trace?.data?.['lcp.url']).toBe('https://example.com/path/to/image.png');
 });

packages/tracing-internal/src/browser/metrics/index.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import type { SentrySpan } from '@sentry/core';
 import { getActiveSpan, startInactiveSpan } from '@sentry/core';
 import { setMeasurement } from '@sentry/core';
 import type { Measurements, Span, StartSpanOptions } from '@sentry/types';
@@ -445,15 +444,11 @@ function _trackNavigator(span: Span): void {
   const connection = navigator.connection;
   if (connection) {
     if (connection.effectiveType) {
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag('effectiveConnectionType', connection.effectiveType);
+      span.setAttribute('effectiveConnectionType', connection.effectiveType);
     }
 
     if (connection.type) {
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag('connectionType', connection.type);
+      span.setAttribute('connectionType', connection.type);
     }
 
     if (isMeasurementValue(connection.rtt)) {
@@ -462,15 +457,11 @@ function _trackNavigator(span: Span): void {
   }
 
   if (isMeasurementValue(navigator.deviceMemory)) {
-    // TODO: Can we rewrite this to an attribute?
-    // eslint-disable-next-line deprecation/deprecation
-    (span as SentrySpan).setTag('deviceMemory', `${navigator.deviceMemory} GB`);
+    span.setAttribute('deviceMemory', `${navigator.deviceMemory} GB`);
   }
 
   if (isMeasurementValue(navigator.hardwareConcurrency)) {
-    // TODO: Can we rewrite this to an attribute?
-    // eslint-disable-next-line deprecation/deprecation
-    (span as SentrySpan).setTag('hardwareConcurrency', String(navigator.hardwareConcurrency));
+    span.setAttribute('hardwareConcurrency', String(navigator.hardwareConcurrency));
   }
 }
 
@@ -482,36 +473,26 @@ function _tagMetricInfo(span: Span): void {
     // Capture Properties of the LCP element that contributes to the LCP.
 
     if (_lcpEntry.element) {
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag('lcp.element', htmlTreeAsString(_lcpEntry.element));
+      span.setAttribute('lcp.element', htmlTreeAsString(_lcpEntry.element));
     }
 
     if (_lcpEntry.id) {
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag('lcp.id', _lcpEntry.id);
+      span.setAttribute('lcp.id', _lcpEntry.id);
     }
 
     if (_lcpEntry.url) {
       // Trim URL to the first 200 characters.
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag('lcp.url', _lcpEntry.url.trim().slice(0, 200));
+      span.setAttribute('lcp.url', _lcpEntry.url.trim().slice(0, 200));
     }
 
-    // TODO: Can we rewrite this to an attribute?
-    // eslint-disable-next-line deprecation/deprecation
-    (span as SentrySpan).setTag('lcp.size', _lcpEntry.size);
+    span.setAttribute('lcp.size', _lcpEntry.size);
   }
 
   // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
   if (_clsEntry && _clsEntry.sources) {
     DEBUG_BUILD && logger.log('[Measurements] Adding CLS Data');
     _clsEntry.sources.forEach((source, index) =>
-      // TODO: Can we rewrite this to an attribute?
-      // eslint-disable-next-line deprecation/deprecation
-      (span as SentrySpan).setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
+      span.setAttribute(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),
     );
   }
 }