Setting the transaction name for client-side GraphQL requests

[seanparmelee]

Hello 👋
We're using @sentry/nextjs along with the urql GraphQL client and I was curious to know the recommended way for setting the transaction name.

What we'd like to accomplish

Rather than see numerous transactions for POST /graphql, we'd like to see transactions named after their corresponding operation name.

What we've tried

Initially, we were using

Sentry.getCurrentScope().setTransactionName(operationName)

as per the docs, but there are two issues we noticed:

1. setTransactionName was recently deprecated, but more importantly
2. the "current scope" seems to apply to more than a specific GraphQL / fetch request (i.e. we noticed it replacing the transaction name for fetch calls to FullStory and LaunchDarkly)

The deprecation mentions using extra or tags, but those are also set on the current scope and would exhibit the same issue we're seeing with setTransactionName.

We also considered Sentry.addEventProcessor, but the incoming event and hint doesn't contain the information needed for us to know the operation name (the same goes for beforeSendTransaction).

We noticed the @sentry/utils package exposes a addFetchInstrumentationHandler function in which the handler would have access to the fetch request body (which could be used to extract the operation name), but @sentry/utils is technically not part of the public API.

Other options?

I suspect one way to accomplish this might be to configure our GraphQL client to use a custom fetch implementation that manually creates a Sentry span/transaction and configure Sentry to not automatically instrument fetch requests to our GraphQL endpoint.

I'm ultimately wondering if there are some other options that we haven't considered (especially taking into account what v8 of the SDK will offer) and/or what the official recommendation is to accomplish something like this. Thanks in advance!

Related Issues

#3087
#5442

[nevace]

I'm also interested in this. At the moment it's not very helpful just seeing POST /graphql with no information about the query.

[seanparmelee]

@lforst (you promised not to get mad at me 😛)

In case it helps, here's a little more context for what I was originally trying to accomplish:

• Inspired by apollo-link-sentry, I was trying to bring similar behavior to urql
• One of the goals was to set Sentry's transaction name whenever a GraphQL request is made (whether on the server or browser side), so that it reflects the query's operation name (similar to how fetch calls show their url in Sentry). The hope was that if an error happens (or we manually call captureException or captureMessage) then the transaction would already be set accordingly.
• It seemed I had a misunderstanding on how scopes work (and what getCurrentScope() returns) because I was finding that the transaction name was "leaking" into other requests. For example, on the server side, requests to our API routes had their transaction name set to some unrelated GraphQL operation name.
• For now, we no longer try to set the transaction name and instead have a global GraphQL error handler that extracts the operation name and error message(s) and passes then on a context object passed into captureException. The operation name is set as a tag. An abbreviated version can be seen here.

It seems like the transaction name is something we're better off not setting? I was thinking it might also be useful when looking at performance/transaction data if we wanted to identify any slow/problematic operations. As @nevace mentioned, without doing anything these will just show up as POST /graphql.