React Component Names

Learn how Sentry's React Native SDK allows you to monitor your components.

You can set up Sentry's React Native SDK to use React component names instead of element names. So instead of looking at generic names like this:

Copied
View > Touchable > View > Text

You can see exactly which React component was used, as in the example below:

Copied
MyCard (View, MyCard.ts) > MyButton (Touchable, MyCard.ts) > View > Text

Once you've enabled capturing, you'll be able to see the specific name of the component that was interacted with in breadcrumbs and spans. This removes the ambiguity of having to guess by looking at a generic name, which becomes more difficult the larger your application is.

We're working to release more features that will leverage component name capturing in the future and highly recommended that you configure your project to use it.

  • Install React Native SDK 5.25.0-alpha.3 or newer.
  • Ensure the React components you want to capture are in .jsx or .tsx file formats.

Add the @sentry/react-native/metro plugin to your Metro configuration and enable the annotateReactComponents option:

metro.config.js
Copied
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

const config = getDefaultConfig(__dirname);
module.exports = withSentryConfig(config, {
  annotateReactComponents: true,
});

The Sentry React Native Metro plugin applies @sentry/babel-plugin-component-annotate, which parses your application's JSX source code at build time and adds additional data attributes to it. These attributes then appear on the nodes of your application's build, indicating the React component name and file that each node is sourced from.

Here's an example of a component named MyAwesomeComponent in the file myAwesomeComponent.jsx:

Copied
function MyAwesomeComponent() {
  return <Text>This is a really cool and awesome component!</Text>;
}

Here's what the resulting node would look like if your bundler had applied the plugin and built your project:

Copied
<Text
  data-sentry-component="MyAwesomeComponent"
  data-sentry-source-file="myAwesomeComponent.jsx"
>
  This is a really cool and awesome component!
</Text>

The Sentry browser SDK will pick off the value from these data attributes and collect them when your components are interacted with.

When component name capturing is enabled, the Babel plugin also automatically injects sentry-label props derived from static text content in your JSX. This provides meaningful labels for touch event breadcrumbs without any manual annotation.

For example, this component:

Copied
function SaveButton() {
  return (
    <Pressable>
      <Text>Save workout</Text>
    </Pressable>
  );
}

will have sentry-label="Save workout" added to Pressable at build time. The injection only uses static string children, caps the label at 64 characters, and skips components that already have an explicit sentry-label prop.

By default, only React Native's Text component is recognized as a text source. If your app uses custom text wrapper components, use the textComponentNames option:

metro.config.js
Copied
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

const config = getDefaultConfig(__dirname);
module.exports = withSentryConfig(config, {
  annotateReactComponents: {
    textComponentNames: ["Text", "MyText", "Typography"],
  },
});

To disable automatic label injection while keeping component name annotations:

metro.config.js
Copied
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

const config = getDefaultConfig(__dirname);
module.exports = withSentryConfig(config, {
  annotateReactComponents: { autoInjectSentryLabel: false },
});

By default only components located in your project (outside of node_modules) are annotated. To avoid annotating other components, use the ignoredComponents option. The ignored components won't have data-sentry-* annotations added.

metro.config.js
Copied
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

const config = getDefaultConfig(__dirname);
module.exports = withSentryConfig(config, {
  annotateReactComponents: {
    ignoredComponents: ["MyCustomComponent"],
  },
});

If component names are missing from reported events, it could be because the annotations we not added to the JS bundle. To troubleshoot this:

  1. Check to see if the JS bundle generated by Metro has annotations by text searching for the data-sentry-component key in the bundle.
  2. If annotations are missing and you are using React Native without frameworks, check that config.transformer.babelTransformerPath is set before passing it to withSentryConfig(config). If you are Expo user using const config = getSentryExpoConfig(__dirname) make sure the config.transformer.babelTransformerPath set by the getSentryExpoConfig is not overwritten.
  3. Use export SENTRY_LOG_LEVEL=debug to enable debug logs to verify that Sentry detected the default transformer and that the Sentry Babel Transformer was executed.

Previous
Component Tracking
Next
React Error Boundary
Was this helpful?
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").