feat: Auto performance tracing with XHR/fetch, and routing instrumentation

[jennmueng]

📢 Type of change

• Bugfix
• New feature
• Enhancement
• Refactoring

📜 Description

Note: Needs getsentry/sentry-javascript#3144 to be released over in js before this can be merged.

See App.tsx in the sample as an example of how to initialize auto performance tracing.

Routing

The routing Instrumentation has to be different than how it's currently implemented for browser given how routing in React Native is handled different and is not global. We would need to create an instance where a route event can be emitted by a navigation router and be listened to by our integration.

Base/Manual Routing Instrumentation

"Manual-Auto"

Create an instance of RoutingInstrumentation, pass it to the tracing integration, and then call onRouteWillChange every time the route changes with the desired transaction context. This sets an idle transaction on the scope.

// 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 = () => {
  // Call this before the route changes
  routingInstrumentation.onRouteWillChange(transactionContext)
};

React Navigation V5 Instrumentation

Below is an example of how to use the current implementation:

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

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

const App = () => {
  // Create a ref for the navigation container
  const navigation = React.createRef<NavigationContainerRef>();

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

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

Preferably, all the react component part can just be done in a custom hook

React Navigation V4 Instrumentation

Works almost exactly like V5 on the surface, although entirely different underneath.

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

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

const App = () => {
  // Create a ref for the navigation container
  const appContainer = React.createRef();

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

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

Idle Transaction

The idle transaction is carried over from the browser implementation of tracing. It needs to be exposed upstream from @sentry/tracing. An idle transaction should be started and set on the scope every time a route changes using a routing instrumentation.

Fetch/XHR

Fetch/XHR instrumentation is carried over from the browser implementation, and it also needs to be exposed.

React Profiler

Works out of the box.

https://sentry.io/organizations/sentry-sdks/discover/sentry-react-native:157803b6f5b94f91b5da33014911f181/?field=title&field=event.type&field=project&field=user.display&field=timestamp&name=All+Events&query=&sort=-timestamp&statsPeriod=24h&widths=-1&widths=-1&widths=-1&widths=-1&widths=-1

Need to expose from @sentry/tracing

Some things need to be exposed upstream from @sentry/tracing:

IdleTransaction,
startIdleTransaction,
registerRequestInstrumentation,
RequestInstrumentationOptions,
defaultRequestInstrumentationOptions,

Remaining things to do/investigate

• Manual Routing Instrumentation
• React Navigation V5
• React Navigation V4
• Fetch/XHR request instrumentation
• Test Everything on iOS Sim
• Test Everything on Android Sim
• Clean up code and comment

💚 How did you test it?

Tested locally on iOS simulator with new sample app.

📝 Checklist

• I reviewed submitted code
• I added tests to verify changes
• All tests passing
• No breaking changes

🔮 Next steps

[giautm]

Hi @jennmueng, do you need any help to finish this PR? I'm also awaiting it's go live

[jennmueng]

Hi @jennmueng, do you need any help to finish this PR? I'm so awaiting it's go live

Nothing that would need help, just need time to finish everything and test everything

[jennmueng]

Updated the v5 instrumentation to handle cases where a router with action types other than the default stack ones is used. It now creates an idle transaction on every successful navigation action dispatch, but it does not include route context just yet. It will wait for the navigation state to change, and then update the transaction with the route context. If the state change doesn't happen within 200ms, the transaction is then discarded.

It provides the option of setting a shouldAttachTransaction method that would be called after each state change to determine whether to discard this transaction or keep it. By default it sets a transaction on every new route that isn't a repeat of the last route.

[jennmueng]

Update: Working perfectly and ready for iOS, however I've run into an issue on Android where the current SDK (3.2.0) does not fully support transaction types. Currently going to try a workaround.

[jennmueng]

Temporary Hack to use the js FetchTransport to send transactions on Android for now. This will not be GA and instead just for an alpha. We will need to wait for transactions on FileObserver envelope support on Android

[jennmueng]

Now with instrumentation for React-Navigation V4. It one works differently than the V5 one on the inside, although extremely similar on the outside. This time we patch the router on the AppContainer.

[jennmueng]

Blocked by getsentry/sentry-javascript#3144 over in JS as everyone there is out of office.

[bruno-garcia]

Maybe worth resolving conflict with master so it's ready to merge

[jennmueng]

Maybe worth resolving conflict with master so it's ready to merge

Sure, but it would also need a bump to the @sentry/javascript dependencies too before we can merge it btw.

[github-actions]

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Generated by 🚫 dangerJS against aa0786c

[jennmueng]

Just a note: The CI is failing due to things from @sentry/tracing not being exported yet. Need to wait for a new release over at JS before these will pass.

[janicduplessis]

Probably out of scope for this PR, but are there plans to look into also instrumenting the native side? I'm pretty sure RN has hooks for this. This way it would be possible to visualize the full rendering, including react js render, RN bridging, layout and native render.

[bruno-garcia]

Probably out of scope for this PR, but are there plans to look into also instrumenting the native side? I'm pretty sure RN has hooks for this. This way it would be possible to visualize the full rendering, including react js render, RN bridging, layout and native render.

I dunno if @jennmueng already looked at it, but could you point us to the hooks we can use for that?

We're adding performance API to the native layers next, but we don't have a story for propagating transaction through the bridge yet.

I'm hoping that at least a span for the bridge call will be possible even without any support from the native SDKs.

[jennmueng]

@janicduplessis Yes we're definitely looking into instrumenting React Native way more in the near future. We would really appreciate if you know any of these hooks that you mentioned to see if we can instrument something there.

[janicduplessis]

On Android there's this gist that shows how to use the ReactMarker API https://gist.github.com/axemclion/f01cbb32fcb5b14bf6b4fd4594192825#file-perflogger-java, which should have some interesting info. Not sure about what is available on iOS. Are you on RN contributor discord? There are probably people there that can help too.

[bruno-garcia]

@janicduplessis Thanks for the link! Not sure about @jennmueng, I'm not on that discord but I'm on the #react-native channel of Sentry's Discord server, would you like to join and we discuss this there?

[jennmueng]

Notes: Can use tracesSampler instead of the shouldSendTransaction.

If the app crashes on iOS the transaction might not be stored as it does not have a level = fatal

-> What happens on an errored promise in fetch/xhr if there is a span