Problem Statement
The @sentry/babel-plugin-component-annotate supports a textComponentNames option that tells autoInjectSentryLabel which components contain text (defaults to ["Text"]). Many larger React Native apps use custom text wrapper components (e.g. MyText, StyledText, Typography) that wrap the built-in Text. These custom components are not recognized by the Babel plugin, so their text content is not used for sentry-label injection.
Solution
Surface the textComponentNames option through the Metro config's annotateReactComponents option, alongside the existing ignoredComponents and autoInjectSentryLabel options:
module.exports = withSentryConfig(config, {
annotateReactComponents: {
textComponentNames: ['Text', 'MyText', 'Typography'],
},
});This would pass the option through to the Babel plugin via SentryBabelTransformerOptions.
Context
Part of the "Making breadcrumbs data more useful" project. The autoInjectSentryLabel feature was enabled by default in #6141.
Problem Statement
The
@sentry/babel-plugin-component-annotatesupports atextComponentNamesoption that tellsautoInjectSentryLabelwhich components contain text (defaults to["Text"]). Many larger React Native apps use custom text wrapper components (e.g.MyText,StyledText,Typography) that wrap the built-inText. These custom components are not recognized by the Babel plugin, so their text content is not used forsentry-labelinjection.Solution
Surface the
textComponentNamesoption through the Metro config'sannotateReactComponentsoption, alongside the existingignoredComponentsandautoInjectSentryLabeloptions:This would pass the option through to the Babel plugin via
SentryBabelTransformerOptions.Context
Part of the "Making breadcrumbs data more useful" project. The
autoInjectSentryLabelfeature was enabled by default in #6141.