ref(browser): send INP as span v2 envelope

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-late/init.js

@@ -6,21 +6,13 @@ Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [
     Sentry.browserTracingIntegration({
+      idleTimeout: 1000,
       enableLongTask: false,
       enableInp: true,
-      instrumentPageLoad: false,
-      instrumentNavigation: false,
+      beforeStartSpan: options => ({ ...options, name: 'test-url' }),
     }),
+    Sentry.spanStreamingIntegration(),
   ],
+  traceLifecycle: 'stream',
   tracesSampleRate: 1,
 });
-
-const client = Sentry.getClient();
-
-// Force page load transaction name to a testable value
-Sentry.startBrowserTracingPageLoadSpan(client, {
-  name: 'test-url',
-  attributes: {
-    [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
-  },
-});

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

@@ -1,89 +1,36 @@
 import { expect } from '@playwright/test';
-import type { Event as SentryEvent, SpanEnvelope } from '@sentry/core';
+import type { Event as SentryEvent } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
-import {
-  getFirstSentryEnvelopeRequest,
-  getMultipleSentryEnvelopeRequests,
-  hidePage,
-  properFullEnvelopeRequestParser,
-  shouldSkipTracingTest,
-} from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, hidePage, shouldSkipTracingTest } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
 sentryTest('should capture an INP click event span after pageload', async ({ browserName, getLocalTestUrl, page }) => {
-  const supportedBrowsers = ['chromium'];
-
-  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+  if (shouldSkipTracingTest() || browserName !== 'chromium') {
     sentryTest.skip();
   }
 
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.goto(url);
-  await getFirstSentryEnvelopeRequest<SentryEvent>(page); // wait for page load
+  await getFirstSentryEnvelopeRequest<SentryEvent>(page);
 
-  const spanEnvelopePromise = getMultipleSentryEnvelopeRequests<SpanEnvelope>(
-    page,
-    1,
-    { envelopeType: 'span' },
-    properFullEnvelopeRequestParser,
-  );
+  const inpSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'ui.interaction.click');
 
   await page.locator('[data-test-id=normal-button]').click();
   await page.locator('.clicked[data-test-id=normal-button]').isVisible();
 
   await page.waitForTimeout(500);
-
-  // Page hide to trigger INP
   await hidePage(page);
 
-  // Get the INP span envelope
-  const spanEnvelope = (await spanEnvelopePromise)[0];
-
-  const spanEnvelopeHeaders = spanEnvelope[0];
-  const spanEnvelopeItem = spanEnvelope[1][0][1];
+  const inpSpan = await inpSpanPromise;
 
-  const traceId = spanEnvelopeHeaders.trace!.trace_id;
-  expect(traceId).toMatch(/[a-f\d]{32}/);
+  expect(inpSpan.name).toBe('body > NormalButton');
+  expect(inpSpan.attributes?.['sentry.op']).toEqual({ type: 'string', value: 'ui.interaction.click' });
+  expect(inpSpan.attributes?.['sentry.origin']).toEqual({ type: 'string', value: 'auto.http.browser.inp' });
+  expect(inpSpan.attributes?.['sentry.transaction']?.value).toBe('test-url');
+  expect(inpSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
 
-  expect(spanEnvelopeHeaders).toEqual({
-    sent_at: expect.any(String),
-    trace: {
-      environment: 'production',
-      public_key: 'public',
-      sample_rate: '1',
-      sampled: 'true',
-      trace_id: traceId,
-      sample_rand: expect.any(String),
-    },
-  });
-
-  const inpValue = spanEnvelopeItem.measurements?.inp.value;
+  const inpValue = inpSpan.attributes?.['browser.web_vital.inp.value']?.value as number;
   expect(inpValue).toBeGreaterThan(0);
-
-  expect(spanEnvelopeItem).toEqual({
-    data: {
-      'sentry.exclusive_time': inpValue,
-      'sentry.op': 'ui.interaction.click',
-      'sentry.origin': 'auto.http.browser.inp',
-      'sentry.source': 'custom',
-      transaction: 'test-url',
-      'user_agent.original': expect.stringContaining('Chrome'),
-    },
-    measurements: {
-      inp: {
-        unit: 'millisecond',
-        value: inpValue,
-      },
-    },
-    description: 'body > NormalButton',
-    exclusive_time: inpValue,
-    op: 'ui.interaction.click',
-    origin: 'auto.http.browser.inp',
-    is_segment: true,
-    segment_id: spanEnvelopeItem.span_id,
-    span_id: expect.stringMatching(/[a-f\d]{16}/),
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    trace_id: traceId,
-  });
+  expect(inpSpan.attributes?.['sentry.exclusive_time']?.value).toBeGreaterThan(0);
 });

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-navigate/init.js

@@ -9,19 +9,10 @@ Sentry.init({
       idleTimeout: 1000,
       enableLongTask: false,
       enableInp: true,
-      instrumentPageLoad: false,
-      instrumentNavigation: false,
+      beforeStartSpan: options => ({ ...options, name: 'test-url' }),
     }),
+    Sentry.spanStreamingIntegration(),
   ],
+  traceLifecycle: 'stream',
   tracesSampleRate: 1,
 });
-
-const client = Sentry.getClient();
-
-// Force page load transaction name to a testable value
-Sentry.startBrowserTracingPageLoadSpan(client, {
-  name: 'test-url',
-  attributes: {
-    [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
-  },
-});