User Interaction Instrumentation

Learn what kinds of user interactions can be captured

The UI instrumentation captures transactions and adds breadcrumbs for touch interactions. Gesture support using React Native Gesture Handler, is also available with the sentryTraceGesture wrapper.

Transaction names are composed from a combination of displayed screen names, (for example, LoginScreen), and the labels of the element users interacted with, (for example, login_button).

To capture UI transactions, you have to first set up routing instrumentation.

UI instrumentation tracing is disabled by default, but you can enable it by setting the enableUserInteractionTracing options to true and wrapping your root component:

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

Sentry.init({
  // ...
  integrations: [
    new Sentry.ReactNativeTracing({
      enableUserInteractionTracing: true,
      routingInstrumentation,
      // ...
    }),
  ],
});

const App = () => <View>Your App</View>;

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.

Copied
export default Sentry.wrap(App, {
  touchEventBoundaryProps: { labelName: "my-label" },
});

If the UI transaction idled, but didn't have any child spans, it'll be dropped.

Because transactions are automatically bound to scope, you can create child spans using custom instrumentation. Note, that the idleTimeoout for running UI transactions defaults to 1000 milliseconds (one second).

To create UI transactions from React Native Gesture Handler, you need to wrap individual gestures using sentryTraceGesture. This will also automatically create breadcrumbs. The wrapper sentryTraceGesture(label, gesture) accepts string labels that uniquely identify the gesture in a screen as well as the gesture object being wrapped.

Only RNGH API v2 is supported.

Copied
import React from "react";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { sentryTraceGesture } from "@sentry/react-native";

export const GesturesTracingScreen = () => {
  const pinch = Gesture.Pinch();
  const longPress = Gesture.LongPress();

  const gesture = Gesture.Race(
    sentryTraceGesture("pinch-to-zoom", pinch),
    sentryTraceGesture("long-press-to-cancel", longPress),
  );

  return <GestureDetector gesture={gesture}>// ...</GestureDetector>;
};
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").