feat(performance): Add sampling rate to INP spans. Also add replay id, profile id, and user.

Updates INP spans to check for sampling rate, similar to transactions.
Also Adds profile id, replay id, and user to standalone INP spans.

User comes from the current scope.
Replay Id is retrieved from the relay integration module and calling getReplayId().
Profile Id is retrieved from getting the active transaction at the time of the interaction
Since profile id isn't added to the transaction until the transaction ends, we need to hold onto a reference to the transaction instead of trying to grab the profile id right away

Author: edwardgou-sentry

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,
@@ -198,9 +199,12 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     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. */
@@ -248,7 +252,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.`);
@@ -462,7 +466,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 => {
@@ -497,7 +504,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',
       },
     };
 
@@ -528,9 +535,24 @@ 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; source: TransactionSource | undefined },
+  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;
@@ -546,12 +568,20 @@ function registerInpInteractionListener(
         if (minInteractionId === undefined || duration > interactionIdtoRouteNameMapping[minInteractionId].duration) {
           const interactionId = entry.interactionId;
           const routeName = latestRoute.name;
-          if (interactionId && routeName) {
+          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 };
+            interactionIdtoRouteNameMapping[interactionId] = {
+              routeName,
+              duration,
+              parentContext,
+              user,
+              activeTransaction,
+              replayId,
+            };
           }
         }
       }

packages/tracing-internal/src/browser/metrics/index.ts

@@ -1,7 +1,14 @@
 /* eslint-disable max-lines */
 import type { IdleTransaction, Transaction } from '@sentry/core';
-import { Span, getActiveTransaction, getClient, setMeasurement } from '@sentry/core';
-import type { Measurements, SpanContext } from '@sentry/types';
+import {
+  Span,
+  getActiveTransaction,
+  getClient,
+  hasTracingEnabled,
+  isValidSampleRate,
+  setMeasurement,
+} from '@sentry/core';
+import type { ClientOptions, Measurements, SpanContext, TransactionContext } from '@sentry/types';
 import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logger, parseUrl } from '@sentry/utils';
 
 import { spanToJSON } from '@sentry/core';
@@ -202,33 +209,57 @@ function _trackINP(interactionIdtoRouteNameMapping: InteractionRouteNameMapping)
     if (!entry || !client) {
       return;
     }
-    const { release, environment } = client.getOptions();
+    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 routeName =
-      entry.interactionId !== undefined ? interactionIdtoRouteNameMapping[entry.interactionId].routeName : undefined;
+    const { routeName, parentContext, activeTransaction, user, replayId } =
+      entry.interactionId !== undefined
+        ? interactionIdtoRouteNameMapping[entry.interactionId]
+        : {
+            routeName: undefined,
+            parentContext: undefined,
+            activeTransaction: undefined,
+            user: undefined,
+            replayId: undefined,
+          };
+    const userDisplay = user !== undefined ? user.email || user.id || user.ip_address : undefined;
+    // eslint-disable-next-line deprecation/deprecation
+    const profileId = activeTransaction !== undefined ? activeTransaction.getProfileId() : undefined;
     const span = new Span({
       startTimestamp: startTime,
       endTimestamp: startTime + duration,
       op: 'ui.interaction.click',
       name: htmlTreeAsString(entry.target),
       attributes: {
-        release,
-        environment,
+        release: options.release,
+        environment: options.environment,
         transaction: routeName,
+        ...(userDisplay !== undefined && userDisplay !== '' ? { user: userDisplay } : {}),
+        ...(profileId !== undefined ? { profile_id: profileId } : {}),
+        ...(replayId !== undefined ? { replay_id: replayId } : {}),
       },
       exclusiveTime: metric.value,
       measurements: {
         inp: { value: metric.value, unit: 'millisecond' },
       },
     });
-    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);
-      });
+
+    /** Check to see if the span should be sampled */
+    const sampleRate = getSampleRate(parentContext, options);
+    if (!sampleRate) {
+      return;
+    }
+
+    if (Math.random() < (sampleRate as number | boolean)) {
+      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;
     }
   });
 }
@@ -631,3 +662,35 @@ export function _addTtfbToMeasurements(
     }
   }
 }
+
+/** Taken from @sentry/core sampling.ts */
+function getSampleRate(transactionContext: TransactionContext | undefined, options: ClientOptions): number | boolean {
+  if (!hasTracingEnabled(options)) {
+    return false;
+  }
+  let sampleRate;
+  if (transactionContext !== undefined && typeof options.tracesSampler === 'function') {
+    sampleRate = options.tracesSampler({
+      transactionContext,
+      name: transactionContext.name,
+      parentSampled: transactionContext.parentSampled,
+      attributes: {
+        // eslint-disable-next-line deprecation/deprecation
+        ...transactionContext.data,
+        ...transactionContext.attributes,
+      },
+      location: WINDOW.location,
+    });
+  } else if (transactionContext !== undefined && transactionContext.sampled !== undefined) {
+    sampleRate = transactionContext.sampled;
+  } else if (typeof options.tracesSampleRate !== 'undefined') {
+    sampleRate = options.tracesSampleRate;
+  } else {
+    sampleRate = 1;
+  }
+  if (!isValidSampleRate(sampleRate)) {
+    DEBUG_BUILD && logger.warn('[Tracing] Discarding transaction because of invalid sample rate.');
+    return false;
+  }
+  return sampleRate;
+}

packages/tracing-internal/src/browser/web-vitals/types.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import type { Transaction, TransactionContext, User } from '@sentry/types';
 import type { FirstInputPolyfillCallback } from './types/polyfills';
 
 export * from './types/base';
@@ -163,4 +164,13 @@ declare global {
   }
 }
 
-export type InteractionRouteNameMapping = { [key: string]: { routeName: string; duration: number } };
+export type InteractionRouteNameMapping = {
+  [key: string]: {
+    routeName: string;
+    duration: number;
+    parentContext: TransactionContext;
+    user?: User;
+    activeTransaction?: Transaction;
+    replayId?: string;
+  };
+};

packages/types/src/transaction.ts

@@ -152,6 +152,12 @@ export interface Transaction extends TransactionContext, Omit<Span, 'setName' |
    * @deprecated Use top-level `getDynamicSamplingContextFromSpan` instead.
    */
   getDynamicSamplingContext(): Partial<DynamicSamplingContext>;
+
+  /**
+   * Get the profile id from the transaction
+   * @deprecated Use `toJSON()` or access the fields directly instead.
+   */
+  getProfileId(): string | undefined;
 }
 
 /**