(5) ref(tracing): Remove ReactNativeTracing deprecated options and use new integrations style

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Changes
 
+- Removed deprecated ReactNativeTracing option `idleTimeout` use `idleTimeoutMs` instead ([#3998](https://github.com/getsentry/sentry-react-native/pull/3998))
+- Removed deprecated ReactNativeTracing option `maxTransactionDuration` use `finalTimeoutMs` instead ([#3998](https://github.com/getsentry/sentry-react-native/pull/3998))
+- Removed `beforeNavigate` use `beforeStartSpan` instead ([#3998](https://github.com/getsentry/sentry-react-native/pull/3998))
+  - `beforeStartSpan` is executed before the span start, compared to `beforeNavigate` which was executed before the navigation ended (after the span was created)
 - 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))
@@ -22,6 +26,12 @@
     enableStallTracking: true, // default true
     enableUserInteractionTracing: true, // default false
     integrations: [
+      Sentry.reactNativeTracingIntegration({
+        beforeStartSpan: (startSpanOptions) => {
+          startSpanOptions.name = 'New Name';
+          return startSpanOptions;
+        },
+      }),
       Sentry.appStartIntegration({
         standalone: false, // default false
       }),

samples/expo/app/_layout.tsx

@@ -54,7 +54,7 @@ process.env.EXPO_SKIP_DURING_EXPORT !== 'true' && Sentry.init({
         // default: [/.*/]
         failedRequestTargets: [/.*/],
       }),
-      new Sentry.ReactNativeTracing({
+      Sentry.reactNativeTracingIntegration({
         routingInstrumentation,
       }),
     );

samples/react-native/src/App.tsx

@@ -66,11 +66,10 @@ Sentry.init({
   },
   integrations(integrations) {
     integrations.push(
-      new Sentry.ReactNativeTracing({
+      Sentry.reactNativeTracingIntegration({
         // The time to wait in ms until the transaction will be finished, For testing, default is 1000 ms
-        idleTimeout: 5000,
+        idleTimeoutMs: 5_000,
         routingInstrumentation: reactNavigationInstrumentation,
-        enableUserInteractionTracing: true,
         ignoreEmptyBackNavigationTransactions: true,
       }),
       Sentry.httpClientIntegration({

src/js/client.ts

@@ -19,7 +19,7 @@ import { defaultSdkInfo } from './integrations/sdkinfo';
 import type { ReactNativeClientOptions } from './options';
 import type { mobileReplayIntegration } from './replay/mobilereplay';
 import { MOBILE_REPLAY_INTEGRATION_NAME } from './replay/mobilereplay';
-import type { ReactNativeTracing } from './tracing';
+import { getReactNativeTracingIntegration } from './tracing/reactnativetracing';
 import { createUserFeedbackEnvelope, items } from './utils/envelope';
 import { ignoreRequireCycleLogs } from './utils/ignorerequirecyclelogs';
 import { mergeOutcomes } from './utils/outcome';
@@ -141,7 +141,7 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
    */
   protected _setupIntegrations(): void {
     super._setupIntegrations();
-    const tracing = this.getIntegrationByName<ReactNativeTracing>('ReactNativeTracing');
+    const tracing = getReactNativeTracingIntegration(this);
     const routingName = tracing?.options?.routingInstrumentation?.name;
     if (routingName) {
       this.addIntegration(createIntegration(routingName));

src/js/index.ts

@@ -58,7 +58,7 @@ export { init, wrap, nativeCrash, flush, close, captureUserFeedback, withScope }
 export { TouchEventBoundary, withTouchEventBoundary } from './touchevents';
 
 export {
-  ReactNativeTracing,
+  reactNativeTracingIntegration,
   ReactNavigationV5Instrumentation,
   ReactNavigationInstrumentation,
   ReactNativeNavigationInstrumentation,

src/js/integrations/default.ts

@@ -3,7 +3,7 @@ import type { BrowserOptions } from '@sentry/react';
 import type { Integration } from '@sentry/types';
 
 import type { ReactNativeClientOptions } from '../options';
-import { ReactNativeTracing } from '../tracing';
+import { reactNativeTracingIntegration } from '../tracing';
 import { isExpoGo, notWeb } from '../utils/environment';
 import {
   appStartIntegration,
@@ -114,10 +114,7 @@ export function getDefaultIntegrations(options: ReactNativeClientOptions): Integ
     integrations.push(userInteractionIntegration());
   }
   if (hasTracingEnabled && options.enableAutoPerformanceTracing) {
-    integrations.push(new ReactNativeTracing());
-  }
-  if (hasTracingEnabled && options.enableAppStartTracking) {
-    integrations.push(appStartIntegration());
+    integrations.push(reactNativeTracingIntegration());
   }
   if (options.enableCaptureFailedRequests) {
     integrations.push(httpClientIntegration());

src/js/touchevents.tsx

@@ -6,7 +6,6 @@ import type { GestureResponderEvent } from 'react-native';
 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';
 
@@ -92,17 +91,12 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
 
   public readonly name: string = 'TouchEventBoundary';
 
-  private _tracingIntegration: ReactNativeTracing | null = null;
-
   /**
    * Registers the TouchEventBoundary as a Sentry Integration.
    */
   public componentDidMount(): void {
     const client = getClient();
     client?.addIntegration?.(createIntegration(this.name));
-    if (!this._tracingIntegration && client) {
-      this._tracingIntegration = client.getIntegrationByName<ReactNativeTracing>('ReactNativeTracing') || null;
-    }
   }
 
   /**

src/js/tracing/index.ts

@@ -1,4 +1,8 @@
-export { ReactNativeTracing } from './reactnativetracing';
+export {
+  reactNativeTracingIntegration,
+  INTEGRATION_NAME as REACT_NATIVE_TRACING_INTEGRATION_NAME,
+} from './reactnativetracing';
+export type { ReactNativeTracingIntegration } from './reactnativetracing';
 
 export type { RoutingInstrumentationInstance } from './routingInstrumentation';
 export { RoutingInstrumentation } from './routingInstrumentation';

src/js/tracing/integrations/appStart.ts

@@ -22,7 +22,7 @@ import {
   APP_START_WARM as APP_START_WARM_OP,
   UI_LOAD as UI_LOAD_OP,
 } from '../ops';
-import { ReactNativeTracing } from '../reactnativetracing';
+import { getReactNativeTracingIntegration } from '../reactnativetracing';
 import { SEMANTIC_ATTRIBUTE_SENTRY_OP } from '../semanticAttributes';
 import { createChildSpanJSON, createSpanJSON, getBundleStartTimestampMs } from '../utils';
 
@@ -126,8 +126,7 @@ export const appStartIntegration = ({
   const afterAllSetup = (client: Client): void => {
     if (standaloneUserOption === undefined) {
       // If not user defined, set based on the routing instrumentation presence
-      standalone = !client.getIntegrationByName<ReactNativeTracing>(ReactNativeTracing.id)?.options
-        .routingInstrumentation;
+      standalone = !getReactNativeTracingIntegration(client)?.options.routingInstrumentation;
     }
   };
 

src/js/tracing/integrations/userInteraction.ts

@@ -45,7 +45,7 @@ export const startUserInteractionSpan = (userInteractionId: {
     logger.log(`[${INTEGRATION_NAME}] User Interaction Tracing can not create transaction with undefined elementId.`);
     return undefined;
   }
-  if (!tracing.currentRoute) {
+  if (!tracing.state.currentRoute) {
     logger.log(`[${INTEGRATION_NAME}] User Interaction Tracing can not create transaction without a current route.`);
     return undefined;
   }
@@ -61,7 +61,7 @@ export const startUserInteractionSpan = (userInteractionId: {
     return undefined;
   }
 
-  const name = `${tracing.currentRoute}.${elementId}`;
+  const name = `${tracing.state.currentRoute}.${elementId}`;
   if (
     activeTransaction &&
     spanToJSON(activeTransaction).description === name &&

src/js/tracing/reactnativenavigation.ts

@@ -1,8 +1,14 @@
-import { addBreadcrumb, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import {
+  addBreadcrumb,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  spanToJSON,
+} from '@sentry/core';
 import type { Span } from '@sentry/types';
 
 import type { EmitterSubscription } from '../utils/rnlibrariesinterface';
 import { isSentrySpan } from '../utils/span';
+import { DEFAULT_NAVIGATION_SPAN_NAME } from './reactnativetracing';
 import type { OnConfirmRoute, TransactionCreator } from './routingInstrumentation';
 import { InternalRoutingInstrumentation } from './routingInstrumentation';
 import type { BeforeNavigate } from './types';
@@ -124,7 +130,7 @@ export class ReactNativeNavigationInstrumentation extends InternalRoutingInstrum
       this._discardLatestTransaction();
     }
 
-    this._latestTransaction = this.onRouteWillChange({ name: 'Route Change' });
+    this._latestTransaction = this.onRouteWillChange({ name: DEFAULT_NAVIGATION_SPAN_NAME });
 
     this._stateChangeTimeout = setTimeout(
       this._discardLatestTransaction.bind(this),
@@ -151,7 +157,9 @@ export class ReactNativeNavigationInstrumentation extends InternalRoutingInstrum
 
     const routeHasBeenSeen = this._recentComponentIds.includes(event.componentId);
 
-    this._latestTransaction.updateName(event.componentName);
+    if (spanToJSON(this._latestTransaction).description === DEFAULT_NAVIGATION_SPAN_NAME) {
+      this._latestTransaction.updateName(event.componentName);
+    }
     this._latestTransaction.setAttributes({
       // TODO: Should we include pass props? I don't know exactly what it contains, cant find it in the RNavigation docs
       'route.name': event.componentName,