See frontend replays in backend graphql requests

[adityasingh773]

I can currently see my frontend(sentry integrated in a react app) replays from my backend(sentry integrated in my Nestjs app) sentry logs. But I had to update my backend sentry integration to include name of the graphql requests instead of simply seeing Post / graphql
As soon as I made my changes, I could no longer see "attached" frontend replays in my backend logs.
Although I was able to access replay_id like so in my backend:

const baggageHeader = req.headers['baggage'];

  let replayId: string | null = null;

  if (baggageHeader) {
    const baggageItems = baggageHeader.split(',');
    for (const item of baggageItems) {
      const [key, value] = item.split('=');
      if (key === 'sentry-replay_id') {
        replayId = value;
        break;
      }
    }
  }

I am not sure what to do with it such that it enables me to see my replays again from my workbench sentry logs.

I have tried to do setTag but that just sets the tag and does not make my replays visible.

How do I use the replayId used from above to "plug it" to my backend sentry logs as well.

[AbhiPrasad]

But I had to update my backend sentry integration to include name of the graphql requests instead of simply seeing Post / graphql

How did you make this change?

[adityasingh773]

In my nestjs backend, in my main.ts, I did this

Sentry.init({
    dsn: process.env.SENTRY_DSN,
    integrations: [
      new Sentry.Integrations.Http({ tracing: true }),
      new Sentry.Integrations.Express({
        app,
      }),
    ],
    tracesSampleRate: 1.0,
    profilesSampleRate: 1.0,
  });

  app.use(Sentry.Handlers.requestHandler());
  app.use(Sentry.Handlers.tracingHandler());

Then I added two files viz. context.ts and plugin.ts
This is the content of my context.ts

import * as Sentry from '@sentry/node';
import { Transaction } from '@sentry/node';
import { ContextFunction } from 'apollo-server-core/src/types';

export interface SentryContext {
  transaction: Transaction;
}

export const addSentryContext: ContextFunction = (context) => {

  const { req } = context;

  const sentryTraceHeader = req.headers['sentry-trace'];

  const baggageHeader = req.headers['baggage'];

  let replayId: string | null = null;

  if (baggageHeader) {
    const baggageItems = baggageHeader.split(',');
    for (const item of baggageItems) {
      const [key, value] = item.split('=');
      if (key === 'sentry-replay_id') {
        replayId = value;
        break;
      }
    }
  }

  if (replayId) {
    Sentry.configureScope((scope) => {
      scope.setExtra('replayId', replayId);
    });
  }

  let parentSpanId: string | undefined;
  let traceId: string | undefined;

  if (sentryTraceHeader) {
    [traceId, parentSpanId] = sentryTraceHeader.split('-');
  }

  // Sentry.setTag("replay_id", replay_id);

  const transaction = Sentry.startTransaction({
    op: 'gql',
    name: 'GraphQLTransaction',
    parentSpanId,
    traceId,
  });

  return {
    ...context,
    transaction,
  };
};

and this is my plugin.ts

import type {
  ApolloServerPlugin,
  GraphQLRequestExecutionListener,
  GraphQLRequestListener,
} from 'apollo-server-plugin-base';
import { SentryContext } from './apolloSentryContext';

export class ApolloSentryPlugin implements ApolloServerPlugin<SentryContext> {
  async requestDidStart({
    request,
    context,
  }): Promise<GraphQLRequestListener<SentryContext>> {

    if (request.operationName) {
      context.transaction.setName(request.operationName);
    }
    return {
      async willSendResponse({ context }) {
        context.transaction.finish();
      },
      async executionDidStart(): Promise<GraphQLRequestExecutionListener> {
        return {
          willResolveField({ context, info }) {
            const span = context.transaction.startChild({
              op: 'resolver',
              description: `${info.parentType.name}.${info.fieldName}`,
            });
            return () => {
              // this will execute once the resolver is finished
              span.finish();
            };
          },
        };
      },
    };
  }
}

and then finally "plugged" both my context and plugin in app.module.ts like so

@Module({
  imports: [
    ...
    GraphQLModule.forRoot<ApolloDriverConfig>({
      cache: 'bounded',
      context: addSentryContext,
      driver: ApolloDriver,
      resolvers: { JSON: GraphQLJSON },
      plugins: [new ApolloSentryPlugin()],
    }),
    ...
  ],
})
export class AppModule {}

[AbhiPrasad]

try using the tracing headers directly with the tracingContextFromHeaders util. We're gonna make this easier to use in a future version of the SDK.

you might also want to check out https://docs.sentry.io/platforms/node/configuration/async-context/

import * as Sentry from '@sentry/node';
import { Transaction } from '@sentry/node';
import { tracingContextFromHeaders } from '@sentry/utils';
import { ContextFunction } from 'apollo-server-core/src/types';

export interface SentryContext {
  transaction: Transaction;
}

export const addSentryContext: ContextFunction = (context) => {
  const { req } = context;

  const sentryTraceHeader = req.headers['sentry-trace'];
  const baggageHeader = req.headers['baggage'];

  const { traceparentData, dynamicSamplingContext, propagationContext } = tracingContextFromHeaders(
    sentryTraceHeader || '',
    baggageHeader,
  );

  const transaction = Sentry.startTransaction({
    op: 'gql',
    name: 'GraphQLTransaction',
    ...traceparentData,
    metadata: {
      dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,
    },
  });

  return {
    ...context,
    transaction,
  };
};

When does the transaction get finished though?

[alvis]

As a reference for anyone who is wondering the difference between tracingContextFromHeaders and continueTrace like me, continueTrace is basically the implementation of the code above which is shipped in #9164 🚀

[mikan3rd]

The tracingContextFromHeaders and startTransaction have been deprecated.
Please use continueTrace and startSpan instead.
https://docs.sentry.io/platforms/node/guides/express/usage/distributed-tracing/custom-instrumentation/#extracting-incoming-tracing-information

I am using Apollo Server, so I wrote the code as follows

import * as Sentry from '@sentry/node';

const server = new ApolloServer({
  context: async ({ req }): Promise<Context> => {
    // https://docs.sentry.io/platforms/node/guides/express/usage/distributed-tracing/custom-instrumentation/#extracting-incoming-tracing-information
    const sentryTraceHeaders = req.headers['sentry-trace'];
    const sentryTrace = Array.isArray(sentryTraceHeaders) ? sentryTraceHeaders.join(',') : sentryTraceHeaders;
    const baggage = req.headers['baggage'];
    const sentrySpan = Sentry.continueTrace({ sentryTrace, baggage }, (transactionContext) => {
      return Sentry.startInactiveSpan({
        ...transactionContext,
        op: 'gql',
        name: req.body.operationName,
      });
    });
    return { sentrySpan };
  },
});

export const ApolloServerSentryPlugin = (): ApolloServerPlugin<Context> => ({
  requestDidStart: async () => ({
    willSendResponse: async ({ context }) => {
      context.sentrySpan?.end();
    },
  }),
});