refactor react native tracing to new function style integration

Author: Krystof Woldrich

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,7 +114,7 @@ export function getDefaultIntegrations(options: ReactNativeClientOptions): Integ
     integrations.push(userInteractionIntegration());
   }
   if (hasTracingEnabled && options.enableAutoPerformanceTracing) {
-    integrations.push(new ReactNativeTracing());
+    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,5 @@
-export { ReactNativeTracing } from './reactnativetracing';
+export { reactNativeTracingIntegration } 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';
 
@@ -108,7 +108,7 @@ export const appStartIntegration = ({
   standalone?: boolean;
 } = {}): AppStartIntegration => {
   let _client: Client | undefined = undefined;
-  let standalone = standaloneUserOption;
+  const standalone = standaloneUserOption;
   let isEnabled = true;
   let appStartDataFlushed = false;
 
@@ -123,11 +123,10 @@ export const appStartIntegration = ({
     }
   };
 
-  const afterAllSetup = (client: Client): void => {
+  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;
+      // FIXME: 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 &&