How to set distributed tracing setting in RUM agent?

Elastic Observability APM
1

Kibana version:7.5.2

Elasticsearch version:7.5.2

APM Server version:7.5.2

APM Agent language and version:RUM agent 4.7.0

Browser version:chrome 79.0.3945.130

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):

i want to trace both frontend with backend using distributed tracing.
like this...

image
image1578×595 61.5 KB

But RUM agent is only show frontend tracing.

here is my config

  1. RUM agent config
    elasticApm.init({
    serviceName:'service-name1',
    serviceUrl: 'http://apm-server-ip:8200',
    pageLoadTransactionName: pageName,
    distributedTracingOrigins: ['http://localhost:8080']
    })

  2. Java agent config
    service_name=service-name2
    application_packages=my.package.name
    server_urls=http://apm-server-ip:8200
    span_frames_min_duration=-1ms
    use_path_as_transaction_name=true

  3. HTTP response
    response.setHeader("Acess-Control-Allow-Origin","")
    response.setHeader("Acess-Control-Allow-Methods","    ")
    response.setHeader("Acess-Control-Allow-Headers","*")

Errors in browser console (if relevant):
And my console
image

Currently both web-server and WAS is tomcat. (Same origin)
In this case, Do I need to add that setting?
like this...

image
image809×617 51 KB

if i have to set this setting, how to i can set this setting?
I try to set this setting in Ajax, but chrome is shown like this.
image

2

Hi @Yungyoung_Ok,

Thanks using Elastic APM.

Would you please provide the requests that fail in your browser ? (You can copy them from the Networks tab in your browser's devtools). Please make sure to remove any sensitive or personal information from the requests though.

Also, which origin your web application is served from? (the address that you see in the browser address bar)

Cheers,
Hamid

3

I added that setting to ajax for distribution tracking.
And I checked the above error on the console.

xmlHttpRequest.setRequestHeader("Origin","*");
xmlHttpRequest.setRequestHeader("Access-Control-Request-Headers","Origin, X-Requested-With, elastic-apm-traceparent")
xmlHttpRequest.setRequestHeader("Access-Control-Request-Method","POST");
  1. my web server&was is tomcat.
    Connect to localhost: 8080 in a browser.
    I think, this setting is the same origin.
    is it right?
    Do I need to add the same origin setting in my current situation?
    If so, how do I solve the above error(refused to set unsafe...)?

How can I set it up like the picture below?
The picture below was captured at demo.elastic.co.

image
image1084×736 153 KB

4

It seems that you are adding those headers manually in your frontend application and that's why the browser is showing those errors. In other words having xmlHttpRequest.setRequestHeader("Origin","*"); is not valid. These headers are automatically added by the browser to the OPTIONS request that the browser sends before the original POST request.

Only your backend (Java) application should be able to respond appropriately with the headers stated in our documentation.

Does this help answer your question?

5

Yes, thank you!
I solved the problem.

My js page reads several js internally, which seems to have conflicted with other js.
Declaring rum.js read first solved the problem.

6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.