(4) ref(tracing): Extract UserInteractionTracing as standalone interaction

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 ## Unreleased
 
+### Changes
+
+- New Native Frames Integration ([#3996](https://github.com/getsentry/sentry-react-native/pull/3996))
+- New Stall Tracking Integration ([#3997](https://github.com/getsentry/sentry-react-native/pull/3997))
+- New User Interaction Tracing Integration ([#3999](https://github.com/getsentry/sentry-react-native/pull/3999))
+- New App Start Integration ([#3852](https://github.com/getsentry/sentry-react-native/pull/3852))
+
+  By default app start spans are attached to the first created transaction.
+  Standalone mode creates single root span (transaction) including only app start data.
+
+  ```js
+  import Sentry from '@sentry/react-native';
+
+  Sentry.init({
+    tracesSampleRate: 1.0,
+    enableAppStartTracking: true, // default true
+    enableNativeFramesTracking: true, // default true
+    enableStallTracking: true, // default true
+    enableUserInteractionTracing: true, // default false
+    integrations: [
+      Sentry.appStartIntegration({
+        standalone: false, // default false
+      }),
+    ],
+  });
+  ```
+
 ### Fixes
 
 - Pass `sampleRate` option to the Android SDK ([#3979](https://github.com/getsentry/sentry-react-native/pull/3979))

samples/react-native/src/App.tsx

@@ -88,6 +88,9 @@ Sentry.init({
         maskAllVectors: true,
         // maskAllText: false,
       }),
+      Sentry.appStartIntegration({
+        standalone: false,
+      }),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },

src/js/client.ts

@@ -146,10 +146,6 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
     if (routingName) {
       this.addIntegration(createIntegration(routingName));
     }
-    const enableUserInteractionTracing = tracing?.options.enableUserInteractionTracing;
-    if (enableUserInteractionTracing) {
-      this.addIntegration(createIntegration('ReactNativeUserInteractionTracing'));
-    }
   }
 
   /**

src/js/integrations/default.ts

@@ -6,6 +6,7 @@ import type { ReactNativeClientOptions } from '../options';
 import { ReactNativeTracing } from '../tracing';
 import { isExpoGo, notWeb } from '../utils/environment';
 import {
+  appStartIntegration,
   breadcrumbsIntegration,
   browserApiErrorsIntegration,
   browserGlobalHandlersIntegration,
@@ -23,13 +24,16 @@ import {
   inboundFiltersIntegration,
   mobileReplayIntegration,
   modulesLoaderIntegration,
+  nativeFramesIntegration,
   nativeLinkedErrorsIntegration,
   nativeReleaseIntegration,
   reactNativeErrorHandlersIntegration,
   reactNativeInfoIntegration,
   screenshotIntegration,
   sdkInfoIntegration,
   spotlightIntegration,
+  stallTrackingIntegration,
+  userInteractionIntegration,
   viewHierarchyIntegration,
 } from './exports';
 import { createReactNativeRewriteFrames } from './rewriteframes';
@@ -97,6 +101,18 @@ export function getDefaultIntegrations(options: ReactNativeClientOptions): Integ
     options.enableTracing ||
     typeof options.tracesSampleRate === 'number' ||
     typeof options.tracesSampler === 'function';
+  if (hasTracingEnabled && options.enableAppStartTracking) {
+    integrations.push(appStartIntegration());
+  }
+  if (hasTracingEnabled && options.enableNativeFramesTracking) {
+    integrations.push(nativeFramesIntegration());
+  }
+  if (hasTracingEnabled && options.enableStallTracking) {
+    integrations.push(stallTrackingIntegration());
+  }
+  if (hasTracingEnabled && options.enableUserInteractionTracing) {
+    integrations.push(userInteractionIntegration());
+  }
   if (hasTracingEnabled && options.enableAutoPerformanceTracing) {
     integrations.push(new ReactNativeTracing());
   }

src/js/integrations/exports.ts

@@ -13,6 +13,10 @@ export { viewHierarchyIntegration } from './viewhierarchy';
 export { expoContextIntegration } from './expocontext';
 export { spotlightIntegration } from './spotlight';
 export { mobileReplayIntegration } from '../replay/mobilereplay';
+export { appStartIntegration } from '../tracing/integrations/appStart';
+export { nativeFramesIntegration } from '../tracing/integrations/nativeFrames';
+export { stallTrackingIntegration } from '../tracing/integrations/stalltracking';
+export { userInteractionIntegration } from '../tracing/integrations/userInteraction';
 
 export {
   breadcrumbsIntegration,

src/js/options.ts

@@ -188,6 +188,38 @@ export interface BaseReactNativeOptions {
    */
   beforeScreenshot?: (event: Event, hint: EventHint) => boolean;
 
+  /**
+   * Track the app start time by adding measurements to the first route transaction. If there is no routing instrumentation
+   * an app start transaction will be started.
+   *
+   * Requires performance monitoring to be enabled.
+   *
+   * @default true
+   */
+  enableAppStartTracking?: boolean;
+
+  /**
+   * Track the slow and frozen frames in the application. Enabling this options will add
+   * slow and frozen frames measurements to all created root spans (transactions).
+   *
+   * @default true
+   */
+  enableNativeFramesTracking?: boolean;
+
+  /**
+   * Track when and how long the JS event loop stalls for. Adds stalls as measurements to all transactions.
+   *
+   * @default true
+   */
+  enableStallTracking?: boolean;
+
+  /**
+   * Trace User Interaction events like touch and gestures.
+   *
+   * @default false
+   */
+  enableUserInteractionTracing?: boolean;
+
   /**
    * Options which are in beta, or otherwise not guaranteed to be stable.
    */

src/js/sdk.tsx

@@ -14,7 +14,6 @@ import type { ReactNativeClientOptions, ReactNativeOptions, ReactNativeWrapperOp
 import { shouldEnableNativeNagger } from './options';
 import { enableSyncToNative } from './scopeSync';
 import { TouchEventBoundary } from './touchevents';
-import type { ReactNativeTracing } from './tracing';
 import { ReactNativeProfiler } from './tracing';
 import { useEncodePolyfill } from './transports/encodePolyfill';
 import { DEFAULT_BUFFER_SIZE, makeNativeTransportFactory } from './transports/native';
@@ -34,6 +33,10 @@ const DEFAULT_OPTIONS: ReactNativeOptions = {
   attachStacktrace: true,
   enableCaptureFailedRequests: false,
   enableNdk: true,
+  enableAppStartTracking: true,
+  enableNativeFramesTracking: true,
+  enableStallTracking: true,
+  enableUserInteractionTracing: false,
 };
 
 /**
@@ -112,11 +115,6 @@ export function wrap<P extends Record<string, unknown>>(
   RootComponent: React.ComponentType<P>,
   options?: ReactNativeWrapperOptions
 ): React.ComponentType<P> {
-  const tracingIntegration = getClient()?.getIntegrationByName?.('ReactNativeTracing') as ReactNativeTracing | undefined;
-  if (tracingIntegration) {
-    tracingIntegration.useAppStartWithProfiler = true;
-  }
-
   const profilerProps = {
     ...(options?.profilerProps ?? {}),
     name: RootComponent.displayName ?? 'Root',

src/js/touchevents.tsx

@@ -7,6 +7,7 @@ import { StyleSheet, View } from 'react-native';
 
 import { createIntegration } from './integrations/factory';
 import type { ReactNativeTracing } from './tracing';
+import { startUserInteractionSpan } from './tracing/integrations/userInteraction';
 import { UI_ACTION_TOUCH } from './tracing/ops';
 
 export type TouchEventBoundaryProps = {
@@ -200,7 +201,7 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
       this._logTouchEvent(touchPath, label);
     }
 
-    this._tracingIntegration?.startUserInteractionSpan({
+    startUserInteractionSpan({
       elementId: label,
       op: UI_ACTION_TOUCH,
     });

src/js/tracing/gesturetracing.ts

@@ -1,9 +1,9 @@
-import { addBreadcrumb, getClient } from '@sentry/core';
+import { addBreadcrumb } from '@sentry/core';
 import type { Breadcrumb } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
+import { startUserInteractionSpan } from './integrations/userInteraction';
 import { UI_ACTION } from './ops';
-import type { ReactNativeTracing } from './reactnativetracing';
 
 export const DEFAULT_BREADCRUMB_CATEGORY = 'gesture';
 export const DEFAULT_BREADCRUMB_TYPE = 'user';
@@ -69,9 +69,7 @@ export function sentryTraceGesture<GestureT>(
 
   const originalOnBegin = gestureCandidate.handlers.onBegin;
   (gesture as unknown as Required<BaseGesture>).handlers.onBegin = (event: GestureEvent) => {
-    getClient()
-      ?.getIntegrationByName<ReactNativeTracing>('ReactNativeTracing')
-      ?.startUserInteractionSpan({ elementId: label, op: `${UI_ACTION}.${name}` });
+    startUserInteractionSpan({ elementId: label, op: `${UI_ACTION}.${name}` });
 
     addGestureBreadcrumb(`Gesture ${label} begin.`, { event, name });