# React Component Names | Sentry for React Native

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:

```bash
View > Touchable > View > Text
```

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

```html
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.

## [Prerequisites](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#prerequisites)

* [Install](https://docs.sentry.io/platforms/react-native.md) 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.

## [Enable Component Name Capturing](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#enable-component-name-capturing)

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

`metro.config.js`

```javascript
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

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

## [How It Works](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#how-it-works)

The Sentry React Native Metro plugin applies [`@sentry/babel-plugin-component-annotate`](https://www.npmjs.com/package/@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`:

```javascript
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:

```html
<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.

## [Options](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#options)

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`

```javascript
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"],
  },
});
```

## [Troubleshooting](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#troubleshooting)

### [Missing Component Names](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#missing-component-names)

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.

## [Next Steps:](https://docs.sentry.io/platforms/react-native/integrations/component-names.md#next-steps)

* Lear more about Sentry's React Native [Metro bundler plugin](https://docs.sentry.io/platforms/react-native/manual-setup/metro.md).