Distributed tracing with embedded browser

[m-kovac]

I want to make distributed tracing work between the host application (.NET Framework) and the embedded chromium which hosts React application. What I am currently doing:

• creating the transaction in the .NET application
• creating span and sending the traceId and spanId of that span as query parameters to the React app on initialization
• grabbing those values from the query and want to continue the trace with a new span that will be parented under the one i provided.

I tried two approaches but In Traces for the .NET application I can see only traces from the .NET application, but no spans that should be produced in the React app.

What I expect is to see all spans that were continued with the provided traceId and spanId to be visible under the original trace root (produced by .NET application).

Approach 1

https://docs.sentry.io/platforms/javascript/guides/express/tracing/trace-propagation/custom-instrumentation/

import { continueTrace, startSpan } from '@sentry/browser';

traceId = getTraceIdFromQueryString();
spanId = getSpanIdFromQueryString();

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

async customMethod(): Promise<CustomType>{
   return continueTrace<Promise<CustomType>>({
        baggage: undefined,
        sentryTrace: sentryTrace
      }, async () =>
      startSpan<Promise<CustomType>>({
        name: 'name',
        op: 'operation.new'
      }, async () => // return CustomType
    )
}

Approach 2

https://docs.sentry.io/platforms/javascript/guides/react/tracing/trace-propagation/custom-instrumentation/

import { startSpan } from '@sentry/browser';
import { type PropagationContext } from '@sentry/types';

async customMethod(): Promise<CustomType>{
    const propagationContext: PropagationContext = {
        traceId : getTraceIdFromQueryString(),
        spanId : getSpanIdFromQueryString(),
    }
    getGlobalScope().setPropagationContext(propagationContext);

    return startSpan<Promise<CustomType>>({
        name: 'action',
        op: 'operation.new'
      }, async () =>  // return CustomType
  }

Notes:

• traceId and spanId are send in query parameters
• both application, host and also hosted app have set the environment to the same value
• React app has browserApiErrorsIntegration and browserTracingIntegration integrations enabled
• sample rate for .NET application is set to 1
• the callback of startSpan is called and correct value is returned
• trying to use getCurrentScope in Approach 1 did not change anything

Does have anybody any clue what am I missing/doing wrong? Thanks for any ideas.

[lforst]

If you transmit the tracing headers via <meta> like outlined here https://docs.sentry.io/platforms/javascript/guides/react/tracing/trace-propagation/#automatic-trace-propagation everything should "just work". This is the recommended way of transferring tracing information from SSR to the client.

[lforst]

You cannot clientside render the the meta tags, they need to come as part of the HTML from the server.

[m-kovac]

Ok, but what about the other point I made - that the browserTracingIntegration prevents custom instrumentation using continueTrace? Is it bug, misconfiguration or I misunderstood something?

[lforst]

continueTrace is actually not an API we recommend using in the browser. There is a lot of nuance to it because of the lack of AsyncLocalStorage or an equivalent. The recommended way to proceed is to use the browserTracingIntegration and pass meta tags from serverside rendering. In 99.9999% of the cases this will yield the result you want. The other 0.0001 we don't support. I don't want to elaborate because it would be a lot of text and I want to steer you away from even going that route. It will just cause more pain.

[m-kovac]

Ok, just want to mention, that setting the parentSpanIsAlwaysRootSpan to false actually does the trick, but it creates a mess in the React app traces - it includes the traces of the .NET app, Also currently I am not sure about other implications, reading the docs https://docs.sentry.io/platforms/javascript/guides/react/tracing/instrumentation/custom-instrumentation/#span-hierarchy-in-the-browser

[m-kovac]

Thanks for elaboration. It will be probably way harder as expected (if possible) to get it right for our use-case.