How to pass the initial server trace to the first client-side request? #9870

gajus · 2023-12-15T14:17:47Z

gajus
Dec 15, 2023

The flow is:

client makes request to /hello-world -> server renders page and server the page -> client makes additional requests for lazy loaded API endpoints

At the moment, traces are not able to make the connection between the original server requests and later client requests.

We using Node.js server-side.

We are using React/Vike framework client-side.

I can do something like this server-side to pass down trace/span to the client:

const activeContext = context.active();
const span = trace.getSpan(activeContext);
const spanContext = span.spanContext();

appendBody += `
<script>
const initialRequestTraceId = '${spanContext.traceId}';
const initialRequestSpanId = '${spanContext.spanId}';
</script>
`;

But how do I instrument React integration to use these attributes for the requests that occur before first-client side navigation happens?

https://docs.sentry.io/platforms/javascript/guides/react/usage/distributed-tracing/custom-instrumentation/?original_referrer=https%3A%2F%2Fwww.google.com%2F

Okay, so based on this, I need to expose sentry-trace and baggage. I am assuming this is still true if I am using OpenTelemetry?

const sentryTrace = document.querySelector("meta[name=sentry-trace]")?.content;
const baggage = document.querySelector("meta[name=baggage]")?.content;

Would be nice to show in documentation how to get these values in Node.js.

As far as I understand from reading the docs, I don't need baggage. Just trace ID and span ID.

import { context, trace } from '@opentelemetry/api';

export const getTraceSpan = () => {
  const activeContext = context.active();

  const span = trace.getSpan(activeContext);

  if (!span) {
    return null;
  }

  const spanContext = span.spanContext();

  return {
    spanId: spanContext.spanId,
    traceId: spanContext.traceId,
  };
};

// ...

const traceSpan = getTraceSpan();

if (traceSpan) {
  htmlHead += `
  <meta content="${traceSpan.traceId}" name="x-trace-id" />
  <meta content="${traceSpan.spanId}" name="x-span-id" />
`;
}

But how do I pass this to client and how do I instrument a custom router (Vike), still remains a mystery.

Looks like we need something similar to this in Vike

https://github.com/getsentry/sentry-javascript/blob/develop/packages/react/src/reactrouterv6.tsx

instrumentRoutingWithDefaults provides a rough idea how to implement this

sentry-javascript/packages/tracing-internal/src/browser/router.ts

Line 10 in 72c3488

export function instrumentRoutingWithDefaults<T extends Transaction>(

AbhiPrasad · 2023-12-15T15:25:12Z

AbhiPrasad
Dec 15, 2023
Maintainer

To enable distributed tracing from backend -> frontend, you'll need to set meta tags as per the linked docs in your HTML somewhere.

On the client-side, the SDK via the BrowserTracing integration will read those meta tags and use those traceIds when creating pageload transactions (any future navigations get their own trace).

We need to add a Node.js example in the docs of how to generate these meta tags, but you can see Python as an example.

Here's how we do it in the SvelteKit SDK:

sentry-javascript/packages/sveltekit/src/server/handle.ts

Lines 67 to 71 in 72c3488

    
               const traceparentData = transaction.toTraceparent(); 
        
               const dynamicSamplingContext = dynamicSamplingContextToSentryBaggageHeader(transaction.getDynamicSamplingContext()); 
        
               const content = `<head> 
        
             <meta name="sentry-trace" content="${traceparentData}"/> 
        
             <meta name="baggage" content="${dynamicSamplingContext}"/>

So in your vike server router, when generating html, you'll need to add those meta tags (sentry-trace and baggage) based on the existing transaction. This should work with OTEL.

12 replies

gajus Dec 18, 2023
Author

@lforst so from SSR to client, I don't need to pass it?

lforst Dec 19, 2023
Maintainer

@gajus From SSR to client you can pass it if you want to. You just need to find a mechanism that works for you. We often solve this by putting meta tags in the returned html that contains the sentry-trace and baggage values. You could probably also solve this by somehow abusing the server-timings HTTP header API.

gajus Dec 19, 2023
Author

@lforst Right, so... How do I get the value of baggage in JavaScript SDK?

For context, this is how I am generating the sentry-trace value.

import { context, trace } from '@opentelemetry/api';

export const findSentryTrace = () => {
  const activeContext = context.active();

  const activeSpan = trace.getSpan(activeContext);

  if (!activeSpan) {
    return null;
  }

  const { spanId, traceId } = activeSpan.spanContext();

  const sentryTrace = `${traceId}-${spanId}-1`;

  return {
    sentryTrace,
  };
};

// ...

const sentryTrace = findSentryTrace();

if (sentryTrace) {
  htmlHead += `
  <meta content="${sentryTrace.sentryTrace}" name="sentry-trace" />
`;
}

Earlier in this thread @AbhiPrasad showed how to get it using getActiveTransaction, but looks like that approach is incompatible with @sentry/opentelemetry (as transaction is always undefined).

lforst Dec 22, 2023
Maintainer

@mydea How would you grab DSC/baggage off the scope/context in the new model?

mydea Dec 22, 2023
Maintainer

If you use the propagator provided by @sentry/opentelemetry, you should be able to get the current propagation context with this util:

import { getPropagationContextFromContext } from '@sentry/opentelemetry';

const propagationContext = getPropagationContextFromContext(context.active());

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to pass the initial server trace to the first client-side request? #9870

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to pass the initial server trace to the first client-side request? #9870

gajus Dec 15, 2023

Replies: 1 comment · 12 replies

AbhiPrasad Dec 15, 2023 Maintainer

gajus Dec 18, 2023 Author

lforst Dec 19, 2023 Maintainer

gajus Dec 19, 2023 Author

lforst Dec 22, 2023 Maintainer

mydea Dec 22, 2023 Maintainer

gajus
Dec 15, 2023

Replies: 1 comment 12 replies

AbhiPrasad
Dec 15, 2023
Maintainer

gajus Dec 18, 2023
Author

lforst Dec 19, 2023
Maintainer

gajus Dec 19, 2023
Author

lforst Dec 22, 2023
Maintainer

mydea Dec 22, 2023
Maintainer