feat(performance): create Interaction standalone spans on inp events (#10709)

Creates standalone span when onINP is triggered, and sends the span to sentry. An InteractionRouteNameMapping is maintained to get the origin route name of the candidate INP span. The mapping is capped at 10 entries to minimize memory. Tags INP spans with profile id, replay id, user and uses sampling rates.

Author: edwardgou-sentry

.size-limit.js

@@ -52,7 +52,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, browserTracingIntegration }',
     gzip: true,
-    limit: '35 KB',
+    limit: '36 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback) - Webpack (gzipped)',

packages/browser/src/profiling/utils.ts

@@ -583,6 +583,9 @@ export function createProfilingEvent(
   return createProfilePayload(profile_id, start_timestamp, profile, event);
 }
 
+// TODO (v8): We need to obtain profile ids in @sentry-internal/tracing,
+// but we don't have access to this map because importing this map would
+// cause a circular dependancy. We need to resolve this in v8.
 const PROFILE_MAP: Map<string, JSSelfProfile> = new Map();
 /**
  *

packages/core/src/semanticAttributes.ts

@@ -19,3 +19,8 @@ export const SEMANTIC_ATTRIBUTE_SENTRY_OP = 'sentry.op';
  * Use this attribute to represent the origin of a span.
  */
 export const SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN = 'sentry.origin';
+
+/**
+ * The id of the profile that this span occured in.
+ */
+export const SEMANTIC_ATTRIBUTE_PROFILE_ID = 'profile_id';

packages/core/src/tracing/index.ts

@@ -27,3 +27,4 @@ export {
 } from './trace';
 export { getDynamicSamplingContextFromClient, getDynamicSamplingContextFromSpan } from './dynamicSamplingContext';
 export { setMeasurement } from './measurement';
+export { isValidSampleRate } from './sampling';

packages/core/src/tracing/sampling.ts

@@ -103,7 +103,7 @@ export function sampleTransaction<T extends Transaction>(
 /**
  * Checks the given sample rate to make sure it is valid type and value (a boolean, or a number between 0 and 1).
  */
-function isValidSampleRate(rate: unknown): boolean {
+export function isValidSampleRate(rate: unknown): boolean {
   // we need to check NaN explicitly because it's of type 'number' and therefore wouldn't get caught by this typecheck
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (isNaN(rate) || !(typeof rate === 'number' || typeof rate === 'boolean')) {

packages/core/src/tracing/span.ts

@@ -18,7 +18,11 @@ import { dropUndefinedKeys, logger, timestampInSeconds, uuid4 } from '@sentry/ut
 
 import { DEBUG_BUILD } from '../debug-build';
 import { getMetricSummaryJsonForSpan } from '../metrics/metric-summary';
-import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '../semanticAttributes';
+import {
+  SEMANTIC_ATTRIBUTE_PROFILE_ID,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+} from '../semanticAttributes';
 import { getRootSpan } from '../utils/getRootSpan';
 import {
   TRACE_FLAG_NONE,
@@ -634,6 +638,7 @@ export class Span implements SpanInterface {
       trace_id: this._traceId,
       origin: this._attributes[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] as SpanOrigin | undefined,
       _metrics_summary: getMetricSummaryJsonForSpan(this),
+      profile_id: this._attributes[SEMANTIC_ATTRIBUTE_PROFILE_ID] as string | undefined,
       exclusive_time: this._exclusiveTime,
       measurements: Object.keys(this._measurements).length > 0 ? this._measurements : undefined,
     });

packages/core/src/tracing/transaction.ts

@@ -254,6 +254,16 @@ export class Transaction extends SpanClass implements TransactionInterface {
     this._hub = hub;
   }
 
+  /**
+   * Get the profile id of the transaction.
+   */
+  public getProfileId(): string | undefined {
+    if (this._contexts !== undefined && this._contexts['profile'] !== undefined) {
+      return this._contexts['profile'].profile_id as string;
+    }
+    return undefined;
+  }
+
   /**
    * Finish the transaction & prepare the event to send to Sentry.
    */

packages/tracing-internal/src/browser/browserTracingIntegration.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import type { IdleTransaction } from '@sentry/core';
-import { getActiveSpan } from '@sentry/core';
+import { getActiveSpan, getClient, getCurrentScope } from '@sentry/core';
 import { getCurrentHub } from '@sentry/core';
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
@@ -12,6 +12,7 @@ import {
 } from '@sentry/core';
 import type {
   Client,
+  Integration,
   IntegrationFn,
   StartSpanOptions,
   Transaction,
@@ -29,15 +30,18 @@ import {
 
 import { DEBUG_BUILD } from '../common/debug-build';
 import { registerBackgroundTabDetection } from './backgroundtab';
+import { addPerformanceInstrumentationHandler } from './instrument';
 import {
   addPerformanceEntries,
+  startTrackingINP,
   startTrackingInteractions,
   startTrackingLongTasks,
   startTrackingWebVitals,
 } from './metrics';
 import type { RequestInstrumentationOptions } from './request';
 import { defaultRequestInstrumentationOptions, instrumentOutgoingRequests } from './request';
 import { WINDOW } from './types';
+import type { InteractionRouteNameMapping } from './web-vitals/types';
 
 export const BROWSER_TRACING_INTEGRATION_ID = 'BrowserTracing';
 
@@ -103,6 +107,13 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
    */
   enableLongTask: boolean;
 
+  /**
+   * If true, Sentry will capture INP web vitals as standalone spans .
+   *
+   * Default: false
+   */
+  enableInp: boolean;
+
   /**
    * _metricOptions allows the user to send options to change how metrics are collected.
    *
@@ -142,6 +153,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
   instrumentPageLoad: true,
   markBackgroundSpan: true,
   enableLongTask: true,
+  enableInp: false,
   _experiments: {},
   ...defaultRequestInstrumentationOptions,
 };
@@ -181,16 +193,25 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 
   const _collectWebVitals = startTrackingWebVitals();
 
+  /** Stores a mapping of interactionIds from PerformanceEventTimings to the origin interaction path */
+  const interactionIdtoRouteNameMapping: InteractionRouteNameMapping = {};
+  if (options.enableInp) {
+    startTrackingINP(interactionIdtoRouteNameMapping);
+  }
+
   if (options.enableLongTask) {
     startTrackingLongTasks();
   }
   if (options._experiments.enableInteractions) {
     startTrackingInteractions();
   }
 
-  const latestRoute: { name: string | undefined; source: TransactionSource | undefined } = {
+  const latestRoute: {
+    name: string | undefined;
+    context: TransactionContext | undefined;
+  } = {
     name: undefined,
-    source: undefined,
+    context: undefined,
   };
 
   /** Create routing idle transaction. */
@@ -238,7 +259,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
           finalContext.metadata;
 
     latestRoute.name = finalContext.name;
-    latestRoute.source = getSource(finalContext);
+    latestRoute.context = finalContext;
 
     if (finalContext.sampled === false) {
       DEBUG_BUILD && logger.log(`[Tracing] Will not send ${finalContext.op} transaction because of beforeNavigate.`);
@@ -389,6 +410,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         registerInteractionListener(options, latestRoute);
       }
 
+      if (options.enableInp) {
+        registerInpInteractionListener(interactionIdtoRouteNameMapping, latestRoute);
+      }
+
       instrumentOutgoingRequests({
         traceFetch,
         traceXHR,
@@ -448,7 +473,10 @@ export function getMetaContent(metaName: string): string | undefined {
 /** Start listener for interaction transactions */
 function registerInteractionListener(
   options: BrowserTracingOptions,
-  latestRoute: { name: string | undefined; source: TransactionSource | undefined },
+  latestRoute: {
+    name: string | undefined;
+    context: TransactionContext | undefined;
+  },
 ): void {
   let inflightInteractionTransaction: IdleTransaction | undefined;
   const registerInteractionTransaction = (): void => {
@@ -483,7 +511,7 @@ function registerInteractionListener(
       op,
       trimEnd: true,
       data: {
-        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: latestRoute.source || 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: latestRoute.context ? getSource(latestRoute.context) : undefined || 'url',
       },
     };
 
@@ -504,6 +532,70 @@ function registerInteractionListener(
   });
 }
 
+function isPerformanceEventTiming(entry: PerformanceEntry): entry is PerformanceEventTiming {
+  return 'duration' in entry;
+}
+
+/** We store up to 10 interaction candidates max to cap memory usage. This is the same cap as getINP from web-vitals */
+const MAX_INTERACTIONS = 10;
+
+/** Creates a listener on interaction entries, and maps interactionIds to the origin path of the interaction */
+function registerInpInteractionListener(
+  interactionIdtoRouteNameMapping: InteractionRouteNameMapping,
+  latestRoute: {
+    name: string | undefined;
+    context: TransactionContext | undefined;
+  },
+): void {
+  addPerformanceInstrumentationHandler('event', ({ entries }) => {
+    const client = getClient();
+    // 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 !== undefined && client.getIntegrationByName !== undefined
+        ? (client.getIntegrationByName('Replay') as Integration & { getReplayId: () => string })
+        : undefined;
+    const replayId = replay !== undefined ? replay.getReplayId() : undefined;
+    // eslint-disable-next-line deprecation/deprecation
+    const activeTransaction = getActiveTransaction();
+    const currentScope = getCurrentScope();
+    const user = currentScope !== undefined ? currentScope.getUser() : undefined;
+    for (const entry of entries) {
+      if (isPerformanceEventTiming(entry)) {
+        const duration = entry.duration;
+        const keys = Object.keys(interactionIdtoRouteNameMapping);
+        const minInteractionId =
+          keys.length > 0
+            ? keys.reduce((a, b) => {
+                return interactionIdtoRouteNameMapping[a].duration < interactionIdtoRouteNameMapping[b].duration
+                  ? a
+                  : b;
+              })
+            : undefined;
+        if (minInteractionId === undefined || duration > interactionIdtoRouteNameMapping[minInteractionId].duration) {
+          const interactionId = entry.interactionId;
+          const routeName = latestRoute.name;
+          const parentContext = latestRoute.context;
+          if (interactionId && routeName && parentContext) {
+            if (minInteractionId && Object.keys(interactionIdtoRouteNameMapping).length >= MAX_INTERACTIONS) {
+              // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+              delete interactionIdtoRouteNameMapping[minInteractionId];
+            }
+            interactionIdtoRouteNameMapping[interactionId] = {
+              routeName,
+              duration,
+              parentContext,
+              user,
+              activeTransaction,
+              replayId,
+            };
+          }
+        }
+      }
+    }
+  });
+}
+
 function getSource(context: TransactionContext): TransactionSource | undefined {
   const sourceFromAttributes = context.attributes && context.attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE];
   // eslint-disable-next-line deprecation/deprecation

packages/tracing-internal/src/browser/instrument.ts

@@ -3,12 +3,13 @@ import { getFunctionName, logger } from '@sentry/utils';
 import { DEBUG_BUILD } from '../common/debug-build';
 import { onCLS } from './web-vitals/getCLS';
 import { onFID } from './web-vitals/getFID';
+import { onINP } from './web-vitals/getINP';
 import { onLCP } from './web-vitals/getLCP';
 import { observe } from './web-vitals/lib/observe';
 
 type InstrumentHandlerTypePerformanceObserver = 'longtask' | 'event' | 'navigation' | 'paint' | 'resource';
 
-type InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'fid';
+type InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'fid' | 'inp';
 
 // We provide this here manually instead of relying on a global, as this is not available in non-browser environements
 // And we do not want to expose such types
@@ -19,6 +20,14 @@ interface PerformanceEntry {
   readonly startTime: number;
   toJSON(): Record<string, unknown>;
 }
+interface PerformanceEventTiming extends PerformanceEntry {
+  processingStart: number;
+  processingEnd: number;
+  duration: number;
+  cancelable?: boolean;
+  target?: unknown | null;
+  interactionId?: number;
+}
 
 interface Metric {
   /**
@@ -86,6 +95,7 @@ const instrumented: { [key in InstrumentHandlerType]?: boolean } = {};
 let _previousCls: Metric | undefined;
 let _previousFid: Metric | undefined;
 let _previousLcp: Metric | undefined;
+let _previousInp: Metric | undefined;
 
 /**
  * Add a callback that will be triggered when a CLS metric is available.
@@ -123,9 +133,19 @@ export function addFidInstrumentationHandler(callback: (data: { metric: Metric }
   return addMetricObserver('fid', callback, instrumentFid, _previousFid);
 }
 
+/**
+ * Add a callback that will be triggered when a INP metric is available.
+ * Returns a cleanup callback which can be called to remove the instrumentation handler.
+ */
+export function addInpInstrumentationHandler(
+  callback: (data: { metric: Omit<Metric, 'entries'> & { entries: PerformanceEventTiming[] } }) => void,
+): CleanupHandlerCallback {
+  return addMetricObserver('inp', callback, instrumentInp, _previousInp);
+}
+
 export function addPerformanceInstrumentationHandler(
   type: 'event',
-  callback: (data: { entries: (PerformanceEntry & { target?: unknown | null })[] }) => void,
+  callback: (data: { entries: ((PerformanceEntry & { target?: unknown | null }) | PerformanceEventTiming)[] }) => void,
 ): CleanupHandlerCallback;
 export function addPerformanceInstrumentationHandler(
   type: InstrumentHandlerTypePerformanceObserver,
@@ -199,6 +219,15 @@ function instrumentLcp(): StopListening {
   });
 }
 
+function instrumentInp(): void {
+  return onINP(metric => {
+    triggerHandlers('inp', {
+      metric,
+    });
+    _previousInp = metric;
+  });
+}
+
 function addMetricObserver(
   type: InstrumentHandlerTypeMetric,
   callback: InstrumentHandlerCallback,