Custom transactions cannot match the trace.id of the backend

[wajika]

The frontend generates a trace.id and the backend adds a trace.id

What can I do to match trace.id

[GregKalapos]

Hi @wajika,

I assume this is the same as Custom transactions cannot match the trace.id of the backend.

Is the elastic-apm-traceparent header added to the HTTP request? Can you verify that?

If you paste here the logs from the .NET Agent, I can also verify if the .NET Agent receives the necessary header or not. I see you already set the .NET Agent debug to Debug level, I'd need logs from at least Debug, so make sure that's still set if you send logs.

Also, just to make sure I understand you correctly.

What can I do to match trace.id

You mean that the trace.id of the transaction on the backend (.NET) and the trace.id of the transaction on the frontend (JS) don't match - that is the issue, right? So in Kibana you don't see those 2 transactions as a single trace - that is the issue here, right?

[wajika]

You mean that the trace.id of the transaction on the backend (.NET) and the trace.id of the transaction on the frontend (JS) don't match ------- yes
So in Kibana you don't see those 2 transactions as a single trace ----- yes

Can see elastic-apm-traceparent on the browser without using Custom Transactions.

I looked at the document, but I couldn't find the reason.
https://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transactions.html

I didn't see any useful information in the backend(.net) log.
https://pastebin.com/rJVXxi6d

[vigneshshanmugam]

Hi @wajika,

Distributed tracing works out of the box only for Managed transactions (Auto instrumented Transactions/Spans created by the agent) as the agent has to patch the outgoing call and add necessary headers (elastic-apm-traceparent).

For custom XHR span (httpSpan from your example), you would need to set the elastic-apm-traceparent header on the underlying HTTP request (XHR or Fetch). You can do something like this for XHR

var httpspan = transaction.startSpan('POST', 'external')
// get header value from span
// https://github.com/elastic/apm-agent-rum-js/blob/efece2590c3287aff4aefac031a79918bd76160f/packages/rum-core/src/common/utils.js#L66-L80

var headerValue = getHeaderValue(httpSpan)
// add the header to the XHR call
xhr.setRequestHeader('elastic-apm-traceparent', headerValue)

This is bit painful and hacky, We already have an issue to expose an API from the RUM agent to make it easier to do this for custom instrumentations.

Thanks,
Vignesh

[wajika]

Problem solved, thanks