fix(browser): Fix INP span creation & transaction tagging (#12372)

Instead of #12358,
this is a simpler change which ensures we pick the transaction from the
scope instead.

I also added tests for the various different scenarios, to ensure we see
how they behave:

1. INP is emitted _during_ pageload (span is active)
2. INP is emitted _after_ pageload

a. Pageload is parametrized (route)
b. Pageload is unparametrized (URL)

When the pageload is unparametrized (default browser SDK), the
transaction is not added to the DSC envelope header (which is correct
and also what we do in other places). it is _always_ added to the span
attributes now, though. If no span is active, it will use
transactionName from the last active pageload/navigation span.

There may be edge cases where this is not 100% correct (e.g. if the INP
span is only emitted once the pageload is done but another navigation
already started) but IMHO these are more edge cases and this change is
probably fine for now..?

(While at it, I also added an origin to the INP spans)

Author: mydea

.size-limit.js

@@ -15,14 +15,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '34 KB',
+    limit: '35 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '71 KB',
+    limit: '72 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',
@@ -48,14 +48,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '75 KB',
+    limit: '76 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '87 KB',
+    limit: '89 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback, metrics)',
@@ -69,21 +69,21 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'metrics'),
     gzip: true,
-    limit: '40 KB',
+    limit: '30 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'feedbackIntegration'),
     gzip: true,
-    limit: '40 KB',
+    limit: '41 KB',
   },
   {
     name: '@sentry/browser (incl. sendFeedback)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'sendFeedback'),
     gzip: true,
-    limit: '28 KB',
+    limit: '29 KB',
   },
   {
     name: '@sentry/browser (incl. FeedbackAsync)',
@@ -107,7 +107,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '37 KB',
+    limit: '38 KB',
   },
   // Vue SDK (ESM)
   {
@@ -143,7 +143,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '36 KB',
+    limit: '37 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -193,7 +193,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '37 KB',
+    limit: '38 KB',
   },
   // SvelteKit SDK (ESM)
   {

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

@@ -0,0 +1,27 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 1000,
+      enableLongTask: false,
+      enableInp: true,
+      instrumentPageLoad: false,
+      instrumentNavigation: false,
+    }),
+  ],
+  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/subject.js

@@ -0,0 +1,18 @@
+const blockUI = (delay = 70) => e => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < delay) {
+    //
+  }
+
+  e.target.classList.add('clicked');
+};
+
+document.querySelector('[data-test-id=not-so-slow-button]').addEventListener('click', blockUI(300));
+document.querySelector('[data-test-id=slow-button]').addEventListener('click', blockUI(450));
+document.querySelector('[data-test-id=normal-button]').addEventListener('click', blockUI());

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-late/template.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Task</div>
+    <button data-test-id="slow-button" data-sentry-element="SlowButton">Slow</button>
+    <button data-test-id="not-so-slow-button" data-sentry-element="NotSoSlowButton">Not so slow</button>
+    <button data-test-id="normal-button" data-sentry-element="NormalButton">Click Me</button>
+  </body>
+</html>

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

@@ -0,0 +1,98 @@
+import { expect } from '@playwright/test';
+import type { Event as SentryEvent, SpanEnvelope } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getFirstSentryEnvelopeRequest,
+  getMultipleSentryEnvelopeRequests,
+  properFullEnvelopeRequestParser,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
+
+sentryTest('should capture an INP click event span after pageload', async ({ browserName, getLocalTestPath, page }) => {
+  const supportedBrowsers = ['chromium'];
+
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+  await getFirstSentryEnvelopeRequest<SentryEvent>(page); // wait for page load
+
+  const spanEnvelopePromise = getMultipleSentryEnvelopeRequests<SpanEnvelope>(
+    page,
+    1,
+    { envelopeType: 'span' },
+    properFullEnvelopeRequestParser,
+  );
+
+  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 page.evaluate(() => {
+    window.dispatchEvent(new Event('pagehide'));
+  });
+
+  // Get the INP span envelope
+  const spanEnvelope = (await spanEnvelopePromise)[0];
+
+  const spanEnvelopeHeaders = spanEnvelope[0];
+  const spanEnvelopeItem = spanEnvelope[1][0][1];
+
+  const traceId = spanEnvelopeHeaders.trace!.trace_id;
+  expect(traceId).toMatch(/[a-f0-9]{32}/);
+
+  expect(spanEnvelopeHeaders).toEqual({
+    sent_at: expect.any(String),
+    trace: {
+      environment: 'production',
+      public_key: 'public',
+      sample_rate: '1',
+      sampled: 'true',
+      trace_id: traceId,
+    },
+  });
+
+  const inpValue = spanEnvelopeItem.measurements?.inp.value;
+  expect(inpValue).toBeGreaterThan(0);
+
+  expect(spanEnvelopeItem).toEqual({
+    data: {
+      'sentry.exclusive_time': inpValue,
+      'sentry.op': 'ui.interaction.click',
+      'sentry.origin': 'auto.http.browser.inp',
+      'sentry.sample_rate': 1,
+      'sentry.source': 'custom',
+      transaction: 'test-url',
+    },
+    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-f0-9]{16}/),
+    start_timestamp: expect.any(Number),
+    timestamp: expect.any(Number),
+    trace_id: traceId,
+  });
+});

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

@@ -0,0 +1,27 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 1000,
+      enableLongTask: false,
+      enableInp: true,
+      instrumentPageLoad: false,
+      instrumentNavigation: false,
+    }),
+  ],
+  tracesSampleRate: 1,
+});
+
+const client = Sentry.getClient();
+
+// Force page load transaction name to a testable value
+Sentry.startBrowserTracingPageLoadSpan(client, {
+  name: 'test-route',
+  attributes: {
+    [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+  },
+});

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

@@ -0,0 +1,18 @@
+const blockUI = (delay = 70) => e => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < delay) {
+    //
+  }
+
+  e.target.classList.add('clicked');
+};
+
+document.querySelector('[data-test-id=not-so-slow-button]').addEventListener('click', blockUI(300));
+document.querySelector('[data-test-id=slow-button]').addEventListener('click', blockUI(450));
+document.querySelector('[data-test-id=normal-button]').addEventListener('click', blockUI());

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-parametrized-late/template.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Task</div>
+    <button data-test-id="slow-button" data-sentry-element="SlowButton">Slow</button>
+    <button data-test-id="not-so-slow-button" data-sentry-element="NotSoSlowButton">Not so slow</button>
+    <button data-test-id="normal-button" data-sentry-element="NormalButton">Click Me</button>
+  </body>
+</html>