Apollo GraphQL request performance spans

SDKs
1

I have set up performance tracing for a browser React app using GraphQL requests to load data from a separate backend app.

The React app makes multiple GraphQL requests using the Apollo library to show a screen and I can see the spans for the requests in the span graph in Sentry.

The issue though is that all the requests share the same URL, so I cannot tell which GraphQL query or mutation I should optimize first.

Is there a way to change the description of the request span, or add a span to the current transaction?

1 Like
2

This is also something I would love to have. All graphql requests are hidden into the POST /graphql transaction and it’s hard to make sense of each query/mutation.

Could someone point us to the right direction for writing a sentry integration or plugin that would extract the query/mutation name and create a new span?

3

We’ve been able to address this issue by adding a custom sentry plugin that modifies the transaction name when Apollo processes the request:

import { PluginDefinition } from 'apollo-server-core'

const plugin: PluginDefinition = {
  requestDidStart: (ctx) => {
    // Override transaction name with query/mutation name
    const scope = Sentry.getCurrentHub().getScope()
    if (scope && ctx.request.operationName) {
      scope.setTransactionName(ctx.request.operationName)
    }
  }
}

const apolloServer = new ApolloServer({
  // ...
  plugins: [plugin],
})