Included Instrumentation

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Sentry.ReactNativeTracing({
      routingInstrumentation,
      beforeNavigate: context => {
        // Decide to not send a transaction by setting sampled = false
        if (context.data.route.name === "Do Not Send") {
          context.sampled = false;
        }

        // Modify the transaction context
        context.name = context.name.toUpperCase();
        context.tags = {
          ...context.tags,
          customTag: "value",
        };

        return context;
      },
    }),
  ],
});

type ReactNavigationTransactionContext = {
  // ...
  data: {
    route: {
      name: string;
      key: string;
      params: {
        [key: string]: any;
      };
      /** Will be true if this is not the first time this screen with this key has been seen before. */
      hasBeenSeen: boolean;
    };
    previousRoute: {
      name: string;
      key: string;
      params: {
        [key: string]: any;
      };
    } | null;
  };
};

import * as Sentry from "@sentry/react-native";

// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.ReactNavigationV5Instrumentation();

Sentry.init({
  ...
  integrations: [
    new Sentry.ReactNativeTracing({
      // Pass instrumentation to be used as `routingInstrumentation`
      routingInstrumentation,
      // ...
    }),
  ],
})

// Functional Component Example
const App = () => {
  // Create a ref for the navigation container
  const navigation = React.useRef();

  return (
    // Connect the ref to the navigation container
    <NavigationContainer
      ref={navigation}
      onReady={() => {
        // Register the navigation container with the instrumentation
        routingInstrumentation.registerNavigationContainer(navigation);
      }}>
      ...
    </NavigationContainer>
  );
};

// Class Component Example
class App extends React.Component {
  // Create a ref for the navigation container
  navigation = React.createRef();

  render() {
    return (
      // Connect the ref to the navigation container
      <NavigationContainer
        ref={this.navigation}
        onReady={() => {
          // Register the navigation container with the instrumentation
          routingInstrumentation.registerNavigationContainer(navigation);
        }}>
        ...
      </NavigationContainer>
    )
  }
}

new Sentry.ReactNavigationV5Instrumentation({ ... });

// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.ReactNavigationV4Instrumentation();

Sentry.init({
  ...
  integrations: [
    new Sentry.ReactNativeTracing({
      // Pass instrumentation to be used as `routingInstrumentation`
      routingInstrumentation,
      ...
    }),
  ],
})

// Functional Component Example
const App = () => {
  // Create a ref for the navigation container
  const appContainer = React.useRef();

  // Register the navigation container with the instrumentation
  React.useEffect(() => {
    routingInstrumentation.registerAppContainer(appContainer);
  }, []);

  return (
    // Connect the ref to the navigation container
    <AppContainer ref={appContainer} />
  );
};

// Class Component Example
class App extends React.Component {
  // Create a ref for the navigation container
  appContainer = React.createRef();

  componentDidMount() {
    // Register the navigation container with the instrumentation
    routingInstrumentation.registerAppContainer(this.appContainer);
  }

  render() {
    return (
      // Connect the ref to the navigation container
      <AppContainer ref={this.appContainer} />
    )
  }
}

new Sentry.ReactNavigationV4Instrumentation({ ... });

// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.RoutingInstrumentation();

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'
      })
    }}
  />
};

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",
    });
  }
}

import * as Sentry from "@sentry/react-native";

// withProfiler HOC
const SomeComponent = () => {
  // ...
};

export default Sentry.withProfiler(SomeComponent);