From 870e47acdee085fe2205fe5a234fa5f55a697a29 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 6 Dec 2020 18:04:34 +0700
Subject: [PATCH 01/40] wip: Fetch/XHR + React Navigation Instrumentation

---
 sample/src/App.tsx                         |  33 +++-
 sample/src/screens/HomeScreen.tsx          |   9 +-
 sample/src/screens/ManualTrackerScreen.tsx | 158 +++++++++++++++++
 sample/src/screens/TrackerScreen.tsx       |  33 +---
 src/js/index.ts                            |   4 +
 src/js/tracing/index.ts                    |   3 +
 src/js/tracing/reactnativetracing.ts       | 188 +++++++++++++++++++++
 src/js/tracing/reactnavigation.ts          |  74 ++++++++
 src/js/tracing/router.ts                   |  30 ++++
 9 files changed, 497 insertions(+), 35 deletions(-)
 create mode 100644 sample/src/screens/ManualTrackerScreen.tsx
 create mode 100644 src/js/tracing/index.ts
 create mode 100644 src/js/tracing/reactnativetracing.ts
 create mode 100644 src/js/tracing/reactnavigation.ts
 create mode 100644 src/js/tracing/router.ts

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index 4b84f911da..6006be36ad 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -1,19 +1,25 @@
 import * as React from 'react';
-import { Provider } from 'react-redux';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {Provider} from 'react-redux';
+import {
+  NavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
 
 // Import the Sentry React Native SDK
 import * as Sentry from '@sentry/react-native';
 
 import HomeScreen from './screens/HomeScreen';
 import TrackerScreen from './screens/TrackerScreen';
+import ManualTrackerScreen from './screens/ManualTrackerScreen';
 import PerformanceTimingScreen from './screens/PerformanceTimingScreen';
 import EndToEndTestsScreen from './screens/EndToEndTestsScreen';
 
-import { store } from './reduxApp';
-import { version as packageVersion } from '../../package.json';
-import { SENTRY_INTERNAL_DSN } from './dsn';
+import {store} from './reduxApp';
+import {version as packageVersion} from '../../package.json';
+import {SENTRY_INTERNAL_DSN} from './dsn';
+
+const reactNavigationInstrumentation = new Sentry.Tracing.ReactNavigationInstrumentation();
 
 Sentry.init({
   // Replace the example DSN below with your own DSN:
@@ -24,6 +30,12 @@ Sentry.init({
     return e;
   },
   maxBreadcrumbs: 150, // Extend from the default 100 breadcrumbs.
+  integrations: [
+    new Sentry.Tracing.ReactNativeTracing({
+      routingInstrumentation: reactNavigationInstrumentation,
+      tracingOrigins: ['localhost', /^\//, /^https:\/\//],
+    }),
+  ],
   enableAutoSessionTracking: true,
   // For testing, session close when 5 seconds (instead of the default 30) in the background.
   sessionTrackingIntervalMillis: 5000,
@@ -38,12 +50,19 @@ Sentry.init({
 const Stack = createStackNavigator();
 
 const App = () => {
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  React.useEffect(() => {
+    reactNavigationInstrumentation.registerNavigationContainer(navigation);
+  }, []);
+
   return (
     <Provider store={store}>
-      <NavigationContainer>
+      <NavigationContainer ref={navigation}>
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Tracker" component={TrackerScreen} />
+          <Stack.Screen name="ManualTracker" component={ManualTrackerScreen} />
           <Stack.Screen
             name="PerformanceTiming"
             component={PerformanceTimingScreen}
diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 6550ef6c55..06bed10730 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -207,7 +207,14 @@ const HomeScreen = (props: Props) => {
               onPress={() => {
                 props.navigation.navigate('Tracker');
               }}>
-              <Text style={styles.buttonText}>Tracing Example</Text>
+              <Text style={styles.buttonText}>Auto Tracing Example</Text>
+            </TouchableOpacity>
+            <View style={styles.spacer} />
+            <TouchableOpacity
+              onPress={() => {
+                props.navigation.navigate('ManualTracker');
+              }}>
+              <Text style={styles.buttonText}>Manual Tracing Example</Text>
             </TouchableOpacity>
             <View style={styles.spacer} />
             <TouchableOpacity
diff --git a/sample/src/screens/ManualTrackerScreen.tsx b/sample/src/screens/ManualTrackerScreen.tsx
new file mode 100644
index 0000000000..a487c33aa0
--- /dev/null
+++ b/sample/src/screens/ManualTrackerScreen.tsx
@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {Button, View, StyleSheet, Text, ActivityIndicator} from 'react-native';
+
+import * as Sentry from '@sentry/react-native';
+import {RouteProp} from '@react-navigation/native';
+
+import {ParamList} from '../types';
+
+/**
+ * An example of how to add a Sentry Transaction to a React component manually.
+ * So you can control all spans that belong to that one transaction.
+ *
+ * This screen calls an API to get the latest COVID-19 Data to display. We attach a span
+ * to the fetch call and track the time it takes for Promise to resolve.
+ */
+const TrackerScreen = () => {
+  const [cases, setCases] = React.useState<{
+    TotalConfirmed: number;
+    TotalDeaths: number;
+    TotalRecovered: number;
+  } | null>(null);
+
+  const transaction = React.useRef(null);
+
+  React.useEffect(() => {
+    // Initialize the transaction for the screen.
+    transaction.current = Sentry.startTransaction({
+      name: 'Tracker Screen',
+    });
+
+    return () => {
+      // Finishing the transaction triggers sending the data to Sentry.
+      transaction.current?.finish();
+      transaction.current = null;
+      Sentry.configureScope((scope) => {
+        scope.setSpan(undefined);
+      });
+    };
+  }, []);
+
+  const loadData = () => {
+    setCases(null);
+
+    // Create a child span for the API call.
+    const span = transaction.current?.startChild({
+      op: 'http',
+      description: 'Fetch Covid19 data from API',
+    });
+
+    fetch('https://api.covid19api.com/world/total', {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((response) => response.json())
+      .then((json) => {
+        setCases(json);
+
+        span?.setData('json', json);
+        span?.finish();
+      });
+  };
+
+  React.useEffect(() => {
+    loadData();
+  }, []);
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>Global COVID19 Cases</Text>
+      </View>
+      <View style={styles.card}>
+        {cases ? (
+          <>
+            <Statistic
+              title="Confirmed"
+              count={cases.TotalConfirmed}
+              textColor="#C83852"
+            />
+            <Statistic
+              title="Deaths"
+              count={cases.TotalDeaths}
+              textColor="#362D59"
+            />
+            <Statistic
+              title="Recovered"
+              count={cases.TotalRecovered}
+              textColor="#69C289"
+            />
+          </>
+        ) : (
+          <ActivityIndicator size="small" color="#F6F6F8" />
+        )}
+      </View>
+      <Button title="Refresh" onPress={loadData} />
+    </View>
+  );
+};
+
+export default Sentry.withProfiler(TrackerScreen);
+
+const Statistic = (props: {
+  title: string;
+  count: number;
+  textColor: string;
+}): React.ReactElement => {
+  return (
+    <View style={styles.statisticContainer}>
+      <Text>{props.title}</Text>
+      <Text style={[styles.statisticCount, {color: props.textColor}]}>
+        {`${props.count}`.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    padding: 16,
+  },
+  titleContainer: {
+    paddingBottom: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  card: {
+    width: '100%',
+    height: 240,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#79628C',
+    borderRadius: 6,
+    backgroundColor: '#F6F6F8',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statisticContainer: {
+    width: '100%',
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  statisticTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  statisticCount: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});
diff --git a/sample/src/screens/TrackerScreen.tsx b/sample/src/screens/TrackerScreen.tsx
index 31e99b025a..8f4c365909 100644
--- a/sample/src/screens/TrackerScreen.tsx
+++ b/sample/src/screens/TrackerScreen.tsx
@@ -2,6 +2,9 @@ import * as React from 'react';
 import {Button, View, StyleSheet, Text, ActivityIndicator} from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
+import {RouteProp} from '@react-navigation/native';
+
+import {ParamList} from '../types';
 
 /**
  * An example of how to add a Sentry Transaction to a React component manually.
@@ -10,37 +13,16 @@ import * as Sentry from '@sentry/react-native';
  * This screen calls an API to get the latest COVID-19 Data to display. We attach a span
  * to the fetch call and track the time it takes for Promise to resolve.
  */
-const TrackerScreen = () => {
+const ManualTrackerScreen = () => {
   const [cases, setCases] = React.useState<{
     TotalConfirmed: number;
     TotalDeaths: number;
     TotalRecovered: number;
   } | null>(null);
 
-  const transaction = React.useRef(null);
-
-  React.useEffect(() => {
-    // Initialize the transaction for the screen.
-    transaction.current = Sentry.startTransaction({
-      name: 'Tracker Screen',
-    });
-
-    return () => {
-      // Finishing the transaction triggers sending the data to Sentry.
-      transaction.current?.finish();
-      transaction.current = null;
-    };
-  }, []);
-
   const loadData = () => {
     setCases(null);
 
-    // Create a child span for the API call.
-    const span = transaction.current?.startChild({
-      op: 'http',
-      description: 'Fetch Covid19 data from API',
-    });
-
     fetch('https://api.covid19api.com/world/total', {
       method: 'GET',
       headers: {
@@ -51,9 +33,6 @@ const TrackerScreen = () => {
       .then((response) => response.json())
       .then((json) => {
         setCases(json);
-
-        span?.setData('json', json);
-        span?.finish();
       });
   };
 
@@ -94,6 +73,8 @@ const TrackerScreen = () => {
   );
 };
 
+export default Sentry.withProfiler(ManualTrackerScreen);
+
 const Statistic = (props: {
   title: string;
   count: number;
@@ -109,8 +90,6 @@ const Statistic = (props: {
   );
 };
 
-export default TrackerScreen;
-
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
diff --git a/src/js/index.ts b/src/js/index.ts
index e734edd0df..ddcf88da98 100644
--- a/src/js/index.ts
+++ b/src/js/index.ts
@@ -44,6 +44,7 @@ export {
   ErrorBoundary,
   withErrorBoundary,
   createReduxEnhancer,
+  withProfiler,
 } from "@sentry/react";
 
 import * as Integrations from "./integrations";
@@ -56,6 +57,9 @@ export { ReactNativeClient } from "./client";
 export { init, setDist, setRelease, nativeCrash } from "./sdk";
 export { TouchEventBoundary, withTouchEventBoundary } from "./touchevents";
 
+// TODO:
+export * as Tracing from "./tracing";
+
 /**
  * Adds the sdk info. Make sure this is called after @sentry/react's so this is the top-level SDK.
  */
diff --git a/src/js/tracing/index.ts b/src/js/tracing/index.ts
new file mode 100644
index 0000000000..1b501dd8a5
--- /dev/null
+++ b/src/js/tracing/index.ts
@@ -0,0 +1,3 @@
+export { ReactNativeTracing } from "./reactnativetracing";
+export { ReactNavigationInstrumentation } from "./reactnavigation";
+export { RoutingInstrumentation } from "./router";
diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
new file mode 100644
index 0000000000..a0c3a98b54
--- /dev/null
+++ b/src/js/tracing/reactnativetracing.ts
@@ -0,0 +1,188 @@
+import {
+  defaultRequestInstrumentationOptions,
+  IdleTransaction,
+  registerRequestInstrumentation,
+  RequestInstrumentationOptions,
+  SpanStatus,
+  startIdleTransaction,
+} from "@sentry/tracing";
+import {
+  EventProcessor,
+  Hub,
+  Integration,
+  Transaction as TransactionType,
+  TransactionContext,
+} from "@sentry/types";
+import { logger } from "@sentry/utils";
+
+import { RoutingInstrumentation } from "../tracing/router";
+
+/**
+ * Converts from milliseconds to seconds
+ * @param time time in ms
+ */
+export function msToSec(time: number): number {
+  return time / 1000;
+}
+
+/**
+ * Converts from seconds to milliseconds
+ * @param time time in seconds
+ */
+export function secToMs(time: number): number {
+  return time * 1000;
+}
+
+/**
+ *
+ */
+function adjustTransactionDuration(
+  maxDuration: number,
+  transaction: IdleTransaction,
+  endTimestamp: number
+): void {
+  const diff = endTimestamp - transaction.startTimestamp;
+  const isOutdatedTransaction =
+    endTimestamp && (diff > maxDuration || diff < 0);
+  if (isOutdatedTransaction) {
+    transaction.setStatus(SpanStatus.DeadlineExceeded);
+    transaction.setTag("maxTransactionDurationExceeded", "true");
+  }
+}
+
+export interface ReactNativeTracingOptions
+  extends RequestInstrumentationOptions {
+  /**
+   * The time to wait in ms until the transaction will be finished. The transaction will use the end timestamp of
+   * the last finished span as the endtime for the transaction.
+   * Time is in ms.
+   *
+   * Default: 1000
+   */
+  idleTimeout: number;
+
+  /**
+   * The maximum duration of a transaction before it will be marked as "deadline_exceeded".
+   * If you never want to mark a transaction set it to 0.
+   * Time is in seconds.
+   *
+   * Default: 600
+   */
+  maxTransactionDuration: number;
+
+  routingInstrumentation?: RoutingInstrumentation;
+}
+
+const defaultReactNativeTracingOptions: ReactNativeTracingOptions = {
+  ...defaultRequestInstrumentationOptions,
+  idleTimeout: 1000,
+  maxTransactionDuration: 600,
+};
+
+/**
+ *
+ */
+export class ReactNativeTracing implements Integration {
+  /**
+   * @inheritDoc
+   */
+  public static id: string = "ReactNativeTracing";
+  /**
+   * @inheritDoc
+   */
+  public name: string = ReactNativeTracing.id;
+
+  /** ReactNativeTracing options */
+  public options: ReactNativeTracingOptions;
+  // @ts-ignore TODO
+  private _getCurrentHub?: () => Hub;
+
+  constructor(options: Partial<ReactNativeTracingOptions> = {}) {
+    this.options = {
+      ...defaultReactNativeTracingOptions,
+      ...options,
+    };
+  }
+
+  /**
+   *
+   */
+  public setupOnce(
+    // @ts-ignore TODO
+    addGlobalEventProcessor: (callback: EventProcessor) => void,
+    getCurrentHub: () => Hub
+  ): void {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const {
+      traceFetch,
+      traceXHR,
+      tracingOrigins,
+      // @ts-ignore TODO
+      shouldCreateSpanForRequest,
+      routingInstrumentation,
+    } = this.options;
+
+    this._getCurrentHub = getCurrentHub;
+
+    routingInstrumentation?.registerListener(
+      this._onRouteWillChange.bind(this)
+    );
+
+    registerRequestInstrumentation({
+      traceFetch,
+      traceXHR,
+      tracingOrigins,
+      shouldCreateSpanForRequest,
+    });
+  }
+
+  /** To be called when the route changes, but BEFORE the components of the new route mount. */
+  private _onRouteWillChange(context: TransactionContext): void {
+    // TODO: Consider more features on route change, one example is setting a tag of what route the user is on
+    this._createRouteTransaction(context);
+  }
+
+  /** Create routing idle transaction. */
+  private _createRouteTransaction(
+    context: TransactionContext
+  ): TransactionType | undefined {
+    if (!this._getCurrentHub) {
+      logger.warn(
+        `[ReactNativeTracing] Did not create ${context.op} transaction because _getCurrentHub is invalid.`
+      );
+      return undefined;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { idleTimeout, maxTransactionDuration } = this.options;
+
+    if (context.sampled === false) {
+      logger.log(
+        `[ReactNativeTracing] Will not send ${context.op} transaction because of beforeNavigate.`
+      );
+    }
+
+    const hub = this._getCurrentHub();
+    const idleTransaction = startIdleTransaction(
+      hub as any,
+      context,
+      idleTimeout,
+      true
+    );
+    logger.log(
+      `[ReactNativeTracing] Starting ${context.op} transaction on scope`
+    );
+    idleTransaction.registerBeforeFinishCallback(
+      (transaction, endTimestamp) => {
+        // this._metrics.addPerformanceEntries(transaction);
+        adjustTransactionDuration(
+          secToMs(maxTransactionDuration),
+          transaction,
+          endTimestamp
+        );
+      }
+    );
+
+    return idleTransaction as TransactionType;
+  }
+}
diff --git a/src/js/tracing/reactnavigation.ts b/src/js/tracing/reactnavigation.ts
new file mode 100644
index 0000000000..a551a1b6c9
--- /dev/null
+++ b/src/js/tracing/reactnavigation.ts
@@ -0,0 +1,74 @@
+import { TransactionContext } from "@sentry/types";
+
+import { RoutingInstrumentation } from "./router";
+
+interface NavigationPayload {
+  key: string;
+  name: string;
+  params?: any;
+}
+
+interface DispatchProp {
+  data: {
+    action: {
+      type: string;
+      payload: NavigationPayload;
+    };
+  };
+}
+
+interface NavigationContainer {
+  addListener: (type: string, listener: any) => void;
+}
+
+interface NavigationContainerRef {
+  current?: NavigationContainer;
+}
+
+/**
+ *
+ */
+export class ReactNavigationInstrumentation extends RoutingInstrumentation {
+  static instrumentationName: string = "react-navigation";
+
+  /**
+   *
+   */
+  public registerNavigationContainer(
+    navigationContainerRef: NavigationContainerRef
+  ): void {
+    navigationContainerRef.current?.addListener(
+      "__unsafe_action__",
+      this._onDispatch.bind(this)
+    );
+  }
+
+  /**
+   * Function to be called on every React-Navigation action dispatch
+   */
+  private _onDispatch(dispatchProp: DispatchProp): void {
+    const action = dispatchProp.data?.action;
+    if (action) {
+      const { type, payload } = action;
+      if (type === "NAVIGATE" && payload) {
+        const routeContext = this._getRouteContextFromPayload(payload);
+        this.onRouteWillChange(routeContext);
+      }
+    }
+  }
+
+  /** Transforms the React-Navigation NavigationState into our RouteContext */
+  private _getRouteContextFromPayload(
+    payload: NavigationPayload
+  ): TransactionContext {
+    return {
+      name: payload.name,
+      op: "navigation",
+      tags: {
+        "routing.instrumentation":
+          ReactNavigationInstrumentation.instrumentationName,
+      },
+      data: payload.params,
+    };
+  }
+}
diff --git a/src/js/tracing/router.ts b/src/js/tracing/router.ts
new file mode 100644
index 0000000000..971b5ea5b0
--- /dev/null
+++ b/src/js/tracing/router.ts
@@ -0,0 +1,30 @@
+import { TransactionContext } from "@sentry/types";
+
+export type RouteListener = (context: TransactionContext) => void;
+
+export interface RoutingInstrumentationType {
+  registerListener(listener: RouteListener): void;
+  onRouteWillChange(context: TransactionContext): void;
+}
+
+/**
+ * Base Routing Instrumentation. Can be used by users to manually instrument custom routers.
+ */
+export class RoutingInstrumentation implements RoutingInstrumentationType {
+  private _listeners: RouteListener[] = [];
+  /**
+   * Registers a listener to route state.
+   *
+   * Do not overwrite this unless you know what you are doing.
+   */
+  public registerListener(listener: RouteListener): void {
+    this._listeners.push(listener);
+  }
+
+  /**
+   * Calls all route change listeners
+   */
+  public onRouteWillChange(context: TransactionContext): void {
+    this._listeners.forEach((listener) => listener(context));
+  }
+}

From a71b8d39f85d8ec86bb245f78234995458196e94 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 8 Dec 2020 20:11:59 +0700
Subject: [PATCH 02/40] ref: Add navigationActionTypes and add comments/format

---
 src/js/tracing/reactnavigation.ts | 46 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/js/tracing/reactnavigation.ts b/src/js/tracing/reactnavigation.ts
index a551a1b6c9..dc5033bf90 100644
--- a/src/js/tracing/reactnavigation.ts
+++ b/src/js/tracing/reactnavigation.ts
@@ -21,36 +21,55 @@ interface NavigationContainer {
   addListener: (type: string, listener: any) => void;
 }
 
-interface NavigationContainerRef {
-  current?: NavigationContainer;
+interface ReactNavigationInstrumentationOptions {
+  /**
+   * The action types that will trigger a transaction to be set on the scope.
+   * If you set this property, this will completely overwrite the default and not merge.
+   *
+   * Default: ["NAVIGATE", "PUSH", "POP", "REPLACE"]
+   */
+  navigationActionTypes: string[];
 }
 
+const DEFAULT_OPTIONS: ReactNavigationInstrumentationOptions = {
+  navigationActionTypes: ["NAVIGATE", "PUSH", "POP", "REPLACE"],
+};
+
 /**
- *
+ * Instrumentation for React-Navigation V5. See docs or sample app for usage.
  */
 export class ReactNavigationInstrumentation extends RoutingInstrumentation {
-  static instrumentationName: string = "react-navigation";
+  static instrumentationName: string = "react-navigation-v5";
+
+  private _options: ReactNavigationInstrumentationOptions;
+
+  constructor(_options: Partial<ReactNavigationInstrumentationOptions>) {
+    super();
+    this._options = {
+      ...DEFAULT_OPTIONS,
+      ..._options,
+    };
+  }
 
   /**
-   *
+   * Pass the ref to the navigation container to register it to the instrumentation
+   * @param navigationContainerRef Ref to a `NavigationContainer`
    */
-  public registerNavigationContainer(
-    navigationContainerRef: NavigationContainerRef
-  ): void {
+  public registerNavigationContainer(navigationContainerRef: {
+    current?: NavigationContainer;
+  }): void {
     navigationContainerRef.current?.addListener(
-      "__unsafe_action__",
+      "__unsafe_action__", // This action is emitted on every dispatch
       this._onDispatch.bind(this)
     );
   }
 
-  /**
-   * Function to be called on every React-Navigation action dispatch
-   */
+  /** To be called on every React-Navigation action dispatch */
   private _onDispatch(dispatchProp: DispatchProp): void {
     const action = dispatchProp.data?.action;
     if (action) {
       const { type, payload } = action;
-      if (type === "NAVIGATE" && payload) {
+      if (this._options.navigationActionTypes.includes(type) && payload) {
         const routeContext = this._getRouteContextFromPayload(payload);
         this.onRouteWillChange(routeContext);
       }
@@ -67,6 +86,7 @@ export class ReactNavigationInstrumentation extends RoutingInstrumentation {
       tags: {
         "routing.instrumentation":
           ReactNavigationInstrumentation.instrumentationName,
+        "routing.route.key": payload.key,
       },
       data: payload.params,
     };

From 0054c641bde3a67819c45b75fcb1b835ab40ae09 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 8 Dec 2020 20:16:15 +0700
Subject: [PATCH 03/40] ref: Comments and formatting for RoutingInstrumentation

---
 src/js/tracing/router.ts | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/js/tracing/router.ts b/src/js/tracing/router.ts
index 971b5ea5b0..87cce9288c 100644
--- a/src/js/tracing/router.ts
+++ b/src/js/tracing/router.ts
@@ -3,27 +3,36 @@ import { TransactionContext } from "@sentry/types";
 export type RouteListener = (context: TransactionContext) => void;
 
 export interface RoutingInstrumentationType {
+  /**
+   * Registers a listener that's called on every route change with a `TransactionContext`.
+   *
+   * Do not overwrite this unless you know what you are doing.
+   *
+   * @param listener A `RouteListener`
+   */
   registerListener(listener: RouteListener): void;
+  /**
+   * To be called when the route changes, BEFORE the new route mounts.
+   * If this is called after a route mounts the child spans will not be correctly attached.
+   *
+   * @param context A `TransactionContext` used to initialize the transaction.
+   */
   onRouteWillChange(context: TransactionContext): void;
 }
 
 /**
  * Base Routing Instrumentation. Can be used by users to manually instrument custom routers.
+ * Pass this to the tracing integration, and call `onRouteWillChange` every time before a route changes.
  */
 export class RoutingInstrumentation implements RoutingInstrumentationType {
   private _listeners: RouteListener[] = [];
-  /**
-   * Registers a listener to route state.
-   *
-   * Do not overwrite this unless you know what you are doing.
-   */
+
+  /** @inheritdoc */
   public registerListener(listener: RouteListener): void {
     this._listeners.push(listener);
   }
 
-  /**
-   * Calls all route change listeners
-   */
+  /** @inheritdoc */
   public onRouteWillChange(context: TransactionContext): void {
     this._listeners.forEach((listener) => listener(context));
   }

From 6cd93d38f61f6c597d410765dd16b2490777f74c Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 8 Dec 2020 20:22:30 +0700
Subject: [PATCH 04/40] ref: Move tracing utils to separate file and log if no
 routing inst

---
 src/js/tracing/reactnativetracing.ts | 52 ++++++++--------------------
 src/js/tracing/utils.ts              | 34 ++++++++++++++++++
 2 files changed, 48 insertions(+), 38 deletions(-)
 create mode 100644 src/js/tracing/utils.ts

diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index a0c3a98b54..71b0e0cc13 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -1,9 +1,7 @@
 import {
   defaultRequestInstrumentationOptions,
-  IdleTransaction,
   registerRequestInstrumentation,
   RequestInstrumentationOptions,
-  SpanStatus,
   startIdleTransaction,
 } from "@sentry/tracing";
 import {
@@ -16,39 +14,7 @@ import {
 import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "../tracing/router";
-
-/**
- * Converts from milliseconds to seconds
- * @param time time in ms
- */
-export function msToSec(time: number): number {
-  return time / 1000;
-}
-
-/**
- * Converts from seconds to milliseconds
- * @param time time in seconds
- */
-export function secToMs(time: number): number {
-  return time * 1000;
-}
-
-/**
- *
- */
-function adjustTransactionDuration(
-  maxDuration: number,
-  transaction: IdleTransaction,
-  endTimestamp: number
-): void {
-  const diff = endTimestamp - transaction.startTimestamp;
-  const isOutdatedTransaction =
-    endTimestamp && (diff > maxDuration || diff < 0);
-  if (isOutdatedTransaction) {
-    transaction.setStatus(SpanStatus.DeadlineExceeded);
-    transaction.setTag("maxTransactionDurationExceeded", "true");
-  }
-}
+import { adjustTransactionDuration, secToMs } from "./utils";
 
 export interface ReactNativeTracingOptions
   extends RequestInstrumentationOptions {
@@ -70,6 +36,10 @@ export interface ReactNativeTracingOptions
    */
   maxTransactionDuration: number;
 
+  /**
+   * The routing instrumentation to be used with the tracing integration.
+   * There is no routing instrumentation if nothing is passed.
+   */
   routingInstrumentation?: RoutingInstrumentation;
 }
 
@@ -80,7 +50,7 @@ const defaultReactNativeTracingOptions: ReactNativeTracingOptions = {
 };
 
 /**
- *
+ * Tracing integration for React Native.
  */
 export class ReactNativeTracing implements Integration {
   /**
@@ -94,7 +64,7 @@ export class ReactNativeTracing implements Integration {
 
   /** ReactNativeTracing options */
   public options: ReactNativeTracingOptions;
-  // @ts-ignore TODO
+
   private _getCurrentHub?: () => Hub;
 
   constructor(options: Partial<ReactNativeTracingOptions> = {}) {
@@ -105,7 +75,7 @@ export class ReactNativeTracing implements Integration {
   }
 
   /**
-   *
+   *  Registers routing and request instrumentation.
    */
   public setupOnce(
     // @ts-ignore TODO
@@ -128,6 +98,12 @@ export class ReactNativeTracing implements Integration {
       this._onRouteWillChange.bind(this)
     );
 
+    if (!routingInstrumentation) {
+      logger.log(
+        `[ReactNativeTracing] Not instrumenting route changes as routingInstrumentation has not been set.`
+      );
+    }
+
     registerRequestInstrumentation({
       traceFetch,
       traceXHR,
diff --git a/src/js/tracing/utils.ts b/src/js/tracing/utils.ts
new file mode 100644
index 0000000000..07952369b9
--- /dev/null
+++ b/src/js/tracing/utils.ts
@@ -0,0 +1,34 @@
+import { IdleTransaction, SpanStatus } from "@sentry/tracing";
+
+/**
+ * Converts from milliseconds to seconds
+ * @param time time in ms
+ */
+export function msToSec(time: number): number {
+  return time / 1000;
+}
+
+/**
+ * Converts from seconds to milliseconds
+ * @param time time in seconds
+ */
+export function secToMs(time: number): number {
+  return time * 1000;
+}
+
+/**
+ *
+ */
+export function adjustTransactionDuration(
+  maxDuration: number,
+  transaction: IdleTransaction,
+  endTimestamp: number
+): void {
+  const diff = endTimestamp - transaction.startTimestamp;
+  const isOutdatedTransaction =
+    endTimestamp && (diff > maxDuration || diff < 0);
+  if (isOutdatedTransaction) {
+    transaction.setStatus(SpanStatus.DeadlineExceeded);
+    transaction.setTag("maxTransactionDurationExceeded", "true");
+  }
+}

From aa8ffb015be106ae1d74c436e34723f0f2f69a5d Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 8 Dec 2020 20:27:23 +0700
Subject: [PATCH 05/40] ref: Rename to ReactNavigationV5Instrumentation

---
 src/js/tracing/index.ts                                     | 2 +-
 src/js/tracing/{reactnavigation.ts => reactnavigationv5.ts} | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/js/tracing/{reactnavigation.ts => reactnavigationv5.ts} (94%)

diff --git a/src/js/tracing/index.ts b/src/js/tracing/index.ts
index 1b501dd8a5..cc56f4136e 100644
--- a/src/js/tracing/index.ts
+++ b/src/js/tracing/index.ts
@@ -1,3 +1,3 @@
 export { ReactNativeTracing } from "./reactnativetracing";
-export { ReactNavigationInstrumentation } from "./reactnavigation";
+export { ReactNavigationV5Instrumentation } from "./reactnavigationv5";
 export { RoutingInstrumentation } from "./router";
diff --git a/src/js/tracing/reactnavigation.ts b/src/js/tracing/reactnavigationv5.ts
similarity index 94%
rename from src/js/tracing/reactnavigation.ts
rename to src/js/tracing/reactnavigationv5.ts
index dc5033bf90..49021aa2dc 100644
--- a/src/js/tracing/reactnavigation.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -38,7 +38,7 @@ const DEFAULT_OPTIONS: ReactNavigationInstrumentationOptions = {
 /**
  * Instrumentation for React-Navigation V5. See docs or sample app for usage.
  */
-export class ReactNavigationInstrumentation extends RoutingInstrumentation {
+export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   static instrumentationName: string = "react-navigation-v5";
 
   private _options: ReactNavigationInstrumentationOptions;
@@ -85,7 +85,7 @@ export class ReactNavigationInstrumentation extends RoutingInstrumentation {
       op: "navigation",
       tags: {
         "routing.instrumentation":
-          ReactNavigationInstrumentation.instrumentationName,
+          ReactNavigationV5Instrumentation.instrumentationName,
         "routing.route.key": payload.key,
       },
       data: payload.params,

From 55abdfc7504a03ef2da3a2c57156f3682fd0472f Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 21 Dec 2020 00:10:11 +0700
Subject: [PATCH 06/40] fix: Overhaul v5 instrumentation to handle edge cases

---
 sample/src/App.tsx                   |   7 +-
 src/js/tracing/reactnativetracing.ts |   8 +-
 src/js/tracing/reactnavigationv5.ts  | 150 ++++++++++++++++++---------
 src/js/tracing/router.ts             |  25 +++--
 4 files changed, 128 insertions(+), 62 deletions(-)

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index 6006be36ad..14bd23b15e 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -19,7 +19,7 @@ import {store} from './reduxApp';
 import {version as packageVersion} from '../../package.json';
 import {SENTRY_INTERNAL_DSN} from './dsn';
 
-const reactNavigationInstrumentation = new Sentry.Tracing.ReactNavigationInstrumentation();
+const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation();
 
 Sentry.init({
   // Replace the example DSN below with your own DSN:
@@ -32,7 +32,8 @@ Sentry.init({
   maxBreadcrumbs: 150, // Extend from the default 100 breadcrumbs.
   integrations: [
     new Sentry.Tracing.ReactNativeTracing({
-      routingInstrumentation: reactNavigationInstrumentation,
+      idleTimeout: 5000,
+      routingInstrumentation: reactNavigationV5Instrumentation,
       tracingOrigins: ['localhost', /^\//, /^https:\/\//],
     }),
   ],
@@ -53,7 +54,7 @@ const App = () => {
   const navigation = React.createRef<NavigationContainerRef>();
 
   React.useEffect(() => {
-    reactNavigationInstrumentation.registerNavigationContainer(navigation);
+    reactNavigationV5Instrumentation.registerNavigationContainer(navigation);
   }, []);
 
   return (
diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index 71b0e0cc13..da51e0c947 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -94,7 +94,7 @@ export class ReactNativeTracing implements Integration {
 
     this._getCurrentHub = getCurrentHub;
 
-    routingInstrumentation?.registerListener(
+    routingInstrumentation?.registerRoutingInstrumentation(
       this._onRouteWillChange.bind(this)
     );
 
@@ -113,9 +113,11 @@ export class ReactNativeTracing implements Integration {
   }
 
   /** To be called when the route changes, but BEFORE the components of the new route mount. */
-  private _onRouteWillChange(context: TransactionContext): void {
+  private _onRouteWillChange(
+    context: TransactionContext
+  ): TransactionType | undefined {
     // TODO: Consider more features on route change, one example is setting a tag of what route the user is on
-    this._createRouteTransaction(context);
+    return this._createRouteTransaction(context);
   }
 
   /** Create routing idle transaction. */
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 49021aa2dc..ecad7f16d4 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -1,50 +1,65 @@
-import { TransactionContext } from "@sentry/types";
+import { Transaction as TransactionType } from "@sentry/types";
 
 import { RoutingInstrumentation } from "./router";
-
-interface NavigationPayload {
-  key: string;
+interface NavigationRoute {
   name: string;
-  params?: any;
-}
-
-interface DispatchProp {
-  data: {
-    action: {
-      type: string;
-      payload: NavigationPayload;
-    };
-  };
+  key: string;
+  params?: Record<any, any>;
 }
 
 interface NavigationContainer {
-  addListener: (type: string, listener: any) => void;
+  addListener: (type: string, listener: () => void) => void;
+  getCurrentRoute: () => NavigationRoute;
 }
 
 interface ReactNavigationInstrumentationOptions {
-  /**
-   * The action types that will trigger a transaction to be set on the scope.
-   * If you set this property, this will completely overwrite the default and not merge.
-   *
-   * Default: ["NAVIGATE", "PUSH", "POP", "REPLACE"]
-   */
-  navigationActionTypes: string[];
+  shouldAttachTransaction(
+    route: NavigationRoute,
+    previousRoute?: NavigationRoute
+  ): boolean;
 }
 
+type NavigationContainerRef = {
+  current: NavigationContainer | null;
+};
+
+const defaultShouldAttachTransaction = (
+  route: NavigationRoute,
+  previousRoute?: NavigationRoute
+): boolean => {
+  return !previousRoute || previousRoute.key !== route.key;
+};
+
 const DEFAULT_OPTIONS: ReactNavigationInstrumentationOptions = {
-  navigationActionTypes: ["NAVIGATE", "PUSH", "POP", "REPLACE"],
+  shouldAttachTransaction: defaultShouldAttachTransaction,
 };
 
+const STATE_CHANGE_TIMEOUT_DURATION = 200;
+
 /**
  * Instrumentation for React-Navigation V5. See docs or sample app for usage.
+ *
+ * How this works:
+ * - `_onDispatch` is called every time a dispatch happens and sets an IdleTransaction on the scope without any route context.
+ * - `_onStateChange` is then called AFTER the state change happens due to a dispatch and sets the route context onto the active transaction.
+ * - If `_onStateChange` isn't called within `STATE_CHANGE_TIMEOUT_DURATION` of the dispatch, then the transaction is not sampled and finished.
  */
 export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   static instrumentationName: string = "react-navigation-v5";
 
   private _options: ReactNavigationInstrumentationOptions;
 
-  constructor(_options: Partial<ReactNavigationInstrumentationOptions>) {
+  private _navigationContainerRef: NavigationContainerRef = {
+    current: null,
+  };
+
+  private _latestRoute?: NavigationRoute;
+  private _latestTransaction?: TransactionType;
+  private _stateChangeTimeout?: number | undefined;
+
+  constructor(_options: Partial<ReactNavigationInstrumentationOptions> = {}) {
     super();
+
     this._options = {
       ...DEFAULT_OPTIONS,
       ..._options,
@@ -55,40 +70,81 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
    * Pass the ref to the navigation container to register it to the instrumentation
    * @param navigationContainerRef Ref to a `NavigationContainer`
    */
-  public registerNavigationContainer(navigationContainerRef: {
-    current?: NavigationContainer;
-  }): void {
+  public registerNavigationContainer(
+    navigationContainerRef: NavigationContainerRef
+  ): void {
+    this._navigationContainerRef = navigationContainerRef;
     navigationContainerRef.current?.addListener(
       "__unsafe_action__", // This action is emitted on every dispatch
       this._onDispatch.bind(this)
     );
-  }
+    navigationContainerRef.current?.addListener(
+      "state", // This action is emitted on every state change
+      this._onStateChange.bind(this)
+    );
 
-  /** To be called on every React-Navigation action dispatch */
-  private _onDispatch(dispatchProp: DispatchProp): void {
-    const action = dispatchProp.data?.action;
-    if (action) {
-      const { type, payload } = action;
-      if (this._options.navigationActionTypes.includes(type) && payload) {
-        const routeContext = this._getRouteContextFromPayload(payload);
-        this.onRouteWillChange(routeContext);
-      }
-    }
+    // This will set a transaction for the initial screen.
+    this._onDispatch();
+    this._onStateChange();
   }
 
-  /** Transforms the React-Navigation NavigationState into our RouteContext */
-  private _getRouteContextFromPayload(
-    payload: NavigationPayload
-  ): TransactionContext {
-    return {
-      name: payload.name,
+  /**
+   * To be called on every React-Navigation action dispatch.
+   * It does not name the transaction or populate it with route information. Instead, it waits for the state to fully change
+   * and gets the route information from there, @see _onStateChange
+   */
+  private _onDispatch(): void {
+    this._latestTransaction = this.onRouteWillChange({
+      name: "Route Change",
       op: "navigation",
       tags: {
         "routing.instrumentation":
           ReactNavigationV5Instrumentation.instrumentationName,
-        "routing.route.key": payload.key,
       },
-      data: payload.params,
-    };
+    });
+
+    this._stateChangeTimeout = setTimeout(
+      this._cancelLatestTransaction.bind(this),
+      STATE_CHANGE_TIMEOUT_DURATION
+    );
+  }
+
+  /**
+   * To be called AFTER the state has been changed to populate the transaction with the current route.
+   */
+  private _onStateChange(): void {
+    // Use the getCurrentRoute method to be accurate.
+    const route = this._navigationContainerRef?.current?.getCurrentRoute();
+
+    if (route) {
+      if (
+        this._latestTransaction &&
+        this._options.shouldAttachTransaction(route, this._latestRoute)
+      ) {
+        // Clear the timeout so the transaction does not get cancelled.
+        if (typeof this._stateChangeTimeout !== "undefined") {
+          clearTimeout(this._stateChangeTimeout);
+          this._stateChangeTimeout = undefined;
+        }
+
+        this._latestTransaction.setName(`Navigation Focus: ${route.name}`);
+        this._latestTransaction.setTag("routing.route.key", route.key);
+        this._latestTransaction.setData("routing.params", route.params);
+
+        // Remove the latest transaction to not overwrite.
+        this._latestTransaction = undefined;
+      }
+
+      this._latestRoute = route;
+    }
+  }
+
+  /** Cancels the latest transaction so it does not get sent to Sentry. */
+  private _cancelLatestTransaction(): void {
+    if (this._latestTransaction) {
+      this._latestTransaction.sampled = false;
+      this._latestTransaction.finish();
+      this._latestTransaction = undefined;
+    }
   }
 }
diff --git a/src/js/tracing/router.ts b/src/js/tracing/router.ts
index 87cce9288c..b811010273 100644
--- a/src/js/tracing/router.ts
+++ b/src/js/tracing/router.ts
@@ -1,6 +1,9 @@
-import { TransactionContext } from "@sentry/types";
+import { Hub } from "@sentry/hub";
+import { Transaction, TransactionContext } from "@sentry/types";
 
-export type RouteListener = (context: TransactionContext) => void;
+export type TransactionCreator = (
+  context: TransactionContext
+) => Transaction | undefined;
 
 export interface RoutingInstrumentationType {
   /**
@@ -10,14 +13,14 @@ export interface RoutingInstrumentationType {
    *
    * @param listener A `RouteListener`
    */
-  registerListener(listener: RouteListener): void;
+  registerRoutingInstrumentation(listener: TransactionCreator): void;
   /**
    * To be called when the route changes, BEFORE the new route mounts.
    * If this is called after a route mounts the child spans will not be correctly attached.
    *
    * @param context A `TransactionContext` used to initialize the transaction.
    */
-  onRouteWillChange(context: TransactionContext): void;
+  onRouteWillChange(context: TransactionContext): Transaction | undefined;
 }
 
 /**
@@ -25,15 +28,19 @@ export interface RoutingInstrumentationType {
  * Pass this to the tracing integration, and call `onRouteWillChange` every time before a route changes.
  */
 export class RoutingInstrumentation implements RoutingInstrumentationType {
-  private _listeners: RouteListener[] = [];
+  protected _getCurrentHub?: () => Hub;
+
+  private _tracingListener?: TransactionCreator;
 
   /** @inheritdoc */
-  public registerListener(listener: RouteListener): void {
-    this._listeners.push(listener);
+  registerRoutingInstrumentation(listener: TransactionCreator): void {
+    this._tracingListener = listener;
   }
 
   /** @inheritdoc */
-  public onRouteWillChange(context: TransactionContext): void {
-    this._listeners.forEach((listener) => listener(context));
+  public onRouteWillChange(
+    context: TransactionContext
+  ): Transaction | undefined {
+    return this._tracingListener?.(context);
   }
 }

From baebf11687e5f5e893bc2d94a8fd9e80a139a87e Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 21 Dec 2020 00:18:28 +0700
Subject: [PATCH 07/40] ref: Rename _cancelLastTransaction to
 _discardLatestTransaction

---
 src/js/tracing/reactnavigationv5.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index ecad7f16d4..870af1b3b3 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -104,7 +104,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
     });
 
     this._stateChangeTimeout = setTimeout(
-      this._cancelLatestTransaction.bind(this),
+      this._discardLatestTransaction.bind(this),
       STATE_CHANGE_TIMEOUT_DURATION
     );
   }
@@ -140,7 +140,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   }
 
   /** Cancels the latest transaction so it does not get sent to Sentry. */
-  private _cancelLatestTransaction(): void {
+  private _discardLatestTransaction(): void {
     if (this._latestTransaction) {
       this._latestTransaction.sampled = false;
       this._latestTransaction.finish();

From e7e8f97ad1e3e7ac309627a8a97fb3d4400d9126 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 22 Dec 2020 12:46:55 +0700
Subject: [PATCH 08/40] test: Have a navigation reset action to test

---
 sample/src/screens/HomeScreen.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 06bed10730..143bc4885c 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -17,6 +17,7 @@ import {
   View,
 } from 'react-native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import {CommonActions} from '@react-navigation/native';
 
 import * as Sentry from '@sentry/react-native';
 
@@ -219,7 +220,19 @@ const HomeScreen = (props: Props) => {
             <View style={styles.spacer} />
             <TouchableOpacity
               onPress={() => {
-                props.navigation.navigate('PerformanceTiming');
+                // Navigate with a reset action just to test
+                props.navigation.dispatch(
+                  CommonActions.reset({
+                    index: 1,
+                    routes: [
+                      {name: 'Home'},
+                      {
+                        name: 'PerformanceTiming',
+                        params: {someParam: 'hello'},
+                      },
+                    ],
+                  }),
+                );
               }}>
               <Text style={styles.buttonText}>Performance Timing</Text>
             </TouchableOpacity>

From e575345106fb5ce04f780df412999f67a566dde7 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 22 Dec 2020 12:47:12 +0700
Subject: [PATCH 09/40] test: Profile the statistics on the tracker screen

---
 sample/src/screens/TrackerScreen.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/sample/src/screens/TrackerScreen.tsx b/sample/src/screens/TrackerScreen.tsx
index 8f4c365909..7e276eef21 100644
--- a/sample/src/screens/TrackerScreen.tsx
+++ b/sample/src/screens/TrackerScreen.tsx
@@ -48,17 +48,17 @@ const ManualTrackerScreen = () => {
       <View style={styles.card}>
         {cases ? (
           <>
-            <Statistic
+            <ProfiledStatistic
               title="Confirmed"
               count={cases.TotalConfirmed}
               textColor="#C83852"
             />
-            <Statistic
+            <ProfiledStatistic
               title="Deaths"
               count={cases.TotalDeaths}
               textColor="#362D59"
             />
-            <Statistic
+            <ProfiledStatistic
               title="Recovered"
               count={cases.TotalRecovered}
               textColor="#69C289"
@@ -90,6 +90,8 @@ const Statistic = (props: {
   );
 };
 
+const ProfiledStatistic = Sentry.withProfiler(Statistic);
+
 const styles = StyleSheet.create({
   screen: {
     flex: 1,

From e26e27854148821004fff0126f79c8902e98f2d2 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Thu, 24 Dec 2020 19:44:42 +0700
Subject: [PATCH 10/40] feat: Use fetch transport for transactions on android
 (hack)

---
 src/js/backend.ts           |  2 +-
 src/js/transports/native.ts | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/js/backend.ts b/src/js/backend.ts
index a350a53544..1d92204911 100644
--- a/src/js/backend.ts
+++ b/src/js/backend.ts
@@ -81,7 +81,7 @@ export class ReactNativeBackend extends BaseBackend<BrowserOptions> {
     }
 
     if (this._isNativeTransportAvailable()) {
-      return new NativeTransport();
+      return new NativeTransport(transportOptions);
     }
 
     return new Transports.FetchTransport(transportOptions);
diff --git a/src/js/transports/native.ts b/src/js/transports/native.ts
index 18999df9ba..ce03b43dc8 100644
--- a/src/js/transports/native.ts
+++ b/src/js/transports/native.ts
@@ -1,5 +1,7 @@
+import { Transports } from "@sentry/react";
 import { Event, Response, Transport } from "@sentry/types";
 import { PromiseBuffer, SentryError } from "@sentry/utils";
+import { Platform } from "react-native";
 
 import { NATIVE } from "../wrapper";
 
@@ -8,10 +10,23 @@ export class NativeTransport implements Transport {
   /** A simple buffer holding all requests. */
   protected readonly _buffer: PromiseBuffer<Response> = new PromiseBuffer(30);
 
+  /** Hack that's used to send transactions on Android */
+  private _fetchTransport: Transport;
+
+  constructor(transportOptions: { dsn: string }) {
+    this._fetchTransport = new Transports.FetchTransport(transportOptions);
+  }
+
   /**
    * @inheritDoc
    */
   public sendEvent(event: Event): PromiseLike<Response> {
+    // This is a hack to send transactions through the JS fetch transport on Android
+    // TODO: Remove this hack when android supports transactions through written envelopes.
+    if (Platform.OS === "android" && event.type === "transaction") {
+      return this._fetchTransport.sendEvent(event);
+    }
+
     if (!this._buffer.isReady()) {
       return Promise.reject(
         new SentryError("Not adding Promise due to buffer limit reached.")

From a8ea84e914c4fca457d159756e697ab968b0a0a2 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Wed, 30 Dec 2020 00:57:13 +0700
Subject: [PATCH 11/40] feat: Add React Navigation V4 instrumentation

---
 src/js/tracing/index.ts             |   1 +
 src/js/tracing/reactnavigationv4.ts | 128 ++++++++++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 src/js/tracing/reactnavigationv4.ts

diff --git a/src/js/tracing/index.ts b/src/js/tracing/index.ts
index cc56f4136e..70a6a1d736 100644
--- a/src/js/tracing/index.ts
+++ b/src/js/tracing/index.ts
@@ -1,3 +1,4 @@
 export { ReactNativeTracing } from "./reactnativetracing";
 export { ReactNavigationV5Instrumentation } from "./reactnavigationv5";
+export { ReactNavigationV4Instrumentation } from "./reactnavigationv4";
 export { RoutingInstrumentation } from "./router";
diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
new file mode 100644
index 0000000000..fee688f24c
--- /dev/null
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -0,0 +1,128 @@
+import { TransactionContext } from "@sentry/types";
+import { logger } from "@sentry/utils";
+
+import { RoutingInstrumentation } from "./router";
+
+interface State {
+  key: string;
+  isTransitioning: boolean;
+  routes: { routeName: string }[];
+}
+
+interface PathAndParams {
+  path: string;
+  params: Record<any, any>;
+}
+
+interface AppContainerInstance {
+  _navigation: {
+    state: State;
+    router: {
+      getPathAndParamsForState: (navigationState: State) => PathAndParams;
+      getStateForAction: (action: any, state: State) => State;
+    };
+  };
+}
+
+interface AppContainerRef {
+  current?: AppContainerInstance | null;
+}
+
+/**
+ * Instrumentation for React-Navigation V4.
+ * Register the app container with `registerAppContainer` to use, or see docs for more details.
+ */
+class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
+  static instrumentationName: string = "react-navigation-v4";
+
+  private _appContainerRef: AppContainerRef = { current: null };
+
+  /**
+   * Pass the ref to the app container to register it to the instrumentation
+   * @param appContainerRef Ref to an `AppContainer`
+   */
+  public registerAppContainer(
+    appContainerRef: AppContainerRef | AppContainerInstance
+  ): void {
+    if ("current" in appContainerRef) {
+      this._appContainerRef = appContainerRef;
+    } else {
+      this._appContainerRef = {
+        current: appContainerRef as AppContainerInstance,
+      };
+    }
+
+    if (!this._appContainerRef?.current) {
+      logger.error(
+        "[ReactNavigationV4Instrumentation]: App container ref is incorrect, instrumentation will not attach."
+      );
+    } else {
+      this._patchRouter();
+
+      // Need to handle the initial state as the router patch will only attach transactions on subsequent route changes.
+      this._handleInitialState();
+    }
+  }
+
+  /**
+   * Starts an idle transaction for the initial state which won't get called by the router listener.
+   */
+  private _handleInitialState(): void {
+    if (this._appContainerRef.current) {
+      const state = this._appContainerRef.current._navigation.state;
+      const pathAndParams = this._appContainerRef.current._navigation.router.getPathAndParamsForState(
+        state
+      );
+
+      this.onRouteWillChange(this._getPathTransactionContext(pathAndParams));
+    }
+  }
+
+  /**
+   * Patches the react navigation router so we can listen to the route changes and attach the `IdleTransaction` before the
+   * new screen is mounted.
+   */
+  private _patchRouter(): void {
+    if (this._appContainerRef.current) {
+      const originalGetStateForAction = this._appContainerRef.current
+        ._navigation.router.getStateForAction;
+      const getPathAndParamsForState = this._appContainerRef.current._navigation
+        .router.getPathAndParamsForState;
+
+      this._appContainerRef.current._navigation.router.getStateForAction = (
+        action,
+        state
+      ) => {
+        const newState = originalGetStateForAction(action, state);
+        const pathAndParams = getPathAndParamsForState(newState);
+
+        if (newState.isTransitioning) {
+          this.onRouteWillChange(
+            this._getPathTransactionContext(pathAndParams)
+          );
+        }
+
+        return newState;
+      };
+    }
+  }
+
+  /**
+   * Gets the transaction context for a PathAndParams
+   */
+  private _getPathTransactionContext(
+    pathAndParams: PathAndParams
+  ): TransactionContext {
+    return {
+      name: `Navigation Focus: ${pathAndParams.path}`,
+      op: "navigation",
+      tags: {
+        "routing.instrumentation":
+          ReactNavigationV4Instrumentation.instrumentationName,
+      },
+      data: pathAndParams.params,
+    };
+  }
+}
+
+export { ReactNavigationV4Instrumentation };

From 1f69bc7552228451d1d172d451684ecc30d4456a Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Wed, 30 Dec 2020 23:47:57 +0700
Subject: [PATCH 12/40] fix: Fix ReactNavigationV4Instrumentation by patching
 the router

---
 src/js/tracing/reactnavigationv4.ts | 119 +++++++++++++++++++++-------
 1 file changed, 89 insertions(+), 30 deletions(-)

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index fee688f24c..4b1e647d50 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -3,23 +3,28 @@ import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./router";
 
-interface State {
+interface NavigationRoute {
+  routeName: string;
   key: string;
-  isTransitioning: boolean;
-  routes: { routeName: string }[];
+  params?: Record<any, any>;
 }
 
-interface PathAndParams {
-  path: string;
-  params: Record<any, any>;
+interface NavigationState {
+  index: number;
+  key: string;
+  isTransitioning: boolean;
+  routeName?: string;
+  routes: (NavigationRoute | NavigationState)[];
 }
 
 interface AppContainerInstance {
   _navigation: {
-    state: State;
+    state: NavigationState;
     router: {
-      getPathAndParamsForState: (navigationState: State) => PathAndParams;
-      getStateForAction: (action: any, state: State) => State;
+      getStateForAction: (
+        action: any,
+        state: NavigationState
+      ) => NavigationState;
     };
   };
 }
@@ -28,6 +33,22 @@ interface AppContainerRef {
   current?: AppContainerInstance | null;
 }
 
+type ReactNavigationV4ShouldAttachTransaction = (
+  prevRoute: NavigationRoute | null,
+  newRoute: NavigationRoute
+) => boolean;
+
+interface ReactNavigationV4InstrumentationOptions {
+  shouldAttachTransaction: ReactNavigationV4ShouldAttachTransaction;
+}
+
+const defaultShouldAttachTransaction: ReactNavigationV4ShouldAttachTransaction = () =>
+  true;
+
+const DEFAULT_OPTIONS: ReactNavigationV4InstrumentationOptions = {
+  shouldAttachTransaction: defaultShouldAttachTransaction,
+};
+
 /**
  * Instrumentation for React-Navigation V4.
  * Register the app container with `registerAppContainer` to use, or see docs for more details.
@@ -37,6 +58,19 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
   private _appContainerRef: AppContainerRef = { current: null };
 
+  private _options: ReactNavigationV4InstrumentationOptions;
+
+  private _prevRoute: NavigationRoute | null = null;
+
+  constructor(options: Partial<ReactNavigationV4InstrumentationOptions>) {
+    super();
+
+    this._options = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+    };
+  }
+
   /**
    * Pass the ref to the app container to register it to the instrumentation
    * @param appContainerRef Ref to an `AppContainer`
@@ -69,12 +103,17 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
    */
   private _handleInitialState(): void {
     if (this._appContainerRef.current) {
-      const state = this._appContainerRef.current._navigation.state;
-      const pathAndParams = this._appContainerRef.current._navigation.router.getPathAndParamsForState(
-        state
-      );
+      const navigationState = this._appContainerRef.current._navigation.state;
 
-      this.onRouteWillChange(this._getPathTransactionContext(pathAndParams));
+      const currentRoute = this._getCurrentRouteFromState(navigationState);
+
+      if (
+        this._options.shouldAttachTransaction(this._prevRoute, currentRoute)
+      ) {
+        this.onRouteWillChange(this._getTransactionContext(currentRoute));
+      }
+
+      this._prevRoute = currentRoute;
     }
   }
 
@@ -86,43 +125,63 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
     if (this._appContainerRef.current) {
       const originalGetStateForAction = this._appContainerRef.current
         ._navigation.router.getStateForAction;
-      const getPathAndParamsForState = this._appContainerRef.current._navigation
-        .router.getPathAndParamsForState;
 
       this._appContainerRef.current._navigation.router.getStateForAction = (
         action,
         state
       ) => {
-        const newState = originalGetStateForAction(action, state);
-        const pathAndParams = getPathAndParamsForState(newState);
-
-        if (newState.isTransitioning) {
-          this.onRouteWillChange(
-            this._getPathTransactionContext(pathAndParams)
-          );
+        const newNavigationState = originalGetStateForAction(action, state);
+        const currentRoute = this._getCurrentRouteFromState(newNavigationState);
+
+        // If the route is a different key, this is so we ignore actions that pertain to the same screen.
+        if (!this._prevRoute || currentRoute.key !== this._prevRoute.key) {
+          if (
+            this._options.shouldAttachTransaction(this._prevRoute, currentRoute)
+          ) {
+            this.onRouteWillChange(this._getTransactionContext(currentRoute));
+          }
+
+          this._prevRoute = currentRoute;
         }
 
-        return newState;
+        return newNavigationState;
       };
     }
   }
 
   /**
-   * Gets the transaction context for a PathAndParams
+   * Gets the transaction context for a `NavigationRoute`
    */
-  private _getPathTransactionContext(
-    pathAndParams: PathAndParams
-  ): TransactionContext {
+  private _getTransactionContext(route: NavigationRoute): TransactionContext {
     return {
-      name: `Navigation Focus: ${pathAndParams.path}`,
+      name: `Navigation Focus: ${route.routeName}`,
       op: "navigation",
       tags: {
         "routing.instrumentation":
           ReactNavigationV4Instrumentation.instrumentationName,
+        "routing.route.key": route.key,
       },
-      data: pathAndParams.params,
+      data: route.params,
     };
   }
+
+  /**
+   * Gets the current route given a navigation state
+   */
+  private _getCurrentRouteFromState(state: NavigationState): NavigationRoute {
+    const parentRoute = state.routes[state.index];
+
+    if (
+      "index" in parentRoute &&
+      "routes" in parentRoute &&
+      typeof parentRoute.index === "number" &&
+      Array.isArray(parentRoute.routes)
+    ) {
+      return this._getCurrentRouteFromState(parentRoute);
+    }
+
+    return parentRoute as NavigationRoute;
+  }
 }
 
 export { ReactNavigationV4Instrumentation };

From 11e99edba5b7e556262798a6a34432afff6a93db Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sat, 2 Jan 2021 22:55:35 +0700
Subject: [PATCH 13/40] ref: Remove TODO comment

---
 src/js/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/index.ts b/src/js/index.ts
index ddcf88da98..c0e9e14335 100644
--- a/src/js/index.ts
+++ b/src/js/index.ts
@@ -57,7 +57,6 @@ export { ReactNativeClient } from "./client";
 export { init, setDist, setRelease, nativeCrash } from "./sdk";
 export { TouchEventBoundary, withTouchEventBoundary } from "./touchevents";
 
-// TODO:
 export * as Tracing from "./tracing";
 
 /**

From 1c4db1302373c92b7dd712605ed59132024c12e7 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sat, 2 Jan 2021 23:36:22 +0700
Subject: [PATCH 14/40] feat: Add beforeNavigate to ReactNativeTracing

---
 src/js/tracing/reactnativetracing.ts | 31 ++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index da51e0c947..a965c48128 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -41,6 +41,16 @@ export interface ReactNativeTracingOptions
    * There is no routing instrumentation if nothing is passed.
    */
   routingInstrumentation?: RoutingInstrumentation;
+
+  /**
+   * beforeNavigate is called before a navigation transaction is created and allows users to modify transaction
+   * context data, or drop the transaction entirely (by setting `sampled = false` in the context).
+   *
+   * @param context: The context data which will be passed to `startTransaction` by default
+   *
+   * @returns A (potentially) modified context object, with `sampled = false` if the transaction should be dropped.
+   */
+  beforeNavigate?(context: TransactionContext): TransactionContext;
 }
 
 const defaultReactNativeTracingOptions: ReactNativeTracingOptions = {
@@ -132,11 +142,25 @@ export class ReactNativeTracing implements Integration {
     }
 
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { idleTimeout, maxTransactionDuration } = this.options;
+    const {
+      beforeNavigate,
+      idleTimeout,
+      maxTransactionDuration,
+    } = this.options;
+
+    const expandedContext = {
+      ...context,
+      trimEnd: true,
+    };
+
+    const modifiedContext =
+      typeof beforeNavigate === "function"
+        ? beforeNavigate(expandedContext)
+        : expandedContext;
 
-    if (context.sampled === false) {
+    if (modifiedContext.sampled === false) {
       logger.log(
-        `[ReactNativeTracing] Will not send ${context.op} transaction because of beforeNavigate.`
+        `[ReactNativeTracing] Will not send ${context.op} transaction.`
       );
     }
 
@@ -152,7 +176,6 @@ export class ReactNativeTracing implements Integration {
     );
     idleTransaction.registerBeforeFinishCallback(
       (transaction, endTimestamp) => {
-        // this._metrics.addPerformanceEntries(transaction);
         adjustTransactionDuration(
           secToMs(maxTransactionDuration),
           transaction,

From 5fb6218a44fb65ed4d9042498aff435a15d09087 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sat, 2 Jan 2021 23:44:51 +0700
Subject: [PATCH 15/40] feat: Log when instrumentation does not send
 transaction due

---
 src/js/tracing/reactnavigationv4.ts |  8 +++++++-
 src/js/tracing/reactnavigationv5.ts | 26 +++++++++++++-------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 4b1e647d50..76ea8913b1 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -135,10 +135,16 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
         // If the route is a different key, this is so we ignore actions that pertain to the same screen.
         if (!this._prevRoute || currentRoute.key !== this._prevRoute.key) {
+          const context = this._getTransactionContext(currentRoute);
+
           if (
             this._options.shouldAttachTransaction(this._prevRoute, currentRoute)
           ) {
-            this.onRouteWillChange(this._getTransactionContext(currentRoute));
+            this.onRouteWillChange(context);
+          } else {
+            logger.log(
+              `[ReactNavigationV4Instrumentation] Will not send transaction "${context.name}" due to shouldAttachTransaction.`
+            );
           }
 
           this._prevRoute = currentRoute;
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 870af1b3b3..7d2cfd9362 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -1,4 +1,5 @@
 import { Transaction as TransactionType } from "@sentry/types";
+import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./router";
 interface NavigationRoute {
@@ -117,24 +118,23 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
     const route = this._navigationContainerRef?.current?.getCurrentRoute();
 
     if (route) {
-      if (
-        this._latestTransaction &&
-        this._options.shouldAttachTransaction(route, this._latestRoute)
-      ) {
-        // Clear the timeout so the transaction does not get cancelled.
-        if (typeof this._stateChangeTimeout !== "undefined") {
-          clearTimeout(this._stateChangeTimeout);
-          this._stateChangeTimeout = undefined;
-        }
-
+      if (this._latestTransaction) {
         this._latestTransaction.setName(`Navigation Focus: ${route.name}`);
         this._latestTransaction.setTag("routing.route.key", route.key);
         this._latestTransaction.setData("routing.params", route.params);
 
-        // Remove the latest transaction to not overwrite.
-        this._latestTransaction = undefined;
+        if (this._options.shouldAttachTransaction(route, this._latestRoute)) {
+          // Clear the timeout so the transaction does not get cancelled.
+          if (typeof this._stateChangeTimeout !== "undefined") {
+            clearTimeout(this._stateChangeTimeout);
+            this._stateChangeTimeout = undefined;
+          }
+        } else {
+          logger.log(
+            `[ReactNavigationV5Instrumentation] Will not send transaction "${this._latestTransaction.name}" due to shouldAttachTransaction.`
+          );
+        }
       }
-
       this._latestRoute = route;
     }
   }

From c8ad0dadd79151dc40eb534bebb4e3be7bae737c Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sat, 2 Jan 2021 23:45:11 +0700
Subject: [PATCH 16/40] test: shouldAttachTransaction example in sample

---
 sample/src/App.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index 14bd23b15e..6a9c008817 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -19,7 +19,17 @@ import {store} from './reduxApp';
 import {version as packageVersion} from '../../package.json';
 import {SENTRY_INTERNAL_DSN} from './dsn';
 
-const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation();
+const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation(
+  {
+    shouldAttachTransaction: (route) => {
+      if (route.name === 'ManualTracker') {
+        return false;
+      }
+
+      return true;
+    },
+  },
+);
 
 Sentry.init({
   // Replace the example DSN below with your own DSN:

From 3feafc64b7fdb21dc27fb3e8d47763f612f95e8f Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sat, 2 Jan 2021 23:58:39 +0700
Subject: [PATCH 17/40] ref: Navigation transaction name is just the routeName

---
 src/js/tracing/reactnavigationv4.ts | 2 +-
 src/js/tracing/reactnavigationv5.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 76ea8913b1..a20b264c85 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -160,7 +160,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
    */
   private _getTransactionContext(route: NavigationRoute): TransactionContext {
     return {
-      name: `Navigation Focus: ${route.routeName}`,
+      name: route.routeName,
       op: "navigation",
       tags: {
         "routing.instrumentation":
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 7d2cfd9362..1e0441b097 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -119,7 +119,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
 
     if (route) {
       if (this._latestTransaction) {
-        this._latestTransaction.setName(`Navigation Focus: ${route.name}`);
+        this._latestTransaction.setName(route.name);
         this._latestTransaction.setTag("routing.route.key", route.key);
         this._latestTransaction.setData("routing.params", route.params);
 

From e59d1580f91418a927a837f530ccf6f7b1c5feb0 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 3 Jan 2021 01:07:40 +0700
Subject: [PATCH 18/40] ref: Use shouldSendTransaction for both
 instrumentations

---
 sample/src/App.tsx                  |  2 +-
 src/js/tracing/reactnavigationv4.ts | 92 ++++++++++++++---------------
 src/js/tracing/reactnavigationv5.ts | 33 +++++------
 3 files changed, 61 insertions(+), 66 deletions(-)

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index 6a9c008817..dcf55e5e99 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -21,7 +21,7 @@ import {SENTRY_INTERNAL_DSN} from './dsn';
 
 const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation(
   {
-    shouldAttachTransaction: (route) => {
+    shouldSendTransaction: (route, previousRoute) => {
       if (route.name === 'ManualTracker') {
         return false;
       }
diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index a20b264c85..33c68590f1 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -3,28 +3,28 @@ import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./router";
 
-interface NavigationRoute {
+interface NavigationRouteV4 {
   routeName: string;
   key: string;
   params?: Record<any, any>;
 }
 
-interface NavigationState {
+interface NavigationStateV4 {
   index: number;
   key: string;
   isTransitioning: boolean;
   routeName?: string;
-  routes: (NavigationRoute | NavigationState)[];
+  routes: (NavigationRouteV4 | NavigationStateV4)[];
 }
 
 interface AppContainerInstance {
   _navigation: {
-    state: NavigationState;
+    state: NavigationStateV4;
     router: {
       getStateForAction: (
         action: any,
-        state: NavigationState
-      ) => NavigationState;
+        state: NavigationStateV4
+      ) => NavigationStateV4;
     };
   };
 }
@@ -34,19 +34,19 @@ interface AppContainerRef {
 }
 
 type ReactNavigationV4ShouldAttachTransaction = (
-  prevRoute: NavigationRoute | null,
-  newRoute: NavigationRoute
+  route: NavigationRouteV4,
+  previousRoute: NavigationRouteV4 | null
 ) => boolean;
 
 interface ReactNavigationV4InstrumentationOptions {
-  shouldAttachTransaction: ReactNavigationV4ShouldAttachTransaction;
+  shouldSendTransaction: ReactNavigationV4ShouldAttachTransaction;
 }
 
 const defaultShouldAttachTransaction: ReactNavigationV4ShouldAttachTransaction = () =>
   true;
 
 const DEFAULT_OPTIONS: ReactNavigationV4InstrumentationOptions = {
-  shouldAttachTransaction: defaultShouldAttachTransaction,
+  shouldSendTransaction: defaultShouldAttachTransaction,
 };
 
 /**
@@ -60,7 +60,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
   private _options: ReactNavigationV4InstrumentationOptions;
 
-  private _prevRoute: NavigationRoute | null = null;
+  private _prevRoute: NavigationRouteV4 | null = null;
 
   constructor(options: Partial<ReactNavigationV4InstrumentationOptions>) {
     super();
@@ -103,17 +103,9 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
    */
   private _handleInitialState(): void {
     if (this._appContainerRef.current) {
-      const navigationState = this._appContainerRef.current._navigation.state;
+      const state = this._appContainerRef.current._navigation.state;
 
-      const currentRoute = this._getCurrentRouteFromState(navigationState);
-
-      if (
-        this._options.shouldAttachTransaction(this._prevRoute, currentRoute)
-      ) {
-        this.onRouteWillChange(this._getTransactionContext(currentRoute));
-      }
-
-      this._prevRoute = currentRoute;
+      this._onStateChange(state);
     }
   }
 
@@ -130,35 +122,41 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
         action,
         state
       ) => {
-        const newNavigationState = originalGetStateForAction(action, state);
-        const currentRoute = this._getCurrentRouteFromState(newNavigationState);
-
-        // If the route is a different key, this is so we ignore actions that pertain to the same screen.
-        if (!this._prevRoute || currentRoute.key !== this._prevRoute.key) {
-          const context = this._getTransactionContext(currentRoute);
-
-          if (
-            this._options.shouldAttachTransaction(this._prevRoute, currentRoute)
-          ) {
-            this.onRouteWillChange(context);
-          } else {
-            logger.log(
-              `[ReactNavigationV4Instrumentation] Will not send transaction "${context.name}" due to shouldAttachTransaction.`
-            );
-          }
-
-          this._prevRoute = currentRoute;
-        }
-
-        return newNavigationState;
+        const newState = originalGetStateForAction(action, state);
+
+        this._onStateChange(newState);
+
+        return newState;
       };
     }
   }
 
   /**
-   * Gets the transaction context for a `NavigationRoute`
+   * To be called on navigation state changes and creates the transaction.
+   */
+  private _onStateChange(state: NavigationStateV4): void {
+    const currentRoute = this._getCurrentRouteFromState(state);
+
+    // If the route is a different key, this is so we ignore actions that pertain to the same screen.
+    if (!this._prevRoute || currentRoute.key !== this._prevRoute.key) {
+      const context = this._getTransactionContext(currentRoute);
+
+      if (this._options.shouldSendTransaction(currentRoute, this._prevRoute)) {
+        this.onRouteWillChange(context);
+      } else {
+        logger.log(
+          `[ReactNavigationV4Instrumentation] Will not send transaction "${context.name}" due to shouldSendTransaction.`
+        );
+      }
+
+      this._prevRoute = currentRoute;
+    }
+  }
+
+  /**
+   * Gets the transaction context for a `NavigationRouteV4`
    */
-  private _getTransactionContext(route: NavigationRoute): TransactionContext {
+  private _getTransactionContext(route: NavigationRouteV4): TransactionContext {
     return {
       name: route.routeName,
       op: "navigation",
@@ -174,7 +172,9 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
   /**
    * Gets the current route given a navigation state
    */
-  private _getCurrentRouteFromState(state: NavigationState): NavigationRoute {
+  private _getCurrentRouteFromState(
+    state: NavigationStateV4
+  ): NavigationRouteV4 {
     const parentRoute = state.routes[state.index];
 
     if (
@@ -186,7 +186,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
       return this._getCurrentRouteFromState(parentRoute);
     }
 
-    return parentRoute as NavigationRoute;
+    return parentRoute as NavigationRouteV4;
   }
 }
 
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 1e0441b097..c6bcacea60 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -14,7 +14,7 @@ interface NavigationContainer {
 }
 
 interface ReactNavigationInstrumentationOptions {
-  shouldAttachTransaction(
+  shouldSendTransaction?(
     route: NavigationRoute,
     previousRoute?: NavigationRoute
   ): boolean;
@@ -24,17 +24,6 @@ type NavigationContainerRef = {
   current: NavigationContainer | null;
 };
 
-const defaultShouldAttachTransaction = (
-  route: NavigationRoute,
-  previousRoute?: NavigationRoute
-): boolean => {
-  return !previousRoute || previousRoute.key !== route.key;
-};
-
-const DEFAULT_OPTIONS: ReactNavigationInstrumentationOptions = {
-  shouldAttachTransaction: defaultShouldAttachTransaction,
-};
-
 const STATE_CHANGE_TIMEOUT_DURATION = 200;
 
 /**
@@ -61,10 +50,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   constructor(_options: Partial<ReactNavigationInstrumentationOptions> = {}) {
     super();
 
-    this._options = {
-      ...DEFAULT_OPTIONS,
-      ..._options,
-    };
+    this._options = _options;
   }
 
   /**
@@ -115,15 +101,24 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
    */
   private _onStateChange(): void {
     // Use the getCurrentRoute method to be accurate.
+    const previousRoute = this._latestRoute;
     const route = this._navigationContainerRef?.current?.getCurrentRoute();
 
     if (route) {
-      if (this._latestTransaction) {
+      if (
+        this._latestTransaction &&
+        (!previousRoute || previousRoute.key !== route.key)
+      ) {
         this._latestTransaction.setName(route.name);
         this._latestTransaction.setTag("routing.route.key", route.key);
         this._latestTransaction.setData("routing.params", route.params);
 
-        if (this._options.shouldAttachTransaction(route, this._latestRoute)) {
+        const willSendTransaction =
+          typeof this._options.shouldSendTransaction === "function"
+            ? this._options.shouldSendTransaction(route, previousRoute)
+            : true;
+
+        if (willSendTransaction) {
           // Clear the timeout so the transaction does not get cancelled.
           if (typeof this._stateChangeTimeout !== "undefined") {
             clearTimeout(this._stateChangeTimeout);
@@ -131,7 +126,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
           }
         } else {
           logger.log(
-            `[ReactNavigationV5Instrumentation] Will not send transaction "${this._latestTransaction.name}" due to shouldAttachTransaction.`
+            `[ReactNavigationV5Instrumentation] Will not send transaction "${this._latestTransaction.name}" due to shouldSendTransaction.`
           );
         }
       }

From 883db59bd8289d6fca22a4daf153b657050995fa Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 3 Jan 2021 14:31:19 +0700
Subject: [PATCH 19/40] feat: Set sampled = false on V4 instead of dropping

---
 src/js/tracing/reactnavigationv4.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 33c68590f1..622a932f43 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -141,14 +141,15 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
     if (!this._prevRoute || currentRoute.key !== this._prevRoute.key) {
       const context = this._getTransactionContext(currentRoute);
 
-      if (this._options.shouldSendTransaction(currentRoute, this._prevRoute)) {
-        this.onRouteWillChange(context);
-      } else {
+      if (!this._options.shouldSendTransaction(currentRoute, this._prevRoute)) {
+        context.sampled = false;
         logger.log(
           `[ReactNavigationV4Instrumentation] Will not send transaction "${context.name}" due to shouldSendTransaction.`
         );
       }
 
+      this.onRouteWillChange(context);
+
       this._prevRoute = currentRoute;
     }
   }

From 38df43049731be7cc08f04a5acfc86f4521ca86c Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 10 Jan 2021 21:51:13 +0700
Subject: [PATCH 20/40] ref: File rename and export structure change

---
 sample/src/App.tsx                                      | 4 ++--
 src/js/index.ts                                         | 7 ++++++-
 src/js/tracing/index.ts                                 | 5 ++++-
 src/js/tracing/reactnativetracing.ts                    | 4 ++--
 src/js/tracing/reactnavigationv4.ts                     | 2 +-
 src/js/tracing/reactnavigationv5.ts                     | 2 +-
 src/js/tracing/{router.ts => routingInstrumentation.ts} | 4 ++--
 7 files changed, 18 insertions(+), 10 deletions(-)
 rename src/js/tracing/{router.ts => routingInstrumentation.ts} (95%)

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index dcf55e5e99..d59b02ff1f 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -19,7 +19,7 @@ import {store} from './reduxApp';
 import {version as packageVersion} from '../../package.json';
 import {SENTRY_INTERNAL_DSN} from './dsn';
 
-const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation(
+const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumentation(
   {
     shouldSendTransaction: (route, previousRoute) => {
       if (route.name === 'ManualTracker') {
@@ -41,7 +41,7 @@ Sentry.init({
   },
   maxBreadcrumbs: 150, // Extend from the default 100 breadcrumbs.
   integrations: [
-    new Sentry.Tracing.ReactNativeTracing({
+    new Sentry.ReactNativeTracing({
       idleTimeout: 5000,
       routingInstrumentation: reactNavigationV5Instrumentation,
       tracingOrigins: ['localhost', /^\//, /^https:\/\//],
diff --git a/src/js/index.ts b/src/js/index.ts
index c0e9e14335..70cdfdc6f7 100644
--- a/src/js/index.ts
+++ b/src/js/index.ts
@@ -57,7 +57,12 @@ export { ReactNativeClient } from "./client";
 export { init, setDist, setRelease, nativeCrash } from "./sdk";
 export { TouchEventBoundary, withTouchEventBoundary } from "./touchevents";
 
-export * as Tracing from "./tracing";
+export {
+  ReactNativeTracing,
+  ReactNavigationV4Instrumentation,
+  ReactNavigationV5Instrumentation,
+  RoutingInstrumentation,
+} from "./tracing";
 
 /**
  * Adds the sdk info. Make sure this is called after @sentry/react's so this is the top-level SDK.
diff --git a/src/js/tracing/index.ts b/src/js/tracing/index.ts
index 70a6a1d736..9cc1e65b09 100644
--- a/src/js/tracing/index.ts
+++ b/src/js/tracing/index.ts
@@ -1,4 +1,7 @@
 export { ReactNativeTracing } from "./reactnativetracing";
 export { ReactNavigationV5Instrumentation } from "./reactnavigationv5";
 export { ReactNavigationV4Instrumentation } from "./reactnavigationv4";
-export { RoutingInstrumentation } from "./router";
+export {
+  RoutingInstrumentation,
+  RoutingInstrumentationInstance,
+} from "./routingInstrumentation";
diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index a965c48128..97789731b8 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -13,7 +13,7 @@ import {
 } from "@sentry/types";
 import { logger } from "@sentry/utils";
 
-import { RoutingInstrumentation } from "../tracing/router";
+import { RoutingInstrumentationInstance } from "../tracing/routingInstrumentation";
 import { adjustTransactionDuration, secToMs } from "./utils";
 
 export interface ReactNativeTracingOptions
@@ -40,7 +40,7 @@ export interface ReactNativeTracingOptions
    * The routing instrumentation to be used with the tracing integration.
    * There is no routing instrumentation if nothing is passed.
    */
-  routingInstrumentation?: RoutingInstrumentation;
+  routingInstrumentation?: RoutingInstrumentationInstance;
 
   /**
    * beforeNavigate is called before a navigation transaction is created and allows users to modify transaction
diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 622a932f43..89a38c96ac 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -1,7 +1,7 @@
 import { TransactionContext } from "@sentry/types";
 import { logger } from "@sentry/utils";
 
-import { RoutingInstrumentation } from "./router";
+import { RoutingInstrumentation } from "./routingInstrumentation";
 
 interface NavigationRouteV4 {
   routeName: string;
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index c6bcacea60..8cff1418bc 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -1,7 +1,7 @@
 import { Transaction as TransactionType } from "@sentry/types";
 import { logger } from "@sentry/utils";
 
-import { RoutingInstrumentation } from "./router";
+import { RoutingInstrumentation } from "./routingInstrumentation";
 interface NavigationRoute {
   name: string;
   key: string;
diff --git a/src/js/tracing/router.ts b/src/js/tracing/routingInstrumentation.ts
similarity index 95%
rename from src/js/tracing/router.ts
rename to src/js/tracing/routingInstrumentation.ts
index b811010273..7ce54a54e8 100644
--- a/src/js/tracing/router.ts
+++ b/src/js/tracing/routingInstrumentation.ts
@@ -5,7 +5,7 @@ export type TransactionCreator = (
   context: TransactionContext
 ) => Transaction | undefined;
 
-export interface RoutingInstrumentationType {
+export interface RoutingInstrumentationInstance {
   /**
    * Registers a listener that's called on every route change with a `TransactionContext`.
    *
@@ -27,7 +27,7 @@ export interface RoutingInstrumentationType {
  * Base Routing Instrumentation. Can be used by users to manually instrument custom routers.
  * Pass this to the tracing integration, and call `onRouteWillChange` every time before a route changes.
  */
-export class RoutingInstrumentation implements RoutingInstrumentationType {
+export class RoutingInstrumentation implements RoutingInstrumentationInstance {
   protected _getCurrentHub?: () => Hub;
 
   private _tracingListener?: TransactionCreator;

From 2c33c86019057d5aa69d7fb17a1cd015811e2fc2 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 10 Jan 2021 21:53:58 +0700
Subject: [PATCH 21/40] fix: Fix failing native transport test

---
 test/transports/native.test.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/test/transports/native.test.ts b/test/transports/native.test.ts
index 6f091a8cad..e736a41ed4 100644
--- a/test/transports/native.test.ts
+++ b/test/transports/native.test.ts
@@ -2,13 +2,17 @@ import { NativeTransport } from "../../src/js/transports/native";
 
 jest.mock("../../src/js/wrapper", () => ({
   NATIVE: {
-    sendEvent: jest.fn(() => Promise.resolve({ status: 200 }))
-  }
+    sendEvent: jest.fn(() => Promise.resolve({ status: 200 })),
+  },
 }));
 
 describe("NativeTransport", () => {
   test("call native sendEvent", async () => {
-    const transport = new NativeTransport();
+    // TODO: Remove this when we remove the fetch transport hack inside the native transport
+    const transport = new NativeTransport({
+      dsn:
+        "https://6890c2f6677340daa4804f8194804ea2@o19635.ingest.sentry.io/148053",
+    });
     await expect(transport.sendEvent({})).resolves.toEqual({ status: 200 });
   });
 });

From dc73747a0b89416a8d7ced17497e816d0e665dff Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 10 Jan 2021 23:12:45 +0700
Subject: [PATCH 22/40] ref: Change sampling location + add routeName as a tag

---
 src/js/tracing/reactnavigationv5.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 8cff1418bc..6de22fa998 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -2,6 +2,7 @@ import { Transaction as TransactionType } from "@sentry/types";
 import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./routingInstrumentation";
+
 interface NavigationRoute {
   name: string;
   key: string;
@@ -88,6 +89,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
         "routing.instrumentation":
           ReactNavigationV5Instrumentation.instrumentationName,
       },
+      sampled: false,
     });
 
     this._stateChangeTimeout = setTimeout(
@@ -109,9 +111,11 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
         this._latestTransaction &&
         (!previousRoute || previousRoute.key !== route.key)
       ) {
+        this._latestTransaction.sampled = true;
         this._latestTransaction.setName(route.name);
-        this._latestTransaction.setTag("routing.route.key", route.key);
-        this._latestTransaction.setData("routing.params", route.params);
+        this._latestTransaction.setTag("routing.route.name", route.name);
+        this._latestTransaction.setData("routing.route.key", route.key);
+        this._latestTransaction.setData("routing.route.params", route.params);
 
         const willSendTransaction =
           typeof this._options.shouldSendTransaction === "function"
@@ -137,7 +141,6 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   /** Cancels the latest transaction so it does not get sent to Sentry. */
   private _discardLatestTransaction(): void {
     if (this._latestTransaction) {
-      this._latestTransaction.sampled = false;
       this._latestTransaction.finish();
       this._latestTransaction = undefined;
     }

From 0eb60a80bfd4c88dd85aa99fcf2a633ad488f3e6 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 10 Jan 2021 23:13:54 +0700
Subject: [PATCH 23/40] ref: Add V5 suffixes to ReactNavigationV5
 instrumentation

---
 src/js/tracing/reactnavigationv5.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 6de22fa998..e84fcf6543 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -3,26 +3,26 @@ import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./routingInstrumentation";
 
-interface NavigationRoute {
+interface NavigationRouteV5 {
   name: string;
   key: string;
   params?: Record<any, any>;
 }
 
-interface NavigationContainer {
+interface NavigationContainerV5 {
   addListener: (type: string, listener: () => void) => void;
-  getCurrentRoute: () => NavigationRoute;
+  getCurrentRoute: () => NavigationRouteV5;
 }
 
-interface ReactNavigationInstrumentationOptions {
+interface ReactNavigationV5InstrumentationOptions {
   shouldSendTransaction?(
-    route: NavigationRoute,
-    previousRoute?: NavigationRoute
+    route: NavigationRouteV5,
+    previousRoute?: NavigationRouteV5
   ): boolean;
 }
 
-type NavigationContainerRef = {
-  current: NavigationContainer | null;
+type NavigationContainerV5Ref = {
+  current: NavigationContainerV5 | null;
 };
 
 const STATE_CHANGE_TIMEOUT_DURATION = 200;
@@ -38,17 +38,17 @@ const STATE_CHANGE_TIMEOUT_DURATION = 200;
 export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   static instrumentationName: string = "react-navigation-v5";
 
-  private _options: ReactNavigationInstrumentationOptions;
+  private _options: ReactNavigationV5InstrumentationOptions;
 
-  private _navigationContainerRef: NavigationContainerRef = {
+  private _navigationContainerRef: NavigationContainerV5Ref = {
     current: null,
   };
 
-  private _latestRoute?: NavigationRoute;
+  private _latestRoute?: NavigationRouteV5;
   private _latestTransaction?: TransactionType;
   private _stateChangeTimeout?: number | undefined;
 
-  constructor(_options: Partial<ReactNavigationInstrumentationOptions> = {}) {
+  constructor(_options: Partial<ReactNavigationV5InstrumentationOptions> = {}) {
     super();
 
     this._options = _options;
@@ -59,7 +59,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
    * @param navigationContainerRef Ref to a `NavigationContainer`
    */
   public registerNavigationContainer(
-    navigationContainerRef: NavigationContainerRef
+    navigationContainerRef: NavigationContainerV5Ref
   ): void {
     this._navigationContainerRef = navigationContainerRef;
     navigationContainerRef.current?.addListener(

From f9fe2008781660e7206327094a9b25678ea80ac2 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 10 Jan 2021 23:16:58 +0700
Subject: [PATCH 24/40] test: Add tests for ReactNavigationV5Instrumentation

---
 src/js/tracing/reactnavigationv5.ts    |   2 +-
 test/tracing/reactnavigationv5.test.ts | 156 +++++++++++++++++++++++++
 2 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 test/tracing/reactnavigationv5.test.ts

diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index e84fcf6543..aed4fd06f2 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -3,7 +3,7 @@ import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./routingInstrumentation";
 
-interface NavigationRouteV5 {
+export interface NavigationRouteV5 {
   name: string;
   key: string;
   params?: Record<any, any>;
diff --git a/test/tracing/reactnavigationv5.test.ts b/test/tracing/reactnavigationv5.test.ts
new file mode 100644
index 0000000000..180336ed98
--- /dev/null
+++ b/test/tracing/reactnavigationv5.test.ts
@@ -0,0 +1,156 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  NavigationRouteV5,
+  ReactNavigationV5Instrumentation,
+} from "../../src/js/tracing/reactnavigationv5";
+
+const dummyRoute = {
+  name: "Route",
+  key: "0",
+};
+
+class MockNavigationContainer {
+  currentRoute: NavigationRouteV5 = dummyRoute;
+  listeners: Record<string, (e: any) => void> = {};
+  addListener(eventType: string, listener: (e: any) => void): void {
+    this.listeners[eventType] = listener;
+  }
+  getCurrentRoute(): NavigationRouteV5 {
+    return this.currentRoute;
+  }
+}
+
+const getMockTransaction = () => ({
+  sampled: false,
+  setName: jest.fn(),
+  setTag: jest.fn(),
+  setData: jest.fn(),
+  finish: jest.fn(),
+});
+
+describe("ReactNavigationV5Instrumentation", () => {
+  test("transaction set on initialize", () => {
+    const instrumentation = new ReactNavigationV5Instrumentation();
+
+    const mockTransaction = getMockTransaction();
+    const tracingListener = jest.fn(() => mockTransaction);
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockNavigationContainerRef = {
+      current: new MockNavigationContainer(),
+    };
+
+    instrumentation.registerNavigationContainer(
+      mockNavigationContainerRef as any
+    );
+
+    expect(mockTransaction.sampled).toBe(true);
+    expect(mockTransaction.setName).toBeCalledWith(dummyRoute.name);
+    expect(mockTransaction.setTag).toBeCalledWith(
+      "routing.route.name",
+      dummyRoute.name
+    );
+    expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+      1,
+      "routing.route.key",
+      dummyRoute.key
+    );
+    expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+      2,
+      "routing.route.params",
+      undefined
+    );
+  });
+
+  test("transaction sent on navigation", async () => {
+    const instrumentation = new ReactNavigationV5Instrumentation();
+
+    // Need a dummy transaction as the instrumentation will start a transaction right away when the first navigation container is attached.
+    const mockTransactionDummy = getMockTransaction();
+    const transactionRef = {
+      current: mockTransactionDummy,
+    };
+    const tracingListener = jest.fn(() => transactionRef.current);
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockNavigationContainerRef = {
+      current: new MockNavigationContainer(),
+    };
+
+    instrumentation.registerNavigationContainer(
+      mockNavigationContainerRef as any
+    );
+
+    const mockTransaction = getMockTransaction();
+    transactionRef.current = mockTransaction;
+
+    mockNavigationContainerRef.current.listeners["__unsafe_action__"]({});
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        const route = {
+          name: "New Route",
+          key: "1",
+          params: {
+            someParam: 42,
+          },
+        };
+        mockNavigationContainerRef.current.currentRoute = route;
+        mockNavigationContainerRef.current.listeners["state"]({});
+
+        expect(mockTransaction.sampled).toBe(true);
+        expect(mockTransaction.setName).toBeCalledWith(route.name);
+        expect(mockTransaction.setTag).toBeCalledWith(
+          "routing.route.name",
+          route.name
+        );
+        expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+          1,
+          "routing.route.key",
+          route.key
+        );
+        expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+          2,
+          "routing.route.params",
+          route.params
+        );
+        resolve();
+      }, 50);
+    });
+  });
+
+  test("transaction not sent on a cancelled navigation", async () => {
+    const instrumentation = new ReactNavigationV5Instrumentation();
+
+    // Need a dummy transaction as the instrumentation will start a transaction right away when the first navigation container is attached.
+    const mockTransactionDummy = getMockTransaction();
+    const transactionRef = {
+      current: mockTransactionDummy,
+    };
+    const tracingListener = jest.fn(() => transactionRef.current);
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockNavigationContainerRef = {
+      current: new MockNavigationContainer(),
+    };
+
+    instrumentation.registerNavigationContainer(
+      mockNavigationContainerRef as any
+    );
+
+    const mockTransaction = getMockTransaction();
+    transactionRef.current = mockTransaction;
+
+    mockNavigationContainerRef.current.listeners["__unsafe_action__"]({});
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        expect(mockTransaction.sampled).toBe(false);
+        expect(mockTransaction.setName).not.toHaveBeenCalled();
+        expect(mockTransaction.setTag).not.toHaveBeenCalled();
+        expect(mockTransaction.setData).not.toHaveBeenCalled();
+        resolve();
+      }, 250);
+    });
+  });
+});

From 57b6ef1a441ce4e7211c6d62efaba0fbd9c1f491 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 11 Jan 2021 19:01:08 +0700
Subject: [PATCH 25/40] fix: Undo bad sampling decision

---
 src/js/tracing/reactnavigationv5.ts    | 3 +--
 test/tracing/reactnavigationv5.test.ts | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index aed4fd06f2..6eb56bbac9 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -89,7 +89,6 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
         "routing.instrumentation":
           ReactNavigationV5Instrumentation.instrumentationName,
       },
-      sampled: false,
     });
 
     this._stateChangeTimeout = setTimeout(
@@ -111,7 +110,6 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
         this._latestTransaction &&
         (!previousRoute || previousRoute.key !== route.key)
       ) {
-        this._latestTransaction.sampled = true;
         this._latestTransaction.setName(route.name);
         this._latestTransaction.setTag("routing.route.name", route.name);
         this._latestTransaction.setData("routing.route.key", route.key);
@@ -141,6 +139,7 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
   /** Cancels the latest transaction so it does not get sent to Sentry. */
   private _discardLatestTransaction(): void {
     if (this._latestTransaction) {
+      this._latestTransaction.sampled = false;
       this._latestTransaction.finish();
       this._latestTransaction = undefined;
     }
diff --git a/test/tracing/reactnavigationv5.test.ts b/test/tracing/reactnavigationv5.test.ts
index 180336ed98..43d12400ad 100644
--- a/test/tracing/reactnavigationv5.test.ts
+++ b/test/tracing/reactnavigationv5.test.ts
@@ -44,7 +44,6 @@ describe("ReactNavigationV5Instrumentation", () => {
       mockNavigationContainerRef as any
     );
 
-    expect(mockTransaction.sampled).toBe(true);
     expect(mockTransaction.setName).toBeCalledWith(dummyRoute.name);
     expect(mockTransaction.setTag).toBeCalledWith(
       "routing.route.name",
@@ -98,7 +97,6 @@ describe("ReactNavigationV5Instrumentation", () => {
         mockNavigationContainerRef.current.currentRoute = route;
         mockNavigationContainerRef.current.listeners["state"]({});
 
-        expect(mockTransaction.sampled).toBe(true);
         expect(mockTransaction.setName).toBeCalledWith(route.name);
         expect(mockTransaction.setTag).toBeCalledWith(
           "routing.route.name",

From 65095f0b55ef342cde61769d88f2c36b42af00cb Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 11 Jan 2021 19:01:29 +0700
Subject: [PATCH 26/40] test: Add React Navigation V4 tests

---
 src/js/tracing/reactnavigationv4.ts    |   9 +-
 test/tracing/reactnavigationv4.test.ts | 226 +++++++++++++++++++++++++
 2 files changed, 232 insertions(+), 3 deletions(-)
 create mode 100644 test/tracing/reactnavigationv4.test.ts

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 89a38c96ac..6ae378169c 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -17,7 +17,7 @@ interface NavigationStateV4 {
   routes: (NavigationRouteV4 | NavigationStateV4)[];
 }
 
-interface AppContainerInstance {
+export interface AppContainerInstance {
   _navigation: {
     state: NavigationStateV4;
     router: {
@@ -62,7 +62,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
   private _prevRoute: NavigationRouteV4 | null = null;
 
-  constructor(options: Partial<ReactNavigationV4InstrumentationOptions>) {
+  constructor(options: Partial<ReactNavigationV4InstrumentationOptions> = {}) {
     super();
 
     this._options = {
@@ -164,9 +164,12 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
       tags: {
         "routing.instrumentation":
           ReactNavigationV4Instrumentation.instrumentationName,
+        "routing.route.name": route.routeName,
+      },
+      data: {
         "routing.route.key": route.key,
+        "routing.route.params": route.params,
       },
-      data: route.params,
     };
   }
 
diff --git a/test/tracing/reactnavigationv4.test.ts b/test/tracing/reactnavigationv4.test.ts
new file mode 100644
index 0000000000..f6f18703b2
--- /dev/null
+++ b/test/tracing/reactnavigationv4.test.ts
@@ -0,0 +1,226 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  AppContainerInstance,
+  NavigationRouteV4,
+  NavigationStateV4,
+  ReactNavigationV4Instrumentation,
+} from "../../src/js/tracing/reactnavigationv4";
+
+const dummyRoute: NavigationRouteV4 = {
+  routeName: "Route",
+  key: "0",
+};
+
+class MockAppContainer implements AppContainerInstance {
+  _navigation: {
+    state: NavigationStateV4;
+    router: {
+      dispatchAction: (action: any) => void;
+      getStateForAction: (
+        action: any,
+        state: NavigationStateV4
+      ) => NavigationStateV4;
+    };
+  };
+
+  constructor() {
+    const router = {
+      dispatchAction: (action: any) => {
+        const newState = router.getStateForAction(
+          action,
+          this._navigation.state
+        );
+
+        this._navigation.state = newState;
+      },
+      getStateForAction: (action: any, state: NavigationStateV4) => {
+        if (action.routeName === 'DoNotNavigate') {
+          return state;
+        }
+
+        return {
+          ...state,
+          index: state.routes.length,
+          routes: [
+            ...state.routes,
+            {
+              routeName: action.routeName,
+              key: action.key,
+              params: action.params,
+            },
+          ],
+        };
+      },
+    };
+
+    this._navigation = {
+      state: {
+        index: 0,
+        key: "0",
+        isTransitioning: false,
+        routes: [
+          {
+            name: "Initial Route",
+            key: "route0",
+            params: {
+              hello: true,
+            },
+          },
+        ],
+      },
+      router,
+    };
+  }
+}
+
+describe("ReactNavigationV4Instrumentation", () => {
+  test("transaction set on initialize", () => {
+    const instrumentation = new ReactNavigationV4Instrumentation();
+
+    instrumentation.onRouteWillChange = jest.fn();
+
+    const tracingListener = jest.fn();
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockAppContainerRef = {
+      current: new MockAppContainer(),
+    };
+
+    instrumentation.registerAppContainer(mockAppContainerRef as any);
+
+    const firstRoute = mockAppContainerRef.current._navigation.state.routes[0];
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(1);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenLastCalledWith({
+      name: firstRoute.routeName,
+      op: "navigation",
+      tags: {
+        "routing.instrumentation":
+          ReactNavigationV4Instrumentation.instrumentationName,
+        "routing.route.name": firstRoute.routeName,
+      },
+      data: {
+        "routing.route.key": firstRoute.key,
+        "routing.route.params": firstRoute.params,
+      },
+    });
+  });
+
+  test("transaction sent on navigation", () => {
+    const instrumentation = new ReactNavigationV4Instrumentation();
+
+    instrumentation.onRouteWillChange = jest.fn();
+
+    const tracingListener = jest.fn();
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockAppContainerRef = {
+      current: new MockAppContainer(),
+    };
+
+    instrumentation.registerAppContainer(mockAppContainerRef as any);
+
+    const action = {
+      routeName: "New Route",
+      key: "key1",
+      params: {
+        someParam: 42,
+      },
+    };
+    mockAppContainerRef.current._navigation.router.dispatchAction(action);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(2);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenLastCalledWith({
+      name: action.routeName,
+      op: "navigation",
+      tags: {
+        "routing.instrumentation":
+          ReactNavigationV4Instrumentation.instrumentationName,
+        "routing.route.name": action.routeName,
+      },
+      data: {
+        "routing.route.key": action.key,
+        "routing.route.params": action.params,
+      },
+    });
+  });
+
+  test("not sampled with shouldSendTransaction", () => {
+    const instrumentation = new ReactNavigationV4Instrumentation({
+      shouldSendTransaction: (newRoute) => {
+        if (newRoute.routeName === 'DoNotSend') {
+          return false;
+        }
+
+        return true;
+      }
+    });
+
+    instrumentation.onRouteWillChange = jest.fn();
+
+    const tracingListener = jest.fn();
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockAppContainerRef = {
+      current: new MockAppContainer(),
+    };
+
+    instrumentation.registerAppContainer(mockAppContainerRef as any);
+
+    const action = {
+      routeName: "DoNotSend",
+      key: "key1",
+      params: {
+        someParam: 42,
+      },
+    };
+    mockAppContainerRef.current._navigation.router.dispatchAction(action);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(2);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenLastCalledWith({
+      name: action.routeName,
+      op: "navigation",
+      tags: {
+        "routing.instrumentation":
+          ReactNavigationV4Instrumentation.instrumentationName,
+        "routing.route.name": action.routeName,
+      },
+      data: {
+        "routing.route.key": action.key,
+        "routing.route.params": action.params,
+      },
+      sampled: false
+    });
+  });
+
+  test("transaction not attached on a cancelled navigation", () => {
+    const instrumentation = new ReactNavigationV4Instrumentation();
+
+    instrumentation.onRouteWillChange = jest.fn();
+
+    const tracingListener = jest.fn();
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockAppContainerRef = {
+      current: new MockAppContainer(),
+    };
+
+    instrumentation.registerAppContainer(mockAppContainerRef as any);
+
+    const action = {
+      routeName: "DoNotNavigate",
+    };
+    mockAppContainerRef.current._navigation.router.dispatchAction(action);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(1);
+});

From c4a8f8633915046d297583c53d13956458335764 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 11 Jan 2021 19:05:29 +0700
Subject: [PATCH 27/40] ref: Cleanup

---
 src/js/tracing/reactnavigationv4.ts    |  4 ++--
 test/tracing/reactnavigationv4.test.ts | 19 ++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index 6ae378169c..da1f3a9c90 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -3,13 +3,13 @@ import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentation } from "./routingInstrumentation";
 
-interface NavigationRouteV4 {
+export interface NavigationRouteV4 {
   routeName: string;
   key: string;
   params?: Record<any, any>;
 }
 
-interface NavigationStateV4 {
+export interface NavigationStateV4 {
   index: number;
   key: string;
   isTransitioning: boolean;
diff --git a/test/tracing/reactnavigationv4.test.ts b/test/tracing/reactnavigationv4.test.ts
index f6f18703b2..22f9b53b03 100644
--- a/test/tracing/reactnavigationv4.test.ts
+++ b/test/tracing/reactnavigationv4.test.ts
@@ -6,11 +6,6 @@ import {
   ReactNavigationV4Instrumentation,
 } from "../../src/js/tracing/reactnavigationv4";
 
-const dummyRoute: NavigationRouteV4 = {
-  routeName: "Route",
-  key: "0",
-};
-
 class MockAppContainer implements AppContainerInstance {
   _navigation: {
     state: NavigationStateV4;
@@ -34,7 +29,7 @@ class MockAppContainer implements AppContainerInstance {
         this._navigation.state = newState;
       },
       getStateForAction: (action: any, state: NavigationStateV4) => {
-        if (action.routeName === 'DoNotNavigate') {
+        if (action.routeName === "DoNotNavigate") {
           return state;
         }
 
@@ -60,7 +55,7 @@ class MockAppContainer implements AppContainerInstance {
         isTransitioning: false,
         routes: [
           {
-            name: "Initial Route",
+            routeName: "Initial Route",
             key: "route0",
             params: {
               hello: true,
@@ -88,7 +83,8 @@ describe("ReactNavigationV4Instrumentation", () => {
 
     instrumentation.registerAppContainer(mockAppContainerRef as any);
 
-    const firstRoute = mockAppContainerRef.current._navigation.state.routes[0];
+    const firstRoute = mockAppContainerRef.current._navigation.state
+      .routes[0] as NavigationRouteV4;
 
     // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(1);
@@ -154,12 +150,12 @@ describe("ReactNavigationV4Instrumentation", () => {
   test("not sampled with shouldSendTransaction", () => {
     const instrumentation = new ReactNavigationV4Instrumentation({
       shouldSendTransaction: (newRoute) => {
-        if (newRoute.routeName === 'DoNotSend') {
+        if (newRoute.routeName === "DoNotSend") {
           return false;
         }
 
         return true;
-      }
+      },
     });
 
     instrumentation.onRouteWillChange = jest.fn();
@@ -198,7 +194,7 @@ describe("ReactNavigationV4Instrumentation", () => {
         "routing.route.key": action.key,
         "routing.route.params": action.params,
       },
-      sampled: false
+      sampled: false,
     });
   });
 
@@ -223,4 +219,5 @@ describe("ReactNavigationV4Instrumentation", () => {
 
     // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(instrumentation.onRouteWillChange).toHaveBeenCalledTimes(1);
+  });
 });

From 07f28464674910ffb9c72c8e02e8ae277a391ebd Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 11 Jan 2021 19:05:42 +0700
Subject: [PATCH 28/40] test: Add shouldSendTransaction test for v5

---
 test/tracing/reactnavigationv5.test.ts | 47 ++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/test/tracing/reactnavigationv5.test.ts b/test/tracing/reactnavigationv5.test.ts
index 43d12400ad..bb52861b65 100644
--- a/test/tracing/reactnavigationv5.test.ts
+++ b/test/tracing/reactnavigationv5.test.ts
@@ -117,6 +117,53 @@ describe("ReactNavigationV5Instrumentation", () => {
     });
   });
 
+  test("transaction not sent on shouldSendTransaction: false", async () => {
+    const instrumentation = new ReactNavigationV5Instrumentation({
+      shouldSendTransaction: (route) => {
+        if (route.name === "DoNotSend") {
+          return false;
+        }
+
+        return true;
+      },
+    });
+
+    // Need a dummy transaction as the instrumentation will start a transaction right away when the first navigation container is attached.
+    const mockTransactionDummy = getMockTransaction();
+    const transactionRef = {
+      current: mockTransactionDummy,
+    };
+    const tracingListener = jest.fn(() => transactionRef.current);
+    instrumentation.registerRoutingInstrumentation(tracingListener as any);
+
+    const mockNavigationContainerRef = {
+      current: new MockNavigationContainer(),
+    };
+
+    instrumentation.registerNavigationContainer(
+      mockNavigationContainerRef as any
+    );
+
+    const mockTransaction = getMockTransaction();
+    transactionRef.current = mockTransaction;
+
+    mockNavigationContainerRef.current.listeners["__unsafe_action__"]({});
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        const route = {
+          name: "DoNotSend",
+          key: "1",
+        };
+        mockNavigationContainerRef.current.currentRoute = route;
+        mockNavigationContainerRef.current.listeners["state"]({});
+
+        expect(mockTransaction.sampled).toBe(false);
+        resolve();
+      }, 50);
+    });
+  });
+
   test("transaction not sent on a cancelled navigation", async () => {
     const instrumentation = new ReactNavigationV5Instrumentation();
 

From 478d9469c2d956c24be4eeb252814bc509feaf4c Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 17 Jan 2021 22:37:14 +0700
Subject: [PATCH 29/40] build(android): Bump sentry-android to 4.0.0-alpha.3

---
 android/build.gradle | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/android/build.gradle b/android/build.gradle
index bb75be8454..25a9d62ef6 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -26,5 +26,5 @@ android {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    api 'io.sentry:sentry-android:3.2.0'
+    api 'io.sentry:sentry-android:4.0.0-alpha.3'
 }

From d4833217be0bd2515f9adf6cd0f5fd8d2efdd1e5 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Sun, 17 Jan 2021 22:37:26 +0700
Subject: [PATCH 30/40] fix: Remove native transport transaction hack on
 android

---
 src/js/backend.ts           |  2 +-
 src/js/transports/native.ts | 17 ++---------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/js/backend.ts b/src/js/backend.ts
index 1d92204911..a350a53544 100644
--- a/src/js/backend.ts
+++ b/src/js/backend.ts
@@ -81,7 +81,7 @@ export class ReactNativeBackend extends BaseBackend<BrowserOptions> {
     }
 
     if (this._isNativeTransportAvailable()) {
-      return new NativeTransport(transportOptions);
+      return new NativeTransport();
     }
 
     return new Transports.FetchTransport(transportOptions);
diff --git a/src/js/transports/native.ts b/src/js/transports/native.ts
index ce03b43dc8..28bc571d83 100644
--- a/src/js/transports/native.ts
+++ b/src/js/transports/native.ts
@@ -1,8 +1,8 @@
-import { Transports } from "@sentry/react";
+// import { Transports } from "@sentry/react";
 import { Event, Response, Transport } from "@sentry/types";
 import { PromiseBuffer, SentryError } from "@sentry/utils";
-import { Platform } from "react-native";
 
+// import { Platform } from "react-native";
 import { NATIVE } from "../wrapper";
 
 /** Native Transport class implementation */
@@ -10,23 +10,10 @@ export class NativeTransport implements Transport {
   /** A simple buffer holding all requests. */
   protected readonly _buffer: PromiseBuffer<Response> = new PromiseBuffer(30);
 
-  /** Hack that's used to send transactions on Android */
-  private _fetchTransport: Transport;
-
-  constructor(transportOptions: { dsn: string }) {
-    this._fetchTransport = new Transports.FetchTransport(transportOptions);
-  }
-
   /**
    * @inheritDoc
    */
   public sendEvent(event: Event): PromiseLike<Response> {
-    // This is a hack to send transactions through the JS fetch transport on Android
-    // TODO: Remove this hack when android supports transactions through written envelopes.
-    if (Platform.OS === "android" && event.type === "transaction") {
-      return this._fetchTransport.sendEvent(event);
-    }
-
     if (!this._buffer.isReady()) {
       return Promise.reject(
         new SentryError("Not adding Promise due to buffer limit reached.")

From afa0a2759e55ebfc9db2e501ee3ed86d2c19945e Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 18 Jan 2021 16:56:02 +0700
Subject: [PATCH 31/40] feat: Ignore routes that have been seen before without
 child spans

---
 sample/src/screens/HomeScreen.tsx    | 30 +++++++++++++++++++++++++-
 src/js/tracing/reactnativetracing.ts | 32 ++++++++++++++++++++++++++++
 src/js/tracing/reactnavigationv4.ts  | 16 ++++++++++++++
 src/js/tracing/reactnavigationv5.ts  | 22 +++++++++++++++++++
 4 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 143bc4885c..9c508f7fa3 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -17,7 +17,11 @@ import {
   View,
 } from 'react-native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {CommonActions} from '@react-navigation/native';
+import {
+  CommonActions,
+  useNavigation,
+  useNavigationState,
+} from '@react-navigation/native';
 
 import * as Sentry from '@sentry/react-native';
 
@@ -31,6 +35,30 @@ interface Props {
 const HomeScreen = (props: Props) => {
   const currentDSN = Sentry.getCurrentHub().getClient().getOptions().dsn;
 
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      Sentry.configureScope((scope) => {
+        const activeTransaction = scope.getTransaction();
+
+        if (activeTransaction) {
+          const child = activeTransaction.startChild({
+            description: 'I am a child!',
+          });
+
+          setTimeout(() => {
+            child.finish();
+          }, 500);
+        }
+      });
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  navigation;
+
   // Show bad code inside error boundary to trigger it.
   const [showBadCode, setShowBadCode] = React.useState(false);
 
diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index 97789731b8..bca97c289e 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -42,6 +42,14 @@ export interface ReactNativeTracingOptions
    */
   routingInstrumentation?: RoutingInstrumentationInstance;
 
+  /**
+   * Does not sample transactions that are from routes that have been seen any more and don't have any spans.
+   * This removes a lot of the clutter as most back navigation transactions are now ignored.
+   *
+   * Default: true
+   */
+  ignoreEmptyBackNavigationTransactions?: boolean;
+
   /**
    * beforeNavigate is called before a navigation transaction is created and allows users to modify transaction
    * context data, or drop the transaction entirely (by setting `sampled = false` in the context).
@@ -57,6 +65,7 @@ const defaultReactNativeTracingOptions: ReactNativeTracingOptions = {
   ...defaultRequestInstrumentationOptions,
   idleTimeout: 1000,
   maxTransactionDuration: 600,
+  ignoreEmptyBackNavigationTransactions: true,
 };
 
 /**
@@ -120,6 +129,14 @@ export class ReactNativeTracing implements Integration {
       tracingOrigins,
       shouldCreateSpanForRequest,
     });
+
+    addGlobalEventProcessor((event) => {
+      // eslint-disable-next-line no-empty
+      if (event.type === "transaction") {
+      }
+
+      return event;
+    });
   }
 
   /** To be called when the route changes, but BEFORE the components of the new route mount. */
@@ -184,6 +201,21 @@ export class ReactNativeTracing implements Integration {
       }
     );
 
+    if (this.options.ignoreEmptyBackNavigationTransactions) {
+      idleTransaction.registerBeforeFinishCallback((transaction) => {
+        if (
+          transaction.data["routing.route.hasBeenSeen"] &&
+          (!transaction.spanRecorder ||
+            transaction.spanRecorder.spans.filter(
+              (span) => span.spanId !== transaction.spanId
+            ).length === 0)
+        ) {
+          // Route has been seen before and has no child spans.
+          transaction.sampled = false;
+        }
+      });
+    }
+
     return idleTransaction as TransactionType;
   }
 }
diff --git a/src/js/tracing/reactnavigationv4.ts b/src/js/tracing/reactnavigationv4.ts
index da1f3a9c90..547b6d4d23 100644
--- a/src/js/tracing/reactnavigationv4.ts
+++ b/src/js/tracing/reactnavigationv4.ts
@@ -60,7 +60,10 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
   private _options: ReactNavigationV4InstrumentationOptions;
 
+  private readonly _maxRecentRouteLen: number = 200;
+
   private _prevRoute: NavigationRouteV4 | null = null;
+  private _recentRouteKeys: string[] = [];
 
   constructor(options: Partial<ReactNavigationV4InstrumentationOptions> = {}) {
     super();
@@ -150,6 +153,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
       this.onRouteWillChange(context);
 
+      this._pushRecentRouteKey(currentRoute.key);
       this._prevRoute = currentRoute;
     }
   }
@@ -169,6 +173,7 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
       data: {
         "routing.route.key": route.key,
         "routing.route.params": route.params,
+        "routing.route.hasBeenSeen": this._recentRouteKeys.includes(route.key),
       },
     };
   }
@@ -192,6 +197,17 @@ class ReactNavigationV4Instrumentation extends RoutingInstrumentation {
 
     return parentRoute as NavigationRouteV4;
   }
+
+  /** Pushes a recent route key, and removes earlier routes when there is greater than the max length */
+  private _pushRecentRouteKey = (key: string): void => {
+    this._recentRouteKeys.push(key);
+
+    if (this._recentRouteKeys.length > this._maxRecentRouteLen) {
+      this._recentRouteKeys = this._recentRouteKeys.slice(
+        this._recentRouteKeys.length - this._maxRecentRouteLen
+      );
+    }
+  };
 }
 
 export { ReactNavigationV4Instrumentation };
diff --git a/src/js/tracing/reactnavigationv5.ts b/src/js/tracing/reactnavigationv5.ts
index 6eb56bbac9..88e31c370f 100644
--- a/src/js/tracing/reactnavigationv5.ts
+++ b/src/js/tracing/reactnavigationv5.ts
@@ -44,9 +44,12 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
     current: null,
   };
 
+  private readonly _maxRecentRouteLen: number = 200;
+
   private _latestRoute?: NavigationRouteV5;
   private _latestTransaction?: TransactionType;
   private _stateChangeTimeout?: number | undefined;
+  private _recentRouteKeys: string[] = [];
 
   constructor(_options: Partial<ReactNavigationV5InstrumentationOptions> = {}) {
     super();
@@ -115,6 +118,12 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
         this._latestTransaction.setData("routing.route.key", route.key);
         this._latestTransaction.setData("routing.route.params", route.params);
 
+        const routeHasBeenSeen = this._recentRouteKeys.includes(route.key);
+        this._latestTransaction.setData(
+          "routing.route.hasBeenSeen",
+          routeHasBeenSeen
+        );
+
         const willSendTransaction =
           typeof this._options.shouldSendTransaction === "function"
             ? this._options.shouldSendTransaction(route, previousRoute)
@@ -132,10 +141,23 @@ export class ReactNavigationV5Instrumentation extends RoutingInstrumentation {
           );
         }
       }
+
+      this._pushRecentRouteKey(route.key);
       this._latestRoute = route;
     }
   }
 
+  /** Pushes a recent route key, and removes earlier routes when there is greater than the max length */
+  private _pushRecentRouteKey = (key: string): void => {
+    this._recentRouteKeys.push(key);
+
+    if (this._recentRouteKeys.length > this._maxRecentRouteLen) {
+      this._recentRouteKeys = this._recentRouteKeys.slice(
+        this._recentRouteKeys.length - this._maxRecentRouteLen
+      );
+    }
+  };
+
   /** Cancels the latest transaction so it does not get sent to Sentry. */
   private _discardLatestTransaction(): void {
     if (this._latestTransaction) {

From 386e82e0111bb4498488c8f5d25a2b7f692ffd68 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 18 Jan 2021 20:31:47 +0700
Subject: [PATCH 32/40] tests: Fix tests to include hasBeenSeen

---
 test/tracing/reactnavigationv4.test.ts |  3 +++
 test/tracing/reactnavigationv5.test.ts | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/test/tracing/reactnavigationv4.test.ts b/test/tracing/reactnavigationv4.test.ts
index 22f9b53b03..81c3dc79f4 100644
--- a/test/tracing/reactnavigationv4.test.ts
+++ b/test/tracing/reactnavigationv4.test.ts
@@ -101,6 +101,7 @@ describe("ReactNavigationV4Instrumentation", () => {
       data: {
         "routing.route.key": firstRoute.key,
         "routing.route.params": firstRoute.params,
+        "routing.route.hasBeenSeen": false,
       },
     });
   });
@@ -143,6 +144,7 @@ describe("ReactNavigationV4Instrumentation", () => {
       data: {
         "routing.route.key": action.key,
         "routing.route.params": action.params,
+        "routing.route.hasBeenSeen": false,
       },
     });
   });
@@ -193,6 +195,7 @@ describe("ReactNavigationV4Instrumentation", () => {
       data: {
         "routing.route.key": action.key,
         "routing.route.params": action.params,
+        "routing.route.hasBeenSeen": false,
       },
       sampled: false,
     });
diff --git a/test/tracing/reactnavigationv5.test.ts b/test/tracing/reactnavigationv5.test.ts
index bb52861b65..d3265d5102 100644
--- a/test/tracing/reactnavigationv5.test.ts
+++ b/test/tracing/reactnavigationv5.test.ts
@@ -59,6 +59,11 @@ describe("ReactNavigationV5Instrumentation", () => {
       "routing.route.params",
       undefined
     );
+    expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+      3,
+      "routing.route.hasBeenSeen",
+      false
+    );
   });
 
   test("transaction sent on navigation", async () => {
@@ -112,6 +117,11 @@ describe("ReactNavigationV5Instrumentation", () => {
           "routing.route.params",
           route.params
         );
+        expect(mockTransaction.setData).toHaveBeenNthCalledWith(
+          3,
+          "routing.route.hasBeenSeen",
+          false
+        );
         resolve();
       }, 50);
     });

From 17b13da4dbf9b91ae960c299bc3ed8d0dbae6da8 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 18 Jan 2021 20:48:57 +0700
Subject: [PATCH 33/40] meta: Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b07cd32001..f085a3bca4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - fix: Only set "event" type in envelope item and not the payload #1271
 - build: Bump JS dependencies to 5.30.0 #1282
 - fix: Add fallback envelope item type to iOS. #1283
+- feat: Auto performance tracing with XHR/fetch, and routing instrumentation #1230
 
 ## 2.1.0
 

From f396f6f02acacd11d01bf45b107e33df840c254d Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Mon, 18 Jan 2021 21:36:46 +0700
Subject: [PATCH 34/40] ref: Remove homescreen manual transaction test

---
 sample/src/screens/HomeScreen.tsx | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 9c508f7fa3..0e720819e0 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -35,30 +35,6 @@ interface Props {
 const HomeScreen = (props: Props) => {
   const currentDSN = Sentry.getCurrentHub().getClient().getOptions().dsn;
 
-  const navigation = useNavigation();
-
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
-      Sentry.configureScope((scope) => {
-        const activeTransaction = scope.getTransaction();
-
-        if (activeTransaction) {
-          const child = activeTransaction.startChild({
-            description: 'I am a child!',
-          });
-
-          setTimeout(() => {
-            child.finish();
-          }, 500);
-        }
-      });
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-
-  navigation;
-
   // Show bad code inside error boundary to trigger it.
   const [showBadCode, setShowBadCode] = React.useState(false);
 

From b0adc26e853765b871b88dd8a122fe17c36ccb45 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 12:26:40 +0700
Subject: [PATCH 35/40] fix: Update covid 19 api endpoint

---
 sample/src/screens/TrackerScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sample/src/screens/TrackerScreen.tsx b/sample/src/screens/TrackerScreen.tsx
index 7e276eef21..c3b470bbc6 100644
--- a/sample/src/screens/TrackerScreen.tsx
+++ b/sample/src/screens/TrackerScreen.tsx
@@ -23,7 +23,7 @@ const ManualTrackerScreen = () => {
   const loadData = () => {
     setCases(null);
 
-    fetch('https://api.covid19api.com/world/total', {
+    fetch('https://api.covid19api.com/summary', {
       method: 'GET',
       headers: {
         Accept: 'application/json',
@@ -32,7 +32,7 @@ const ManualTrackerScreen = () => {
     })
       .then((response) => response.json())
       .then((json) => {
-        setCases(json);
+        setCases(json.Global);
       });
   };
 

From e0f6b251dccb172bec5b9d8bdc5303e0bc72cc50 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 12:29:45 +0700
Subject: [PATCH 36/40] ref: Sample cleanup

---
 sample/src/components/Counter.tsx          | 2 +-
 sample/src/screens/EndToEndTestsScreen.tsx | 9 ++++++---
 sample/src/screens/HomeScreen.tsx          | 8 --------
 sample/src/screens/ManualTrackerScreen.tsx | 3 ---
 sample/src/screens/TrackerScreen.tsx       | 7 ++-----
 5 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/sample/src/components/Counter.tsx b/sample/src/components/Counter.tsx
index 970885db41..a30cef869d 100644
--- a/sample/src/components/Counter.tsx
+++ b/sample/src/components/Counter.tsx
@@ -7,7 +7,7 @@ const Counter = () => {
   const dispatch = useDispatch();
 
   return (
-    <View className="counter">
+    <View>
       <Text>Count:</Text>
       <Text>{counter}</Text>
       <TouchableOpacity
diff --git a/sample/src/screens/EndToEndTestsScreen.tsx b/sample/src/screens/EndToEndTestsScreen.tsx
index 2037319847..a1be477ba7 100644
--- a/sample/src/screens/EndToEndTestsScreen.tsx
+++ b/sample/src/screens/EndToEndTestsScreen.tsx
@@ -1,12 +1,15 @@
-// This screen is used solely for E2E tests and are not visible through the UI (no button to load it).
-import React, { useEffect } from 'react';
-import {ScrollView, Text, Platform} from 'react-native';
+import React from 'react';
+import {ScrollView, Text} from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
 
 import {getTestProps} from '../../utils/getTestProps';
 import {SENTRY_INTERNAL_DSN} from '../dsn';
 
+/**
+ * This screen is for internal end-to-end testing purposes only. Do not use.
+ * Not visible through the UI (no button to load it).
+ */
 const EndToEndTestsScreen = () => {
   const [eventId, setEventId] = React.useState(null);
 
diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 0e720819e0..8faac55968 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -1,11 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
-
 import React from 'react';
 import {
   Image,
diff --git a/sample/src/screens/ManualTrackerScreen.tsx b/sample/src/screens/ManualTrackerScreen.tsx
index a487c33aa0..b2c8ada5d8 100644
--- a/sample/src/screens/ManualTrackerScreen.tsx
+++ b/sample/src/screens/ManualTrackerScreen.tsx
@@ -2,9 +2,6 @@ import * as React from 'react';
 import {Button, View, StyleSheet, Text, ActivityIndicator} from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
-import {RouteProp} from '@react-navigation/native';
-
-import {ParamList} from '../types';
 
 /**
  * An example of how to add a Sentry Transaction to a React component manually.
diff --git a/sample/src/screens/TrackerScreen.tsx b/sample/src/screens/TrackerScreen.tsx
index c3b470bbc6..66e0984e13 100644
--- a/sample/src/screens/TrackerScreen.tsx
+++ b/sample/src/screens/TrackerScreen.tsx
@@ -2,9 +2,6 @@ import * as React from 'react';
 import {Button, View, StyleSheet, Text, ActivityIndicator} from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
-import {RouteProp} from '@react-navigation/native';
-
-import {ParamList} from '../types';
 
 /**
  * An example of how to add a Sentry Transaction to a React component manually.
@@ -13,7 +10,7 @@ import {ParamList} from '../types';
  * This screen calls an API to get the latest COVID-19 Data to display. We attach a span
  * to the fetch call and track the time it takes for Promise to resolve.
  */
-const ManualTrackerScreen = () => {
+const TrackerScreen = () => {
   const [cases, setCases] = React.useState<{
     TotalConfirmed: number;
     TotalDeaths: number;
@@ -73,7 +70,7 @@ const ManualTrackerScreen = () => {
   );
 };
 
-export default Sentry.withProfiler(ManualTrackerScreen);
+export default Sentry.withProfiler(TrackerScreen);
 
 const Statistic = (props: {
   title: string;

From c73c7d9407685a019a2660b44ebfa8ee2baf4cee Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 12:42:31 +0700
Subject: [PATCH 37/40] feat: Add redux example

---
 sample/src/App.tsx                 |  2 ++
 sample/src/reduxApp.ts             |  4 ++++
 sample/src/screens/HomeScreen.tsx  |  7 +++++++
 sample/src/screens/ReduxScreen.tsx | 20 ++++++++++++++++++++
 4 files changed, 33 insertions(+)
 create mode 100644 sample/src/screens/ReduxScreen.tsx

diff --git a/sample/src/App.tsx b/sample/src/App.tsx
index d59b02ff1f..2401604fb5 100644
--- a/sample/src/App.tsx
+++ b/sample/src/App.tsx
@@ -14,6 +14,7 @@ import TrackerScreen from './screens/TrackerScreen';
 import ManualTrackerScreen from './screens/ManualTrackerScreen';
 import PerformanceTimingScreen from './screens/PerformanceTimingScreen';
 import EndToEndTestsScreen from './screens/EndToEndTestsScreen';
+import ReduxScreen from './screens/ReduxScreen';
 
 import {store} from './reduxApp';
 import {version as packageVersion} from '../../package.json';
@@ -78,6 +79,7 @@ const App = () => {
             name="PerformanceTiming"
             component={PerformanceTimingScreen}
           />
+          <Stack.Screen name="Redux" component={ReduxScreen} />
           <Stack.Screen name="EndToEndTests" component={EndToEndTestsScreen} />
         </Stack.Navigator>
       </NavigationContainer>
diff --git a/sample/src/reduxApp.ts b/sample/src/reduxApp.ts
index d155a3e286..cc0fc7091b 100644
--- a/sample/src/reduxApp.ts
+++ b/sample/src/reduxApp.ts
@@ -22,6 +22,10 @@ const reducer = (state = initialState, action) => {
   }
 };
 
+/*
+  Example of how to use the Sentry redux enhancer packaged with @sentry/react:
+*/
+
 const sentryEnhancer = Sentry.createReduxEnhancer();
 
 const store = createStore(reducer, sentryEnhancer);
diff --git a/sample/src/screens/HomeScreen.tsx b/sample/src/screens/HomeScreen.tsx
index 8faac55968..f6a516816d 100644
--- a/sample/src/screens/HomeScreen.tsx
+++ b/sample/src/screens/HomeScreen.tsx
@@ -232,6 +232,13 @@ const HomeScreen = (props: Props) => {
               }}>
               <Text style={styles.buttonText}>Performance Timing</Text>
             </TouchableOpacity>
+            <View style={styles.spacer} />
+            <TouchableOpacity
+              onPress={() => {
+                props.navigation.navigate('Redux');
+              }}>
+              <Text style={styles.buttonText}>Redux Example</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </ScrollView>
diff --git a/sample/src/screens/ReduxScreen.tsx b/sample/src/screens/ReduxScreen.tsx
new file mode 100644
index 0000000000..d06309feac
--- /dev/null
+++ b/sample/src/screens/ReduxScreen.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {View, StyleSheet} from 'react-native';
+
+import Counter from '../components/Counter';
+
+const ReduxScreen = () => {
+  return (
+    <View style={styles.container}>
+      <Counter />
+    </View>
+  );
+};
+
+export default ReduxScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+});

From a45ff82288306c7b9a683eb4085d3838c19f1d61 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 12:43:05 +0700
Subject: [PATCH 38/40] fix: Update endpoint on manual tracing example

---
 sample/src/screens/ManualTrackerScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sample/src/screens/ManualTrackerScreen.tsx b/sample/src/screens/ManualTrackerScreen.tsx
index b2c8ada5d8..1bf89e9905 100644
--- a/sample/src/screens/ManualTrackerScreen.tsx
+++ b/sample/src/screens/ManualTrackerScreen.tsx
@@ -44,7 +44,7 @@ const TrackerScreen = () => {
       description: 'Fetch Covid19 data from API',
     });
 
-    fetch('https://api.covid19api.com/world/total', {
+    fetch('https://api.covid19api.com/summary', {
       method: 'GET',
       headers: {
         Accept: 'application/json',
@@ -53,7 +53,7 @@ const TrackerScreen = () => {
     })
       .then((response) => response.json())
       .then((json) => {
-        setCases(json);
+        setCases(json.Global);
 
         span?.setData('json', json);
         span?.finish();

From c2a9dafafbe35731bf5bf6dd8ef345825f8580e5 Mon Sep 17 00:00:00 2001
From: jennmueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 12:45:50 +0700
Subject: [PATCH 39/40] ref: Use navigation op on manual tracing screen

---
 sample/src/screens/ManualTrackerScreen.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sample/src/screens/ManualTrackerScreen.tsx b/sample/src/screens/ManualTrackerScreen.tsx
index 1bf89e9905..2096fccf76 100644
--- a/sample/src/screens/ManualTrackerScreen.tsx
+++ b/sample/src/screens/ManualTrackerScreen.tsx
@@ -23,6 +23,7 @@ const TrackerScreen = () => {
     // Initialize the transaction for the screen.
     transaction.current = Sentry.startTransaction({
       name: 'Tracker Screen',
+      op: 'navigation',
     });
 
     return () => {

From aa0786c6e06b62b3016ede83e3e720acb1895621 Mon Sep 17 00:00:00 2001
From: Jenn Mueng <ldrwarlock@gmail.com>
Date: Tue, 19 Jan 2021 18:16:43 +0700
Subject: [PATCH 40/40] ref: Cleanup from PR review

---
 src/js/tracing/reactnativetracing.ts |  4 ++--
 src/js/tracing/utils.ts              | 14 +++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts
index bca97c289e..41ab0605e4 100644
--- a/src/js/tracing/reactnativetracing.ts
+++ b/src/js/tracing/reactnativetracing.ts
@@ -14,7 +14,7 @@ import {
 import { logger } from "@sentry/utils";
 
 import { RoutingInstrumentationInstance } from "../tracing/routingInstrumentation";
-import { adjustTransactionDuration, secToMs } from "./utils";
+import { adjustTransactionDuration } from "./utils";
 
 export interface ReactNativeTracingOptions
   extends RequestInstrumentationOptions {
@@ -194,7 +194,7 @@ export class ReactNativeTracing implements Integration {
     idleTransaction.registerBeforeFinishCallback(
       (transaction, endTimestamp) => {
         adjustTransactionDuration(
-          secToMs(maxTransactionDuration),
+          maxTransactionDuration,
           transaction,
           endTimestamp
         );
diff --git a/src/js/tracing/utils.ts b/src/js/tracing/utils.ts
index 07952369b9..ebdd810688 100644
--- a/src/js/tracing/utils.ts
+++ b/src/js/tracing/utils.ts
@@ -1,18 +1,10 @@
 import { IdleTransaction, SpanStatus } from "@sentry/tracing";
 
-/**
- * Converts from milliseconds to seconds
- * @param time time in ms
- */
-export function msToSec(time: number): number {
-  return time / 1000;
-}
-
 /**
  * Converts from seconds to milliseconds
  * @param time time in seconds
  */
-export function secToMs(time: number): number {
+function secToMs(time: number): number {
   return time * 1000;
 }
 
@@ -20,13 +12,13 @@ export function secToMs(time: number): number {
  *
  */
 export function adjustTransactionDuration(
-  maxDuration: number,
+  maxDuration: number, // in seconds
   transaction: IdleTransaction,
   endTimestamp: number
 ): void {
   const diff = endTimestamp - transaction.startTimestamp;
   const isOutdatedTransaction =
-    endTimestamp && (diff > maxDuration || diff < 0);
+    endTimestamp && (diff > secToMs(maxDuration) || diff < 0);
   if (isOutdatedTransaction) {
     transaction.setStatus(SpanStatus.DeadlineExceeded);
     transaction.setTag("maxTransactionDurationExceeded", "true");