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, {