diff --git a/docs/platforms/react-native/integrations/component-names.mdx b/docs/platforms/react-native/integrations/component-names.mdx index 3979e0dde935cb..b95989e867e824 100644 --- a/docs/platforms/react-native/integrations/component-names.mdx +++ b/docs/platforms/react-native/integrations/component-names.mdx @@ -71,6 +71,15 @@ Here's what the resulting node would look like if your bundler had applied the p The Sentry browser SDK will pick off the value from these `data` attributes and collect them when your components are interacted with. +## Troubleshooting + +### 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. +4. 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: - Lear more about Sentry's React Native [Metro bundler plugin](/platforms/react-native/manual-setup/metro/).