From 4329193fefd23ead4280472630431a12f6151cfb Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 6 May 2026 17:18:27 +0200 Subject: [PATCH 1/4] docs(react-native): Document touch breadcrumb label fallbacks Co-Authored-By: Claude Opus 4.6 --- .../react-native/configuration/touchevents.mdx | 18 ++++++++++++++++-- .../user-interaction-instrumentation.mdx | 2 +- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/docs/platforms/react-native/configuration/touchevents.mdx b/docs/platforms/react-native/configuration/touchevents.mdx index 76d2c8b9f4a0bb..2c0b186b15cd3a 100644 --- a/docs/platforms/react-native/configuration/touchevents.mdx +++ b/docs/platforms/react-native/configuration/touchevents.mdx @@ -52,7 +52,21 @@ Each touch event is automatically logged as a breadcrumb and displays on the das ## Tracking Specific Components -You can let Sentry know which components to track specifically by passing the `sentry-label` prop to them. If Sentry detects a component with a `sentry-label` within a touch's component tree, it will be logged on the dashboard as having occurred in that component. If Sentry cannot find a component with the label, Sentry will fall back to the `labelName` prop if specified, or else use `displayName`. +You can let Sentry know which components to track specifically by passing the `sentry-label` prop to them. If Sentry detects a component with a `sentry-label` within a touch's component tree, it will be logged on the dashboard as having occurred in that component. + +For each component in the touch path, the SDK extracts a **label** and a **name**. The breadcrumb message uses the label if any component in the path has one; otherwise it falls back to the root component's name. + +The **label** is determined by the first available value from: + +1. `sentry-label` prop +2. Custom `labelName` prop (if configured on the boundary) +3. `accessibilityLabel` prop +4. `aria-label` prop +5. `testID` prop + +The **name** comes from the Babel plugin annotation (`data-sentry-component`) or `displayName`. See [Component Names](/platforms/react-native/integrations/component-names/) for details. + +This means apps that use accessibility labels or test IDs get meaningful touch breadcrumbs automatically, without any extra configuration. ```javascript const YourCoolComponent = (props) => { @@ -114,7 +128,7 @@ _Array<string | RegExp>, Accepts strings and regular expressions_. Component `labelName` -_String_. The name of the prop to look for when determining the label of a component. If the prop is not found, Sentry will fall back to the `displayName` of the component. +_String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, and `testID` fallbacks. ## Minified Names in Production diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx index a8fd66084d785e..c062d82c87d68f 100644 --- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx @@ -37,7 +37,7 @@ const App = () => Your App; export default Sentry.wrap(App); ``` -The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, `sentry-label` will be used instead. If an element can't be identified, the transaction won't be captured. +The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, the SDK will look for `sentry-label`, then `accessibilityLabel`, `aria-label`, and `testID` as fallbacks. If an element can't be identified, the transaction won't be captured. ```javascript {2-2} export default Sentry.wrap(App, { From bc2bef7c282e1588b2b160c47d731453f3de249a Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 11:10:00 +0200 Subject: [PATCH 2/4] docs(react-native): Document text extraction from children for touch breadcrumbs Co-Authored-By: Claude Opus 4.6 --- .../react-native/configuration/touchevents.mdx | 13 ++++++++++++- .../user-interaction-instrumentation.mdx | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/platforms/react-native/configuration/touchevents.mdx b/docs/platforms/react-native/configuration/touchevents.mdx index 2c0b186b15cd3a..3570125f798ae3 100644 --- a/docs/platforms/react-native/configuration/touchevents.mdx +++ b/docs/platforms/react-native/configuration/touchevents.mdx @@ -63,10 +63,17 @@ The **label** is determined by the first available value from: 3. `accessibilityLabel` prop 4. `aria-label` prop 5. `testID` prop +6. Text content extracted from children (e.g. `Save workout` → `"Save workout"`) The **name** comes from the Babel plugin annotation (`data-sentry-component`) or `displayName`. See [Component Names](/platforms/react-native/integrations/component-names/) for details. -This means apps that use accessibility labels or test IDs get meaningful touch breadcrumbs automatically, without any extra configuration. +This means apps that use accessibility labels, test IDs, or simply have text inside their touchable components get meaningful touch breadcrumbs automatically, without any extra configuration. + + + +Text extraction from children (item 6) is automatically disabled when Session Replay's `maskAllText` is enabled (the default). Set `maskAllText: false` in your `mobileReplayIntegration` config to enable it. Per-view `Sentry.Mask` boundaries are also respected. + + ```javascript const YourCoolComponent = (props) => { @@ -130,6 +137,10 @@ _Array<string | RegExp>, Accepts strings and regular expressions_. Component _String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, and `testID` fallbacks. +`extractTextFromChildren` + +_boolean, default: true_. Extract text content from children of touched components as a label fallback. Automatically disabled when Session Replay's `maskAllText` is enabled. Text inside `Sentry.Mask` boundaries is never extracted. Set to `false` to opt out entirely. + ## Minified Names in Production When bundling for production, React Native will minify class and function names to reduce the bundle size. This means that **you won't get the full original component names in your touch event breadcrumbs** and instead you will see minified names. Check out our [troubleshooting guide for minified production bundles](/platforms/react-native/troubleshooting/#minified-names-in-production) documentation to solve this. diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx index c062d82c87d68f..0907a953872534 100644 --- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx @@ -37,7 +37,7 @@ const App = () => Your App; export default Sentry.wrap(App); ``` -The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, the SDK will look for `sentry-label`, then `accessibilityLabel`, `aria-label`, and `testID` as fallbacks. If an element can't be identified, the transaction won't be captured. +The label by which UI elements are identified is set by the `labelName` option in `Sentry.wrap`. If no value is supplied, the SDK will look for `sentry-label`, then `accessibilityLabel`, `aria-label`, `testID`, and finally text content from children as fallbacks. If an element can't be identified, the transaction won't be captured. ```javascript {2-2} export default Sentry.wrap(App, { From 5ce7498fe71640ad8440a20eb3c217cf33aa370f Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 14:59:15 +0200 Subject: [PATCH 3/4] Include text extraction in labelName priority description Co-Authored-By: Claude Opus 4.6 --- .../instrumentation/user-interaction-instrumentation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx index 3967b59e1cd12c..a3fc0eb2da0478 100644 --- a/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx @@ -37,7 +37,7 @@ const App = () => Your App; export default Sentry.wrap(App); ``` -The SDK identifies UI elements by looking for `sentry-label`, then `accessibilityLabel`, `aria-label`, `testID`, and finally text content from children as fallbacks. You can also specify a custom prop name with the `labelName` option in `Sentry.wrap`, which takes priority over `accessibilityLabel`, `aria-label`, and `testID`. If an element can't be identified, the transaction won't be captured. +The SDK identifies UI elements by looking for `sentry-label`, then `accessibilityLabel`, `aria-label`, `testID`, and finally text content from children as fallbacks. You can also specify a custom prop name with the `labelName` option in `Sentry.wrap`, which takes priority over `accessibilityLabel`, `aria-label`, `testID`, and text extraction from children. If an element can't be identified, the transaction won't be captured. ```javascript {2-2} export default Sentry.wrap(App, { From 1df31aba103569fca757d832b9ce03dafc1944c0 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 15:12:05 +0200 Subject: [PATCH 4/4] Include text extraction in labelName priority in touchevents docs Co-Authored-By: Claude Opus 4.6 --- docs/platforms/react-native/configuration/touchevents.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/react-native/configuration/touchevents.mdx b/docs/platforms/react-native/configuration/touchevents.mdx index 3570125f798ae3..5bc2693a23f48e 100644 --- a/docs/platforms/react-native/configuration/touchevents.mdx +++ b/docs/platforms/react-native/configuration/touchevents.mdx @@ -135,7 +135,7 @@ _Array<string | RegExp>, Accepts strings and regular expressions_. Component `labelName` -_String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, and `testID` fallbacks. +_String_. The name of a custom prop to look for when determining the label of a component. Takes priority over the automatic `accessibilityLabel`, `aria-label`, `testID`, and text extraction from children fallbacks. `extractTextFromChildren`