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.

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.

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

Resolvesgetsentry/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

[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

[antonis]

Thank you for having a look and the context @timfish 🙇

The sentry-label attribute is indeed injected on the root JSX element, the same injection point as data-sentry-component described in #492. I think this should still work in this case since this option is only reachable from React Native (via direct Babel plugin config in Metro). The bundler-plugin-core doesn't pass it through, so web SDKs should not be affected. It is also opt-in and autoInjectSentryLabel defaults to false.

We've recently added an experimental mode which injects the annotations into the HTML elements inside the component

I think this is not applicable for RN since there are no HTML elements.

[timfish]

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Something like this:

autoInjectSentryLabel?: boolean|{textComponentNames: string[]}

autoInjectSentryLabel defaults to false. autoInjectSentryLabel: true gets transformed to autoInjectSentryLabel: { textComponentNames: ["Text", "text"] }?

since this option is only reachable from React Native

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

[antonis]

Thank you for you feedback and suggestions @timfish 🙇

Rather than separate autoInjectSentryLabel and textComponentNames options, we should probably combine these so it's more obvious they are always used together and are unrelated to the other options.

Good idea 👍 Combined with 985b967

If this option should not be visible to other users of the plugin, we might want to use jsdoc @hidden on the options so that users can't discover it.

I've added it on the internal AnnotationOpts interface as a signal in 985b967

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[timfish]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

[antonis]

I'm struggling to work out how this has broken the component annotation tests on Windows 🤔

I've rebased on main in case this was some caching issue but still fails :( 👀

Deleting the actual ci caches worked 🎉
It seems that the Windows node_modules cache was populated before the Rolldown v1 merge, and subsequent runs kept restoring stale dependencies.