VueJS RUM distributed tracing

[senyam08 (Senthilkumar rasan)]

We have instrumented our application(Vuejs) with RUM javascript agent

We have used the following js file inserted via GTM tag
https://unpkg.com/@elastic/apm-rum@5.15.0/dist/bundles/elastic-apm-rum.umd.min.js

We are getting RUM data with user interactions/page load/HTTP requests transaction and traces.
We do have our java application instrumented with java agent which has 100% sampling.
Issue is we are not seeing distributed tracing working in RUM transaction trace (we have trace with spans from RUM data and it doesnt show correlated java application trace)

Is there any other config required to enable distributed tracing across all services

Also we see separate agent js file for Vusjs (Vue integration | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic). It seems like only option available is add as a package and config options. Do we really need vujs specific js file to get the RUM data correlated with server side application and its downstream services. Or can we get correlation with apm-rum.js fie added into html head section?

Thanks

[vigneshshanmugam]

Hi @senyam08,

Please refer to these docs on the RUM side if you have not checked already.

But in general for distributed trace to work for API calls to backends, you would need to set the [distributedTracingOrigins](https://www.elastic.co/guide/en/apm/agent/rum-js/current/configuration.html#distributed-tracing-origins) header.

distributedTracingOrigins: ['https://example.com', /https?:\/\/example\.com:\d{4}/]

Please do let us know if that works. If not, let us know what is the setup between the client and the server and we maybe able to help better.

Thanks,
Vignesh