User Interaction Instrumentation
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:
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.
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.
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>;
};
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").
- Package:
- npm:@sentry/react-native
- Version:
- 5.22.0
- Repository:
- https://github.com/getsentry/sentry-react-native