Support for Apollo in Sentry Performance

[fabiendem]

Hello,

I am setting up the Sentry Performance monitoring on a React Native Project.
Most of our queries are made via Apollo/GraphQL.

I see that you have a specific plugin for Sentry and Apollo on Android: https://docs.sentry.io/platforms/android/configuration/integrations/apollo/

I am wondering if there is such a plugin for React Native, knowing that the Apollo setup is made at the JS layer in our app.
I couldn't find it in the docs or in the source code of the library.

Thanks

[marandaneto]

@fabiendem we only have for the Android native layer, but not for the JS layer, I'll tag it as a feature request.

Feel free to use our custom instrumentation and do something similar to what's done in this blog post.

[jennmueng]

@fabiendem You might be interested in this blogpost we have that details how to create a Sentry Plugin for Apollo: https://blog.sentry.io/2021/08/31/guest-post-performance-monitoring-in-graphql

[fabiendem]

Interesting thanks, I'll have a look.

I don't want to divert from this ticket too much, but in the RN doc, what does tracingOrigins: ["localhost", "my-site-url.com", /^\//], refer to?
Is that for Rest API tracking?
i am struggling to understand the purpose of this tracingOrigins param.

https://docs.sentry.io/platforms/react-native/performance/#enable-tracing

[marandaneto]

@fabiendem the JS docs may help to explain that https://docs.sentry.io/platforms/javascript/performance/instrumentation/automatic-instrumentation/#tracingorigins

[sregg]

I tried to use https://github.com/DiederikvandenB/apollo-link-sentry to get the GQL query names instead of /graphql everywhere but it didn't seem t work.

[marandaneto]

getsentry/sentry-javascript#3953 should help here once we bump to JS 7.2.0

[fabiendem]

Thanks @marandaneto but isn't it for server side queries only? It won't apply to a react-native project I believe.

[fabiendem]

Hey FYI we're now using https://github.com/DiederikvandenB/apollo-link-sentry in our app.
It's doing the job, feel free to close this ticket.

[filipchytracek]

I was able to achieve our goal of query name being part of a span by propagating it to breadcrumbs and then to spam.

Sentry.init({
...
beforeBreadcrumb(breadcrumb, hint) {
    // Add operation name for GraphQL operations
    if (breadcrumb.category === 'fetch' && hint?.input?.[1]?.body) {
      try {
        const body = JSON.parse(hint.input?.[1]?.body);
        if (body.operationName) {
          const response = {
            ...breadcrumb,

            data: {
              ...breadcrumb.data,
              operationName: body.operationName,
            },
          };
          return response;
        }
      } catch (e) {
        // Ignore parsing errors
      }
    }

    return breadcrumb;
  },
  beforeSendTransaction(event) {
    const formattedSpans = event.spans?.map((span) => {
      const breadcrumb = event.breadcrumbs?.find((breadcrumb) => {
        return breadcrumb.data?.__span === span.span_id;
      });

      return {
        ...span,
        data: {
          ...span.data,
          operationName: breadcrumb?.data?.['sentry.op'],
        },
      };
    });

    return { ...event, spans: formattedSpans };
  },
...
})