More of new interfaces

Author: krystofwoldrich

docs/platforms/react-native/profiling/index.mdx

@@ -4,7 +4,6 @@ description: "Learn how to enable profiling in your app if it is not already set
 sidebar_order: 5000
 ---
 
-<PlatformContent includePath="profiling/index/preface" />
 <PlatformContent includePath="profiling/index/why-profiling" />
 
 ## Enable Tracing
@@ -14,6 +13,8 @@ Profiling depends on Sentry’s Tracing product being enabled beforehand. To ena
 ```javascript
 Sentry.init({
   dsn: "___DSN___",
+  // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing.
+  // We recommend adjusting this value in production.
   tracesSampleRate: 1.0,
 });
 ```
@@ -24,7 +25,7 @@ Check out the <PlatformLink to="/tracing/">tracing setup documentation</Platform
 
 <Note>
 
-Profiling for React Native is available in beta in SDK versions `5.8.0` and above.
+Profiling for React Native is available in SDK versions `5.32.0` and above.
 
 </Note>
 
@@ -33,11 +34,11 @@ To enable profiling, set the `profilesSampleRate`:
 ```javascript
 Sentry.init({
   dsn: "___DSN___",
+  // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing.
+  // We recommend adjusting this value in production.
   tracesSampleRate: 1.0,
-  _experiments: {
-    // profilesSampleRate is relative to tracesSampleRate.
-    // Here, we'll capture profiles for 100% of transactions.
-    profilesSampleRate: 1.0,
-  },
+  // profilesSampleRate is relative to tracesSampleRate.
+  // Here, we'll capture profiles for 100% of transactions.
+  profilesSampleRate: 1.0,
 });
 ```

docs/platforms/react-native/tracing/instrumentation/custom-navigation.mdx

@@ -4,64 +4,33 @@ description: "Learn how to use Sentry's Generic Navigation instrumentation."
 sidebar_order: 70
 ---
 
-Sentry's React Native SDK package ships with instrumentation for [React Navigation](/platforms/react-native/tracing/instrumentation/react-navigation/) and [React Native Navigation](/platforms/react-native/tracing/instrumentation/react-native-navigation/). This allows you to see the performance of your navigation transitions and the errors that occur during them.
+Sentry's React Native SDK package ships with instrumentation for [React Navigation](/platforms/react-native/tracing/instrumentation/react-navigation/) and [React Native Navigation](/platforms/react-native/tracing/instrumentation/react-native-navigation/) and [Expo Router](/platforms/react-native/tracing/instrumentation/expo-router/). This allows you to see the performance of your navigation transitions and the errors that occur during them.
 
-If you use a navigation library that we don't yet support, or have a custom routing solution, you can use the basic `RoutingInstrumentation`. This page will guide you through setting it up and configuring it to your needs.
+If you use a navigation library that we don't yet support, or have a custom routing solution, you can use `startIdleNavigationSpan` function to implement your own navigation integration. This page will guide you through setting it up and configuring it to your needs.
 
-## Bare Bones
+```javascript {filename: customNavigationIntegration.js}
+import Sentry from '@sentry/react-native';
 
-Every routing instrumentation revolves around one method:
-
-`onRouteWillChange` (context: TransactionContext): Transaction | undefined
-
-You need to ensure that this method is called **before** the route change occurs, and an `IdleTransaction` is created and set on the scope.
+const customNavigationIntegration = ({navigator}) => {
+  navigator.registerRouteChangeListener((newRoute) => {
+    Sentry.startIdleNavigationSpan({
+      name: newRoute.name,
+      op: 'navigation'
+    })
+  });
 
-```javascript
-// Construct a new instrumentation instance. This is needed to communicate between the integration and React
-const routingInstrumentation = new Sentry.RoutingInstrumentation();
+  return {
+    name: "CustomNavigation",
+  };
+};
 
 Sentry.init({
-  ...
-  integrations: [
-    new Sentry.ReactNativeTracing({
-      // Pass instrumentation to be used as `routingInstrumentation`
-      routingInstrumentation,
-      ...
-    }),
-  ],
-})
-
-const App = () => {
-  <SomeNavigationLibrary
-    onRouteWillChange={(newRoute) => {
-        // Call this before the route changes
-      routingInstrumentation.onRouteWillChange({
-        name: newRoute.name,
-        op: 'navigation'
-      })
-    }}
-  />
-};
+  dsn: '___PUBLIC_DSN___',
+  // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing.
+  // We recommend adjusting this value in production.
+  tracesSampleRate: 1.0,
+  integrations: [customNavigationIntegration({navigator})],
+});
 ```
 
-## Custom Instrumentation
-
-To create a custom routing instrumentation, look at how the `RoutingInstrumentation` class [is implemented](https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/routingInstrumentation.ts). If you need an example of how to implement routing instrumentation, review the code of the existing official instrumentation such as [the one for React Navigation V4](https://github.com/getsentry/sentry-react-native/blob/211ec081b6bf8d7d29541afe9d800040f61e3c4e/src/js/tracing/reactnavigationv4.ts)
-
-```javascript
-class CustomInstrumentation extends RoutingInstrumentation {
-  constructor(navigator) {
-    super();
-
-    this.navigator.registerRouteChangeListener(this.routeListener.bind(this));
-  }
-
-  routeListener(newRoute) {
-    // Again, ensure this is called BEFORE the route changes and BEFORE the route is mounted.
-    this.onRouteWillChange({
-      name: newRoute.name,
-      op: "navigation",
-    });
-  }
-}
-```
+To lear more about the `Integration` lifecycle, see the [Integration API](/platforms/react-native/integrations/custom/).

docs/platforms/react-native/tracing/instrumentation/expo-router.mdx

@@ -10,32 +10,30 @@ Sentry's React Native SDK package ships with instrumentation for Expo Router. Th
 
 The code snippet below shows how to initialize the instrumentation.
 
-```javascript { filename: 'app/_layout.tsx' }
+```javascript {6-8, 15-16, 20-25} {filename: app/_layout.tsx}
 import React from 'react';
 import { Slot, useNavigationContainerRef } from 'expo-router';
-import Constants from 'expo-constants';
+import Constants, { ExecutionEnvironment.StoreClient } from 'expo-constants';
 import * as Sentry from '@sentry/react-native';
 
-const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
-  enableTimeToInitialDisplay: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
+const navigationIntegration = Sentry.reactNavigationintegration({
+  enableTimeToInitialDisplay: Constants.executionEnvironment === ExecutionEnvironment.StoreClient, // Only in native builds, not in Expo Go.
 });
 
 Sentry.init({
   dsn: '___PUBLIC_DSN___',
-  integrations: [
-    new Sentry.ReactNativeTracing({
-      routingInstrumentation,
-      enableNativeFramesTracking: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
-    }),
-  ],
+  // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing.
+  // We recommend adjusting this value in production.
+  tracesSampleRate: 1.0,
+  integrations: [navigationIntegration],
+  enableNativeFramesTracking: Constants.executionEnvironment === ExecutionEnvironment.StoreClient, // Only in native builds, not in Expo Go.
 });
 
 function RootLayout() {
   const ref = useNavigationContainerRef();
-
   React.useEffect(() => {
     if (ref) {
-      routingInstrumentation.registerNavigationContainer(ref);
+      navigation.registerNavigationContainer(ref);
     }
   }, [ref]);
 
@@ -50,19 +48,24 @@ export default Sentry.wrap(RootLayout);
 You can configure the instrumentation by passing an options object to the constructor:
 
 ```javascript
-new Sentry.ReactNavigationInstrumentation({
+Sentry.reactNavigationintegration({
   enableTimeToInitialDisplay: true, // default: false
   routeChangeTimeoutMs: 1000, // default: 1000
+  ignoreEmptyBackNavigationTransactions: true, // default: true
 });
 ```
 
 ### routeChangeTimeoutMs
 
-This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.
+This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is `1_000`.
 
 ### enableTimeToInitialDisplay
 
-This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](/platforms/react-native/tracing/instrumentation/time-to-display).
+This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](/platforms/react-native/tracing/instrumentation/time-to-display). The default value is `false`.
+
+### ignoreEmptyBackNavigationTransactions
+
+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. The default value is `true`.
 
 ## Notes
 

docs/platforms/react-native/tracing/instrumentation/react-native-navigation.mdx

@@ -10,19 +10,15 @@ Sentry's React Native SDK package ships with instrumentation for [React Native N
 
 You will need to pass the `Navigation` object imported from the library to initialize our routing instrumentation. It is recommended that you initialize our SDK and the routing instrumentation as early as possible in the lifecycle of your app; this would most likely be before the point where you initialize your screens.
 
-```javascript {filename: index.js}
+```javascript {7-9} {filename: index.js}
 import * as Sentry from "@sentry/react-native";
 import { Navigation } from 'react-native-navigation';
 
 Sentry.init({
-  ...
+  dsn: "___PUBLIC_DSN___",
   integrations: [
-    new Sentry.ReactNativeTracing({
-      // Pass instrumentation to be used as `routingInstrumentation`
-      routingInstrumentation: new Sentry.ReactNativeNavigationInstrumentation(
-        Navigation,
-      )
-      // ...
+    Sentry.reactNativeNavigationIntegration({
+      navigation: Navigation,
     }),
   ],
 })
@@ -33,11 +29,26 @@ Sentry.init({
 You can configure the instrumentation by passing an options object to the constructor:
 
 ```javascript
-new Sentry.ReactNativeNavigationInstrumentation({
-  routeChangeTimeoutMs: 1000, // default: 1000
+Sentry.reactNativeNavigationIntegration({
+  navigation: Navigation, // Navigation from `react-native-navigation`
+  routeChangeTimeoutMs: 1_000, // default: 1_000
+  enableTabsInstrumentation: true, // default: false
+  ignoreEmptyBackNavigationTransactions: true, // default: true
 });
 ```
 
+### navigation
+
+This option is required and should be the `Navigation` object imported from the navigation library.
+
 ### routeChangeTimeoutMs
 
-This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.
+This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is `1_000`.
+
+### enableTabsInstrumentation
+
+Instrumentation will create a transaction on tab change. By default only navigation commands create transactions. The default value is `false`.
+
+### ignoreEmptyBackNavigationTransactions
+
+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. The default value is `true`.

docs/platforms/react-native/tracing/instrumentation/react-navigation.mdx

@@ -17,23 +17,28 @@ The code snippet below shows how to initialize the instrumentation.
 You can configure the instrumentation by passing an options object to the constructor:
 
 ```javascript
-new Sentry.ReactNavigationInstrumentation({
+Sentry.reactNavigationintegration({
   enableTimeToInitialDisplay: true, // default: false
-  routeChangeTimeoutMs: 1000, // default: 1000
+  routeChangeTimeoutMs: 1_000, // default: 1_000
+  ignoreEmptyBackNavigationTransactions: true, // default: true
 });
 ```
 
 ### routeChangeTimeoutMs
 
-This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.
+This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is `1_000`.
 
 ### enableTimeToInitialDisplay
 
-This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](/platforms/react-native/tracing/instrumentation/time-to-display).
+This option will enable automatic measuring of the time to initial display for each route. To learn more see [Time to Initial Display](/platforms/react-native/tracing/instrumentation/time-to-display). The default value is `false`.
+
+### ignoreEmptyBackNavigationTransactions
+
+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. The default value is `true`.
 
 ## Notes
 
-- This instrumentation supports React Navigation version 5 and above. If you use React Navigation version 4, see the [instrumentation for React Navigation V4](/platforms/react-native/tracing/instrumentation/react-navigation-v4/).
+- This instrumentation supports React Navigation version 5 and above. Starting the SDK version 6 React Navigation 4 is not supported, please upgrade.
 
 - The instrumentation creates a transaction on every route change including `goBack` navigations.
 

docs/platforms/react-native/tracing/instrumentation/time-to-display.mdx

@@ -30,7 +30,7 @@ To automatically measure Time to Initial Display of React Navigation Screens, en
 
 When the automatically captured Time to Initial Display doesn't meet your requirements, you can overwrite it by using `Sentry.TimeToInitialDisplay` component.
 
-```jsx {tabTitle: <TimeToInitialDisplay />}
+```jsx {8} {tabTitle: <TimeToInitialDisplay />}
 import * as Sentry from "@sentry/react-native";
 import * as React from "react";
 import { View } from "react-native";
@@ -48,7 +48,7 @@ function MyComponent() {
 
 To measure the time when a screen is fully displayed, you can use the `Sentry.TimeToFullDisplay` component.
 
-```jsx {tabTitle: <TimeToFullDisplay />}
+```jsx {17} {tabTitle: <TimeToFullDisplay />}
 import * as Sentry from "@sentry/react-native";
 import { useState, useEffect } from "react";
 import { View, Text } from "react-native";

docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx

@@ -20,18 +20,16 @@ Transaction names are composed from a combination of displayed screen names, (fo
 
 UI instrumentation tracing is disabled by default, but you can enable it by setting the `enableUserInteractionTracing` options to `true` and wrapping your root component:
 
-```javascript
+```javascript {3-3, 7-9}
 import * as Sentry from "@sentry/react-native";
 
+const navigationIntegration = Sentry.reactNavigationIntegration(); // Or any other navigation integration
+
 Sentry.init({
-  // ...
-  integrations: [
-    new Sentry.ReactNativeTracing({
-      enableUserInteractionTracing: true,
-      routingInstrumentation,
-      // ...
-    }),
-  ],
+  dsn: "___PUBLIC_DSN___",
+  enableUserInteractionTracing: true,
+  tracesSampleRate: 1.0,
+  integrations: [navigationIntegration],
 });
 
 const App = () => <View>Your App</View>;
@@ -41,7 +39,7 @@ export default Sentry.wrap(App);
 
 The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, `sentry-label` will be used instead. If an element can't be identified, the transaction won't be captured.
 
-```javascript
+```javascript {2-2}
 export default Sentry.wrap(App, {
   touchEventBoundaryProps: { labelName: "my-label" },
 });
@@ -62,7 +60,7 @@ To create UI transactions from React Native Gesture Handler, you need to wrap in
   Only [RNGH API v2](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture/) is supported.
 </Note>
 
-```javascript
+```javascript {10-11}
 import React from "react";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { sentryTraceGesture } from "@sentry/react-native";