feat(core): Surface textComponentNames option in Metro config

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
 

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);

packages/core/src/js/tools/sentryBabelTransformerUtils.ts

@@ -8,6 +8,7 @@ export type SentryBabelTransformerOptions = {
   annotateReactComponents?: {
     ignoredComponents?: string[];
     autoInjectSentryLabel?: boolean;
+    textComponentNames?: string[];
   };
 };
 

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';