Tracking Touch Events
Use version 1.5.0
or later to track touch events with Sentry's React Native SDK. You will also need to wrap your app with a TouchEventBoundary
.
Wrapping with TouchEventBoundary
At the root of your app, usually App.js
, wrap the app component with Sentry.TouchEventBoundary
:
import * as Sentry from "@sentry/react-native";
const App = () => {
return (
<Sentry.TouchEventBoundary>
<RestOfTheApp />
</Sentry.TouchEventBoundary>
);
};
export default AppRegistry.registerComponent("Your Amazing App", () => App);
Using the withTouchEventBoundary
Higher-Order Component
At the root of your app, usually App.js
, wrap the app component with Sentry.withTouchEventBoundary
:
import * as Sentry from "@sentry/react-native";
const App = () => {
return <RestOfTheApp />;
};
export default AppRegistry.registerComponent("Your Amazing App", () =>
Sentry.withTouchEventBoundary(App)
);
Multiple Boundaries
While you can track specific sections of your app by wrapping each section with the boundary, do not nest them or the touches could be tracked multiple times along with possible undefined behavior.
Automatic Touch Tracking
Each touch event is automatically logged as a breadcrumb and displays on the dashboard when an event occurs along with the component tree in which the touch event occurred. This component tree is logged using the name
property of a component. By default, React Native will set this property automatically on components.
Tracking Specific Components
You can let Sentry know which components to track specifically by passing the sentry-label
prop to them. If Sentry detects a component with a sentry-label
within a touch's component tree, it will be logged on the dashboard as having occurred in that component. If Sentry cannot find a component with the label, Sentry will fall back to the labelName
prop if specified, or else use displayName
.
const YourCoolComponent = (props) => {
return (
<View sentry-label="CardContainer">
<Text sentry-label="CoolText">You are cool</Text>
</View>
);
};
You don't have to worry about Typescript errors when passing the sentry-label
prop. Typescript will not throw an error on props with the '-' character.
Options
You can pass specific options to configure the boundary either as props to the Sentry.TouchEventBoundary
component or as the second argument to the Sentry.withTouchEventBoundary
higher-order component (HOC).
<Sentry.TouchEventBoundary
ignoreNames={["BadComponent", /^Connect\(/, /^LibraryComponent$/]}
labelName="testLabel"
>
<RestOfTheApp />
</Sentry.TouchEventBoundary>
breadcrumbCategory
- String. The category assigned to the breadcrumb that is logged by the touch event.
breadcrumbType
- String. The type assigned to the breadcrumb that is logged by the touch event.
maxComponentTreeSize
- number, default: 20. The max number/depth of components to display when logging a touch's component tree.
ignoreNames
- Array<string | RegExp>, Accepts strings and regular expressions. Component names to ignore when logging the touch event. This prevents unhelpful logs such as "Touch event within element: View" where you still can't tell which
View
it occurred in.
labelName
- String. The name of the prop to look for when determining the label of a component. If the prop is not found, Sentry will fall back to the
displayName
of the component.
Minified Names in Production
When bundling for production, React Native will minify class and function names to reduce the bundle size. This means that you won't get the full original component names in your touch event breadcrumbs and instead you will see minified names. Check out our troubleshooting guide for minified production bundles documentation to solve this.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/react-native
- Version:
- 5.15.0
- Repository:
- https://github.com/getsentry/sentry-react-native