Exposed http client span as transaction

[Lucienzera]

For react-native performance monitoring.

We are trying to capture the api latency for individual API. We notice that the performance are able to capture navigation and ui.load as transaction but not for http.client.

By surfacing the http.client span as transaction, we would be able to create custom widgets that is tied to our product domain within our application. Example: Api latency on /transaction

Thank you

Side note: We only integrate our Expo RN application to Sentry and not our backend. So we are not able to do tracePropagationTargets since we wouldnt have the origin endpoint info? (assumption)

Do push me in the right direction. Thanks!

[krystofwoldrich]

Hi,
thank you for the message,
as you mention these kind of measurements would be visible out of the box when using Sentry on the back end, but no worries you can achieve similar experience using only the RN SDK.

By default the network request are recorded as span in a transaction, this can't be changed.

But you can measure network request you are interested in manually using the Sentry.startInactiveSpan API.

Example:

const span = Sentry.startInactiveSpan({
  name: 'Request to example.request',
  op: 'http.request',
  forceTransaction: true,
});
await fetch('https://example.request');
span?.end();

Let us know if this works for you.

[Lucienzera]

Hi @krystofwoldrich , Thanks for getting back to me asap.

I can see how that would work. Do you think its advisable if I add this Sentry.startInactiveSpan at our network layer. So these span will get added dynamically for all without specifying manually?

And would this now create duplicates spans of http.client in a single transaction? Or it seperated out creates a new transaction entirely? How would the trace look like.

Thank you

[krystofwoldrich]

Do you think its advisable if I add this Sentry.startInactiveSpan at our network layer. So these span will get added dynamically for all without specifying manually?

Yes, you can do that. That's how our official integration works.

And would this now create duplicates spans of http.client in a single transaction? Or it seperated out creates a new transaction entirely? How would the trace look like.

These new transactions will be standalone and won't show in other transactions. But the original spans will still be created. But you can disable the automatic spans by using https://github.com/getsentry/sentry-react-native/blob/5a5c4b4941fa6e71bf3b449d3bc5b5b6f635fc23/packages/core/src/js/tracing/reactnativetracing.ts#L28C1-L40C21

[Lucienzera]

@krystofwoldrich Thank you so much! I will try it out!

[krystofwoldrich]

I'll close the issue for now, but feel free to comment here in case of any further related questions, we can reopen it again.