diff --git a/CHANGELOG.md b/CHANGELOG.md index d712d13913..ba0089e6a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ - Extract text content from children of touched components as a label fallback for touch breadcrumbs ([#6106](https://github.com/getsentry/sentry-react-native/pull/6106)) - Auto-inject `sentry-label` from static text content at build time when `annotateReactComponents` is enabled ([#6141](https://github.com/getsentry/sentry-react-native/pull/6141)) - Respect Replay Mask boundaries when reading `sentry-label` for touch breadcrumbs ([#6142](https://github.com/getsentry/sentry-react-native/pull/6142)) +- Add `textComponentNames` option to `annotateReactComponents` for custom text components ([#6169](https://github.com/getsentry/sentry-react-native/pull/6169)) ### Fixes diff --git a/packages/core/src/js/tools/metroconfig.ts b/packages/core/src/js/tools/metroconfig.ts index f5057b5a77..5da8fe8d36 100644 --- a/packages/core/src/js/tools/metroconfig.ts +++ b/packages/core/src/js/tools/metroconfig.ts @@ -41,6 +41,14 @@ export interface SentryMetroConfigOptions { * @default true when `annotateReactComponents` is enabled */ autoInjectSentryLabel?: boolean; + /** + * Component names whose children's text content should be used for + * `sentry-label` injection. Useful for apps with custom text wrapper + * components. + * + * @default ['Text'] + */ + textComponentNames?: string[]; }; /** * Adds the Sentry replay package for web. @@ -193,7 +201,9 @@ function loadExpoMetroConfigModule(): { */ export function withSentryBabelTransformer( config: MetroConfig, - annotateReactComponents: true | { ignoredComponents?: string[] }, + annotateReactComponents: + | true + | { ignoredComponents?: string[]; autoInjectSentryLabel?: boolean; textComponentNames?: string[] }, ): MetroConfig { const defaultBabelTransformerPath = config.transformer?.babelTransformerPath; debug.log('Default Babel transformer path from `config.transformer`:', defaultBabelTransformerPath); diff --git a/packages/core/src/js/tools/sentryBabelTransformerUtils.ts b/packages/core/src/js/tools/sentryBabelTransformerUtils.ts index 0626a97185..fc20576816 100644 --- a/packages/core/src/js/tools/sentryBabelTransformerUtils.ts +++ b/packages/core/src/js/tools/sentryBabelTransformerUtils.ts @@ -8,6 +8,7 @@ export type SentryBabelTransformerOptions = { annotateReactComponents?: { ignoredComponents?: string[]; autoInjectSentryLabel?: boolean; + textComponentNames?: string[]; }; }; diff --git a/packages/core/test/tools/sentryBabelTransformer.test.ts b/packages/core/test/tools/sentryBabelTransformer.test.ts index 12b8bf7631..6403dde42c 100644 --- a/packages/core/test/tools/sentryBabelTransformer.test.ts +++ b/packages/core/test/tools/sentryBabelTransformer.test.ts @@ -117,6 +117,31 @@ describe('SentryBabelTransformer', () => { ); }); + test('transform passes textComponentNames to plugin', () => { + process.env[SENTRY_BABEL_TRANSFORMER_OPTIONS] = JSON.stringify({ + annotateReactComponents: { + textComponentNames: ['Text', 'MyText', 'Typography'], + }, + }); + + createSentryBabelTransformer().transform?.(createMinimalMockedTransformOptions()); + + expect(MockDefaultBabelTransformer.transform).toHaveBeenCalledTimes(1); + expect(MockDefaultBabelTransformer.transform).toHaveBeenCalledWith( + expect.objectContaining({ + plugins: expect.arrayContaining([ + [ + expect.objectContaining({ name: 'componentNameAnnotatePlugin' }), + expect.objectContaining({ + autoInjectSentryLabel: true, + textComponentNames: ['Text', 'MyText', 'Typography'], + }), + ], + ]), + }), + ); + }); + test('degrades gracefully if options can not be parsed, transform adds plugin with defaults', () => { process.env[SENTRY_BABEL_TRANSFORMER_OPTIONS] = 'invalid json';