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:

Copied
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:

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

const App = () => {
  return <RestOfTheApp />;
};

export default AppRegistry.registerComponent("Your Amazing App", () =>
  Sentry.withTouchEventBoundary(App)
);

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 setting the displayName property for them. If Sentry detects a component with a displayName within a touch's component tree, it will be logged on the dashboard as having occurred in that component.

Copied
class YourCoolComponent extends React.Component {
  static displayName = "CoolComponent";
  render() {
    return <View>{/* ... */}</View>;
  }
}

or

Copied
const YourCoolComponent = props => {
  return <View>{/* ... */}</View>;
};

YourCoolComponent.displayName = "CoolComponent";

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).

Copied
<Sentry.TouchEventBoundary
  ignoreNames={["BadComponent", /^Connect\(/, /^LibraryComponent$/]}
>
  <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. (New in version 1.7.0) 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.

Production Bundles

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. A way to work with this is to set the displayName on all the components you want to track. However, you can also configure Metro bundler to not minify function names by setting these options in metro.config.js:

Copied
module.exports = {
  transformer: {
    minifierConfig: {
      keep_classnames: true, // Preserve class names
      keep_fnames: true, // Preserve function names
      mangle: {
        keep_classnames: true, // Preserve class names
        keep_fnames: true, // Preserve function names
      },
    },
  },
};
Help improve this content
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").