Skip to content

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

Open
antonis wants to merge 1 commit intomainfrom
antonis/auto-inject-sentry-label
Open

feat(babel): Auto-inject sentry-label from static text children#925
antonis wants to merge 1 commit intomainfrom
antonis/auto-inject-sentry-label

Conversation

@antonis
Copy link
Copy Markdown
Contributor

@antonis antonis commented May 7, 2026

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 onlyautoInjectSentryLabel 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 safebundler-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

Comment thread packages/babel-plugin-component-annotate/src/index.ts
Comment thread packages/babel-plugin-component-annotate/src/index.ts Outdated
Comment thread packages/babel-plugin-component-annotate/src/index.ts
@linear-code
Copy link
Copy Markdown

linear-code Bot commented May 7, 2026

Comment thread packages/babel-plugin-component-annotate/src/index.ts Outdated
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix All in Cursor

❌ 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.

Comment thread packages/babel-plugin-component-annotate/src/index.ts Outdated
Add opt-in `autoInjectSentryLabel` option to the Babel component annotate
plugin. When enabled, the plugin extracts static text from JSX children
(up to 3 levels deep) and injects a `sentry-label` attribute on the root
element. This gives React Native apps meaningful touch breadcrumb labels
without manual annotation.

Closes getsentry/sentry-react-native#6098

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@antonis antonis force-pushed the antonis/auto-inject-sentry-label branch from 0bd679b to 9eaa08f Compare May 7, 2026 13:57
@antonis antonis requested a review from alwx May 7, 2026 14:21
@antonis antonis marked this pull request as ready for review May 7, 2026 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Auto-inject sentry-label from static JSX text children in Babel plugin

1 participant