feat(webvitals): Add profile id, replay id, and user to standalone INP spans

packages/core/src/semanticAttributes.ts

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

packages/core/src/tracing/span.ts

@@ -20,6 +20,7 @@ import { DEBUG_BUILD } from '../debug-build';
 import { getMetricSummaryJsonForSpan } from '../metrics/metric-summary';
 import {
   SEMANTIC_ATTRIBUTE_MEASUREMENTS,
+  SEMANTIC_ATTRIBUTE_PROFILE_ID,
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
 } from '../semanticAttributes';
@@ -632,6 +633,7 @@ export class Span implements SpanInterface {
       origin: this._attributes[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] as SpanOrigin | undefined,
       _metrics_summary: getMetricSummaryJsonForSpan(this),
       measurements: this._attributes[SEMANTIC_ATTRIBUTE_MEASUREMENTS] as Measurements | undefined,
+      profile_id: this._attributes[SEMANTIC_ATTRIBUTE_PROFILE_ID] as string | undefined,
     });
   }
 

packages/core/src/tracing/transaction.ts

@@ -258,6 +258,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,
@@ -539,6 +540,15 @@ function registerInpInteractionListener(
   },
 ): 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?.getIntegrationByName?.('Replay') as
+      | (Integration & { getReplayId: () => string })
+      | undefined;
+    // eslint-disable-next-line deprecation/deprecation
+    const activeTransaction = getActiveTransaction();
+    const user = getCurrentScope()?.getUser();
     for (const entry of entries) {
       if (isPerformanceEventTiming(entry)) {
         const duration = entry.duration;
@@ -564,6 +574,9 @@ function registerInpInteractionListener(
               routeName,
               duration,
               parentContext,
+              user,
+              activeTransaction,
+              replay,
             };
           }
         }

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

@@ -214,10 +214,20 @@ function _trackINP(interactionIdtoRouteNameMapping: InteractionRouteNameMapping)
     /** 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, parentContext } =
+    const { routeName, parentContext, activeTransaction, user, replay } =
       entry.interactionId !== undefined
         ? interactionIdtoRouteNameMapping[entry.interactionId]
-        : { routeName: undefined, parentContext: undefined };
+        : {
+            routeName: undefined,
+            parentContext: undefined,
+            activeTransaction: undefined,
+            user: undefined,
+            replay: undefined,
+          };
+    // eslint-disable-next-line deprecation/deprecation
+    const userDisplay = user?.email || user?.id || user?.ip_address;
+    const profileId = activeTransaction?.getProfileId();
+    const replayId = replay?.getReplayId();
     const span = new Span({
       startTimestamp: startTime,
       endTimestamp: startTime + duration,
@@ -231,6 +241,9 @@ function _trackINP(interactionIdtoRouteNameMapping: InteractionRouteNameMapping)
         environment: options.environment,
         transaction: routeName,
         exclusive_time: metric.value,
+        ...(userDisplay !== undefined && userDisplay !== '' ? { user: userDisplay } : {}),
+        ...(profileId !== undefined ? { profile_id: profileId } : {}),
+        ...(replayId !== undefined ? { replay_id: replayId } : {}),
       },
     });
 

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { TransactionContext } from '@sentry/types';
+import type { Integration, Transaction, TransactionContext, User } from '@sentry/types';
 import type { FirstInputPolyfillCallback } from './types/polyfills';
 
 export * from './types/base';
@@ -165,5 +165,12 @@ declare global {
 }
 
 export type InteractionRouteNameMapping = {
-  [key: string]: { routeName: string; duration: number; parentContext: TransactionContext };
+  [key: string]: {
+    routeName: string;
+    duration: number;
+    parentContext: TransactionContext;
+    user?: User;
+    activeTransaction?: Transaction;
+    replay?: Integration & { getReplayId: () => 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;
 }
 
 /**