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 76d2c8b9f4a0b..2c0b186b15cd3 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 a8fd66084d785..c062d82c87d68 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 a00a0dd5f099dbf48dc7bdd3c99fc9d1a539ddd0 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 14:18:58 +0200 Subject: [PATCH 2/4] Clarify that sentry-label takes priority over labelName 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 c062d82c87d68..58aef08454843 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`, and `testID` as fallbacks. `sentry-label` always takes priority, even when `labelName` is configured. If an element can't be identified, the transaction won't be captured. ```javascript {2-2} export default Sentry.wrap(App, { From 7f73256399c3833dd53b2590856f5ae0453c195e Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 14:27:53 +0200 Subject: [PATCH 3/4] Remove contradictory sentry-label priority sentence The full priority list is documented in touchevents.mdx. 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 58aef08454843..c062d82c87d68 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. `sentry-label` always takes priority, even when `labelName` is configured. 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 4a75a2b0d87c7b72afdef6dc49b79cce2fb894a2 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 7 May 2026 14:32:11 +0200 Subject: [PATCH 4/4] Rewrite label priority paragraph for clarity 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 c062d82c87d68..b17ed81152c38 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 SDK identifies UI elements by looking for `sentry-label`, then `accessibilityLabel`, `aria-label`, and `testID` props. 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. ```javascript {2-2} export default Sentry.wrap(App, {