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

.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>