WIP INP in v8??

Author: mydea

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/init.js

@@ -11,6 +11,7 @@ Sentry.init({
       _experiments: {
         enableInteractions: true,
       },
+      enableInp: true,
     }),
   ],
   tracesSampleRate: 1,

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

@@ -1,6 +1,6 @@
 import type { Route } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { Contexts, Event, SpanJSON } from '@sentry/types';
+import type { Contexts, Event as SentryEvent, Measurements, SpanJSON } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
 import {
@@ -30,7 +30,7 @@ sentryTest('should capture interaction transaction. @firefox', async ({ browserN
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.goto(url);
-  await getFirstSentryEnvelopeRequest<Event>(page);
+  await getFirstSentryEnvelopeRequest<SentryEvent>(page);
 
   await page.locator('[data-test-id=interaction-button]').click();
   await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
@@ -70,12 +70,12 @@ sentryTest(
 
     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);
       await page.locator('[data-test-id=interaction-button]').click();
-      const envelope = await getMultipleSentryEnvelopeRequests<Event>(page, 1);
+      const envelope = await getMultipleSentryEnvelopeRequests<SentryEvent>(page, 1);
       expect(envelope[0].spans).toHaveLength(1);
     }
   },
@@ -97,7 +97,7 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await getFirstSentryEnvelopeRequest<Event>(page);
+    await getFirstSentryEnvelopeRequest<SentryEvent>(page);
 
     await page.locator('[data-test-id=annotated-button]').click();
 
@@ -113,34 +113,50 @@ sentryTest(
   },
 );
 
-sentryTest(
-  'should use the element name for a clicked element when no component name',
-  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` }),
-    );
+sentryTest('should capture an INP click event span. @firefox', async ({ browserName, getLocalTestPath, page }) => {
+  const supportedBrowsers = ['chromium', 'firefox'];
 
-    const url = await getLocalTestPath({ testDir: __dirname });
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
 
-    await page.goto(url);
-    await getFirstSentryEnvelopeRequest<Event>(page);
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
 
-    await page.locator('[data-test-id=styled-button]').click();
+  const url = await getLocalTestPath({ testDir: __dirname });
 
-    const envelopes = await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
-    expect(envelopes).toHaveLength(1);
-    const eventData = envelopes[0];
+  await page.goto(url);
+  await getFirstSentryEnvelopeRequest<SentryEvent>(page);
 
-    expect(eventData.spans).toHaveLength(1);
+  await page.locator('[data-test-id=interaction-button]').click();
+  await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
 
-    const interactionSpan = eventData.spans![0];
-    expect(interactionSpan.op).toBe('ui.interaction.click');
-    expect(interactionSpan.description).toBe('body > StyledButton');
-  },
-);
+  // Wait for the interaction transaction from the enableInteractions experiment
+  await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+
+  const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<
+    SpanJSON & { exclusive_time: number; measurements: Measurements }
+  >(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 > button.clicked');
+  expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(0);
+  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) {

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

@@ -0,0 +1,152 @@
+import {
+  SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME,
+  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT,
+  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE,
+  SentrySpan,
+  createSpanEnvelope,
+  getActiveSpan,
+  getClient,
+  getCurrentScope,
+  getRootSpan,
+  sampleSpan,
+  spanIsSampled,
+  spanToJSON,
+} from '@sentry/core';
+import type { Integration, SpanAttributes } from '@sentry/types';
+import { browserPerformanceTimeOrigin, dropUndefinedKeys, htmlTreeAsString, logger } from '@sentry/utils';
+import { DEBUG_BUILD } from '../debug-build';
+import { addInpInstrumentationHandler } from './instrument';
+import { getBrowserPerformanceAPI, msToSec } from './utils';
+
+/**
+ * Start tracking INP webvital events.
+ */
+export function startTrackingINP(): () => void {
+  const performance = getBrowserPerformanceAPI();
+  if (performance && browserPerformanceTimeOrigin) {
+    const inpCallback = _trackINP();
+
+    return (): void => {
+      inpCallback();
+    };
+  }
+
+  return () => undefined;
+}
+
+const INP_ENTRY_MAP: Record<string, 'click' | 'hover' | 'drag' | 'press'> = {
+  click: 'click',
+  pointerdown: 'click',
+  pointerup: 'click',
+  mousedown: 'click',
+  mouseup: 'click',
+  touchstart: 'click',
+  touchend: 'click',
+  mouseover: 'hover',
+  mouseout: 'hover',
+  mouseenter: 'hover',
+  mouseleave: 'hover',
+  pointerover: 'hover',
+  pointerout: 'hover',
+  pointerenter: 'hover',
+  pointerleave: 'hover',
+  dragstart: 'drag',
+  dragend: 'drag',
+  drag: 'drag',
+  dragenter: 'drag',
+  dragleave: 'drag',
+  dragover: 'drag',
+  drop: 'drag',
+  keydown: 'press',
+  keyup: 'press',
+  keypress: 'press',
+  input: 'press',
+};
+
+/** Starts tracking the Interaction to Next Paint on the current page. */
+function _trackINP(): () => void {
+  return addInpInstrumentationHandler(({ metric }) => {
+    const client = getClient();
+    if (!client || metric.value == undefined) {
+      return;
+    }
+
+    const entry = metric.entries.find(entry => entry.duration === metric.value && INP_ENTRY_MAP[entry.name]);
+
+    if (!entry) {
+      return;
+    }
+
+    const interactionType = INP_ENTRY_MAP[entry.name];
+
+    const options = client.getOptions();
+    /** Build the INP span, create an envelope from the span, and then send the envelope */
+    const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
+    const duration = msToSec(metric.value);
+    const scope = getCurrentScope();
+    const activeSpan = getActiveSpan();
+    const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;
+
+    const routeName = rootSpan ? spanToJSON(rootSpan).description : undefined;
+    const user = scope.getUser();
+
+    // We need to get the replay, user, and activeTransaction from the current scope
+    // so that we can associate replay id, profile id, and a user display to the span
+    const replay = client.getIntegrationByName<Integration & { getReplayId: () => string }>('Replay');
+
+    const replayId = replay && replay.getReplayId();
+
+    const userDisplay = user !== undefined ? user.email || user.id || user.ip_address : undefined;
+    const profileId = scope.getScopeData().contexts?.profile?.profile_id as string | undefined;
+
+    const name = htmlTreeAsString(entry.target);
+    const parentSampled = activeSpan ? spanIsSampled(activeSpan) : undefined;
+    const attributes: SpanAttributes = dropUndefinedKeys({
+      release: options.release,
+      environment: options.environment,
+      transaction: routeName,
+      [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: metric.value,
+      user: userDisplay || undefined,
+      profile_id: profileId || undefined,
+      replay_id: replayId || undefined,
+    });
+
+    /** Check to see if the span should be sampled */
+    const [sampled] = sampleSpan(options, {
+      name,
+      parentSampled,
+      attributes,
+      transactionContext: {
+        name,
+        parentSampled,
+      },
+    });
+
+    // Nothing to do
+    if (!sampled) {
+      return;
+    }
+
+    const span = new SentrySpan({
+      startTimestamp: startTime,
+      endTimestamp: startTime + duration,
+      op: `ui.interaction.${interactionType}`,
+      name,
+      attributes,
+    });
+
+    span.addEvent('inp', {
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: 'millisecond',
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: metric.value,
+    });
+
+    const envelope = span ? createSpanEnvelope([span]) : undefined;
+    const transport = client && client.getTransport();
+    if (transport && envelope) {
+      transport.send(envelope).then(null, reason => {
+        DEBUG_BUILD && logger.error('Error while sending interaction:', reason);
+      });
+    }
+    return;
+  });
+}