Cannot update the description of sentry spans

[hachang0a0]

Problem Statement

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  sampleRate: 0.1,
  //tracesSampleRate: 0.05,
  integrations: [
    new TracingIntegrations.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
      tracingOrigins: [
        REACT_APP_APOLLO_SERVER,
        REACT_APP_SEARCH_API,
        REACT_APP_AUTH_URL,
        REACT_APP_PUBLIC_API,
        /^\//,
      ],
      idleTimeout: 15000,
    }),
  ],
  tracesSampler(samplingContext) {
    console.log('samplingContext: ', samplingContext)
    return 1
  },
  beforeBreadcrumb: (breadcrumb, hint) => {
    const graphQLStringQuery = (hint?.input || [])[1]?.body;
    const graphQLQuery = graphQLStringQuery && JSON.parse(graphQLStringQuery);
    const subUrl =
      graphQLQuery && breadcrumb.data?.url === REACT_APP_APOLLO_SERVER ?
      graphQLQuery.operationName :
      ''

    return {
      ...breadcrumb,
      data: {
        ...breadcrumb.data,
        url: breadcrumb.data?.url + '/' + 'subUrl'
      },
    }
  },
});

For now, I'm using the BrowserTracing instrumentation, it creates a child span for each fetch/xhr request. However, nothing I can do to update the descriptions, URLs of the spans (I'm using apollo client and all the queries' description is the same)

Solution Brainstorm

How about creating a hook to update the spans before adding to the transaction (similar to the beforeBreadcrumb)

[Lms24]

Hi @hachang0a0 and thanks for writing in!

Providing such a hook for spans is a possibility but we haven't yet discussed this. However, we are currently evaluating a simpler way to make changes to a transaction (e.g. something like beforeSend for transactions).

In the meantime, what you can do is to add an event processor to the scope which can make changes to your transaction event, such as editing span descriptions:

  Sentry.getCurrentHub().getScope()?.addEventProcessor((evt) => {
      evt.spans = evt.spans?.map((span) => {
        // here you can filter on whatever you want
        if (span.description?.includes("my condition")) {
          span.description = "I changed this description";
        }
        return span;
      });

      return evt;
    });

Let me know if this solution works out for you!

[solarisn]

In the meantime, what you can do is to add an event processor to the scope which can make changes to your transaction event, such as editing span descriptions:

  Sentry.getCurrentHub().getScope()?.addEventProcessor((evt) => {
      evt.spans = evt.spans?.map((span) => {
        // here you can filter on whatever you want
        if (span.description?.includes("my condition")) {
          span.description = "I changed this description";
        }
        return span;
      });

      return evt;
    });

Let me know if this solution works out for you!

@Lms24
Unfortunately this solution doesn't work because we don't have access to the "hint" like we do in beforeBreadcrumb so there is no way to extract and insert the GraphQL operation name. The relevant data has already been stripped from the span at this point.

I would love to be able to modify spans coming from automatic instrumentation because the http.client instrumentation does not properly support GraphQL use-case since the request URL is always the same.

It also feels like unexpected and undocumented behavior for automatic instrumentation spans to be completely unchangeable in beforeBreadcrumb even though the function is executed for those spans. If beforeBreadcrumb executes for any span, I would expect to be able to modify it as documented.