feat(browser)!: Use browser.paint span op for paint entries

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

@@ -18,7 +18,7 @@ sentryTest('should capture FP vital.', async ({ browserName, getLocalTestUrl, pa
   const fpSpan = eventData.spans?.filter(({ description }) => description === 'first-paint')[0];
 
   expect(fpSpan).toBeDefined();
-  expect(fpSpan?.op).toBe('paint');
+  expect(fpSpan?.op).toBe('browser.paint');
   expect(fpSpan?.parent_span_id).toBe(eventData.contexts?.trace?.span_id);
 });
 
@@ -36,6 +36,6 @@ sentryTest('should capture FCP vital.', async ({ getLocalTestUrl, page }) => {
   const fcpSpan = eventData.spans?.filter(({ description }) => description === 'first-contentful-paint')[0];
 
   expect(fcpSpan).toBeDefined();
-  expect(fcpSpan?.op).toBe('paint');
+  expect(fcpSpan?.op).toBe('browser.paint');
   expect(fcpSpan?.parent_span_id).toBe(eventData.contexts?.trace?.span_id);
 });

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

@@ -29,6 +29,7 @@ import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
 import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
 import { DEBUG_BUILD } from '../debug-build';
 import { URL_FULL } from '@sentry/conventions/attributes';
+import { BROWSER_BROWSER_PAINT_SPAN_OP } from '@sentry/conventions/op';
 interface NavigatorNetworkInformation {
   readonly connection?: NetworkInformation;
 }
@@ -561,7 +562,7 @@ export function _addMeasureSpans(
   if (measureStartTimestamp <= measureEndTimestamp) {
     startAndEndSpan(span, measureStartTimestamp, measureEndTimestamp, {
       name: entry.name,
-      op: entry.entryType,
+      op: entry.entryType === 'paint' ? BROWSER_BROWSER_PAINT_SPAN_OP : entry.entryType,
       attributes,
     });
   }

packages/browser-utils/test/browser/browserMetrics.test.ts

@@ -280,7 +280,7 @@ describe('_addMeasureSpans', () => {
         expect.objectContaining({ description: 'measure-pass', op: 'measure' }),
         expect.objectContaining({ description: 'mark-pass', op: 'mark' }),
         // name matches but type is not (mark|measure) => should not be ignored
-        expect.objectContaining({ description: 'mark-ignore', op: 'paint' }),
+        expect.objectContaining({ description: 'mark-ignore', op: 'browser.paint' }),
       ]),
     );
   });