feat(babel): Auto-inject sentry-label from static text children

[antonis]

Summary

Adds an opt-in autoInjectSentryLabel option to @sentry/babel-plugin-component-annotate that automatically extracts static text from JSX children and injects a sentry-label attribute on the root element.

This enables React Native apps to get meaningful touch breadcrumb labels (e.g., "Save workout", "Add to cart") without manual annotation. The feature walks the JSX tree up to 3 levels deep, collecting text from recognized text components (default: Text, text), and bails out entirely if any dynamic content is found anywhere in the subtree.

Resolves getsentry/sentry-react-native#6098

Key design decisions

• Opt-in only — autoInjectSentryLabel defaults to false, no behavior change for existing users. When disabled, the only overhead is two property reads during context creation and one boolean check per processJSX call — none of the new extraction/injection code is reached.
• Conservative bail-out — any dynamic expression ({variable}, {t('key')}, template literals) anywhere in the subtree causes the entire label to be skipped — including dynamic content nested inside non-text wrapper elements within text components (e.g., <Text>Hello <Bold>{name}</Bold></Text>). This is stricter than the runtime extraction in sentry-react-native#6106, which skips dynamic nodes and continues. Build-time can't evaluate dynamic content, so skipping entirely avoids partial/misleading labels.
• Hyphenated sentry-label — React strips unknown hyphenated props from DOM elements, so this is safe for web even though the feature targets React Native
• Cross-SDK safe — bundler-plugin-core's createComponentNameAnnotateHooks does not pass this option through, so only React Native (which configures the Babel plugin directly via Metro) can activate it. Web SDKs are unaffected.
• Nested <Text> support — handles the standard RN inline styling pattern (<Text>Hello <Text style={bold}>world</Text></Text>), recursively extracting text from nested text components
• Fragment handling — when the root is a fragment, the first JSXElement child is used as the injection target. Fragments are treated as transparent wrappers and do not consume depth budget during text search.
• Truncation — labels exceeding 64 characters are truncated with ...
• textComponentNames option — configurable list of component names whose children are treated as text content

New plugin options

Option	Type	Default	Description
autoInjectSentryLabel	boolean	false	Enable auto-injection of sentry-label
textComponentNames	string[]	["Text", "text"]	Component names whose JSXText children are considered text content

Test plan

• 55 new tests in sentry-label.test.ts covering: opt-in behavior, basic extraction, multiple text children, skip conditions, truncation, depth limit, text component names, nested text (RN inline styling), fragment handling (including depth budget), dynamic content bail-out in non-text wrappers, web compatibility, edge cases, multiple components per file, ternary returns
• All 175 tests pass (55 new + 120 existing unchanged)
• Verified no regressions in existing test-plugin.test.ts (65 tests) and experimental.test.ts (55 tests)

🤖 Generated with Claude Code

[linear-code]

RN-617 Document `autoInjectSentryLabel` Babel plugin option

RN-618 Respect Mask boundaries when reading `sentry-label` for touch breadcrumbs

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit df91d27. Configure here.}

[timfish]

The regular component injection plugin breaks props in some circumstances which has stopped us from enabling this plugin by default:

• reactComponentAnnotation. I use an unintended value for a prop. #492

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component:
https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/main/packages/babel-plugin-component-annotate/src/experimental.ts