Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions docs/platforms/react-native/configuration/touchevents.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const App = () => <View>Your App</View>;
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, {
Expand Down
Loading