Skip to content

React Native: Add sentry-span-attributes prop for custom span attributes #16134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
antonis wants to merge 3 commits into
base: master
Choose a base branch
from
+26 −0
Open

React Native: Add sentry-span-attributes prop for custom span attributes #16134

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
465182d
React Native: Add sentry-span-attributes prop for custom span attributes
antonis Jan 23, 2026
51b2d95
Use pressable example
antonis Jan 23, 2026
3701348
simplify example
antonis Jan 23, 2026
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
26 changes: 26 additions & 0 deletions ...forms/react-native/tracing/instrumentation/user-interaction-instrumentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,32 @@ export default Sentry.wrap(App, {
});
```

### Adding Custom Attributes to User Interaction Spans

<Alert level="warning">
The `sentry-span-attributes` prop is experimental and may change in future releases.
</Alert>

You can attach custom attributes to user interaction spans by passing the `sentry-span-attributes` prop to your components. This is useful for adding contextual information like user type, cart value, or feature flags that help you understand user behavior in performance monitoring.

The `sentry-span-attributes` prop accepts an object with string keys and values that are strings, numbers, booleans, or arrays. These attributes will be attached to the user interaction span created when the component is interacted with.

```javascript
<Pressable
sentry-label="checkout"
sentry-span-attributes={{
'user.type': userType,
'cart.value': cartValue,
'feature.enabled': true,
}}
onPress={handleCheckout}
>
<Text>Checkout</Text>
</Pressable>
```

The SDK will traverse the component tree to find the `sentry-span-attributes` prop, so you can attach it to parent components if needed. The attributes work alongside `sentry-label` and will be included in the user interaction span.

<Alert>
If the UI transaction idled, but didn't have any child spans, it'll be
dropped.
Expand Down