feat(browser): Add INP support for v8 (#11650)

This is a step to support INP on v8.
It tries to forward port some stuff that has been merged into v7. It is
a bit tricky to do this properly as this was spread over multiple PRs
and cannot be directly ported at once.

Closes #10945

---------

Co-authored-by: s1gr1d <[email protected]>
Co-authored-by: Sigrid Huemer <[email protected]>

Author: mydea

.size-limit.js

@@ -52,7 +52,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '86 KB',
+    limit: '87 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
@@ -165,7 +165,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.feedback.min.js'),
     gzip: false,
     brotli: false,
-    limit: '261 KB',
+    limit: '264 KB',
   },
   // Next.js SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/assets/script.js renamed to dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/subject.js

@@ -1,4 +1,4 @@
-const delay = e => {
+const blockUI = e => {
   const startTime = Date.now();
 
   function getElasped() {
@@ -13,6 +13,6 @@ const delay = e => {
   e.target.classList.add('clicked');
 };
 
-document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
-document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);
-document.querySelector('[data-test-id=styled-button]').addEventListener('click', delay);
+document.querySelector('[data-test-id=interaction-button]').addEventListener('click', blockUI);
+document.querySelector('[data-test-id=annotated-button]').addEventListener('click', blockUI);
+document.querySelector('[data-test-id=styled-button]').addEventListener('click', blockUI);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/template.html

@@ -8,6 +8,5 @@
     <button data-test-id="interaction-button">Click Me</button>
     <button data-test-id="annotated-button" data-sentry-component="AnnotatedButton" data-sentry-element="StyledButton">Click Me</button>
     <button data-test-id="styled-button" data-sentry-element="StyledButton">Click Me</button>
-    <script src="https://example.com/path/to/script.js"></script>
   </body>
 </html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts

@@ -1,6 +1,5 @@
-import type { Route } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { Contexts, Event, SpanJSON } from '@sentry/types';
+import type { Event as SentryEvent } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
 import {
@@ -9,33 +8,24 @@ import {
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
 
-type TransactionJSON = SpanJSON & {
-  spans: SpanJSON[];
-  contexts: Contexts;
-  platform: string;
-  type: string;
-};
-
-const wait = (time: number) => new Promise(res => setTimeout(res, time));
-
 sentryTest('should capture interaction transaction. @firefox', async ({ browserName, getLocalTestPath, page }) => {
   const supportedBrowsers = ['chromium', 'firefox'];
 
   if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
     sentryTest.skip();
   }
-
-  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
-
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.goto(url);
-  await getFirstSentryEnvelopeRequest<Event>(page);
+  await getFirstSentryEnvelopeRequest<SentryEvent>(page);
+
+  const envelopesPromise = getMultipleSentryEnvelopeRequests<SentryEvent>(page, 1);
 
   await page.locator('[data-test-id=interaction-button]').click();
   await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
 
-  const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+  const envelopes = await envelopesPromise;
+
   expect(envelopes).toHaveLength(1);
 
   const eventData = envelopes[0];
@@ -64,18 +54,15 @@ sentryTest(
       sentryTest.skip();
     }
 
-    await page.route('**/path/to/script.js', (route: Route) =>
-      route.fulfill({ path: `${__dirname}/assets/script.js` }),
-    );
-
     const url = await getLocalTestPath({ testDir: __dirname });
     await page.goto(url);
-    await getFirstSentryEnvelopeRequest<Event>(page);
+    await getFirstSentryEnvelopeRequest<SentryEvent>(page);
 
     for (let i = 0; i < 4; i++) {
-      await wait(100);
+      const envelopePromise = getMultipleSentryEnvelopeRequests<SentryEvent>(page, 1);
+      await page.waitForTimeout(1000);
       await page.locator('[data-test-id=interaction-button]').click();
-      const envelope = await getMultipleSentryEnvelopeRequests<Event>(page, 1);
+      const envelope = await envelopePromise;
       expect(envelope[0].spans).toHaveLength(1);
     }
   },
@@ -90,18 +77,16 @@ sentryTest(
       sentryTest.skip();
     }
 
-    await page.route('**/path/to/script.js', (route: Route) =>
-      route.fulfill({ path: `${__dirname}/assets/script.js` }),
-    );
-
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await getFirstSentryEnvelopeRequest<Event>(page);
+    await getFirstSentryEnvelopeRequest<SentryEvent>(page);
+
+    const envelopePromise = getMultipleSentryEnvelopeRequests<SentryEvent>(page, 1);
 
     await page.locator('[data-test-id=annotated-button]').click();
 
-    const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+    const envelopes = await envelopePromise;
     expect(envelopes).toHaveLength(1);
     const eventData = envelopes[0];
 
@@ -122,21 +107,19 @@ sentryTest(
       sentryTest.skip();
     }
 
-    await page.route('**/path/to/script.js', (route: Route) =>
-      route.fulfill({ path: `${__dirname}/assets/script.js` }),
-    );
-
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await getFirstSentryEnvelopeRequest<Event>(page);
+    await getFirstSentryEnvelopeRequest<SentryEvent>(page);
+
+    const envelopesPromise = getMultipleSentryEnvelopeRequests<SentryEvent>(page, 1);
 
     await page.locator('[data-test-id=styled-button]').click();
 
-    const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+    const envelopes = await envelopesPromise;
     expect(envelopes).toHaveLength(1);
-    const eventData = envelopes[0];
 
+    const eventData = envelopes[0];
     expect(eventData.spans).toHaveLength(1);
 
     const interactionSpan = eventData.spans![0];

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

@@ -0,0 +1,15 @@
+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,
+    }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp/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/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/test.ts

@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test';
+import type { Event as SentryEvent, SpanJSON } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getFirstSentryEnvelopeRequest,
+  getMultipleSentryEnvelopeRequests,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
+
+sentryTest('should capture an INP click event span.', 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 spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<SpanJSON>(page, 1, {
+    envelopeType: 'span',
+  });
+
+  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 spanEnvelopes = await spanEnvelopesPromise;
+
+  expect(spanEnvelopes).toHaveLength(1);
+  expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
+  expect(spanEnvelopes[0].description).toBe('body > NormalButton');
+  expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements?.inp.value).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements?.inp.unit).toBe('millisecond');
+});
+
+sentryTest(
+  'should choose the slowest interaction click event when INP is triggered.',
+  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);
+
+    await page.locator('[data-test-id=normal-button]').click();
+    await page.locator('.clicked[data-test-id=normal-button]').isVisible();
+
+    await page.waitForTimeout(500);
+
+    await page.locator('[data-test-id=slow-button]').click();
+    await page.locator('.clicked[data-test-id=slow-button]').isVisible();
+
+    await page.waitForTimeout(500);
+
+    const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<SpanJSON>(page, 1, {
+      envelopeType: 'span',
+    });
+
+    // Page hide to trigger INP
+    await page.evaluate(() => {
+      window.dispatchEvent(new Event('pagehide'));
+    });
+
+    // Get the INP span envelope
+    const spanEnvelopes = await spanEnvelopesPromise;
+
+    expect(spanEnvelopes).toHaveLength(1);
+    expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
+    expect(spanEnvelopes[0].description).toBe('body > SlowButton');
+    expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(400);
+    expect(spanEnvelopes[0].measurements?.inp.value).toBeGreaterThan(400);
+    expect(spanEnvelopes[0].measurements?.inp.unit).toBe('millisecond');
+  },
+);

packages/browser-utils/src/index.ts

@@ -11,6 +11,7 @@ export {
   startTrackingInteractions,
   startTrackingLongTasks,
   startTrackingWebVitals,
+  startTrackingINP,
 } from './metrics/browserMetrics';
 
 export { addClickKeypressInstrumentationHandler } from './instrument/dom';

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

@@ -14,7 +14,7 @@ import {
   addTtfbInstrumentationHandler,
 } from './instrument';
 import { WINDOW } from './types';
-import { isMeasurementValue, startAndEndSpan } from './utils';
+import { getBrowserPerformanceAPI, isMeasurementValue, msToSec, startAndEndSpan } from './utils';
 import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
 import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
 
@@ -58,19 +58,6 @@ interface NavigatorDeviceMemory {
 
 const MAX_INT_AS_BYTES = 2147483647;
 
-/**
- * Converts from milliseconds to seconds
- * @param time time in ms
- */
-function msToSec(time: number): number {
-  return time / 1000;
-}
-
-function getBrowserPerformanceAPI(): Performance | undefined {
-  // @ts-expect-error we want to make sure all of these are available, even if TS is sure they are
-  return WINDOW && WINDOW.addEventListener && WINDOW.performance;
-}
-
 let _performanceCursor: number = 0;
 
 let _measurements: Measurements = {};
@@ -170,6 +157,8 @@ export function startTrackingInteractions(): void {
   });
 }
 
+export { startTrackingINP } from './inp';
+
 /** Starts tracking the Cumulative Layout Shift on the current page. */
 function _trackCLS(): () => void {
   return addClsInstrumentationHandler(({ metric }) => {
@@ -226,7 +215,7 @@ function _trackTtfb(): () => void {
   });
 }
 
-/** Add performance related spans to a span */
+/** Add performance related spans to a transaction */
 export function addPerformanceEntries(span: Span): void {
   const performance = getBrowserPerformanceAPI();
   if (!performance || !WINDOW.performance.getEntries || !browserPerformanceTimeOrigin) {