APM RUM JS agent no tracing headers added

[Harm]

Kibana version: 7.4
Elasticsearch version: 7.4
APM Server version: 7.4.0
APM Agent language and version: APM RUM 4.7.1
Browser version: Chrome 80
Original install method: https://unpkg.com/@elastic/apm-rum@4.7.1/dist/bundles/elastic-apm-rum.umd.js
Fresh install or upgraded from other version? Fresh install
Is there anything special in your setup? APM server behind reverse proxy

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

Hi,

I've set up a demo site which has a Spring Boot backend. On the demo site I have loaded the RUM agent with the code below. The backend has the java APM agent running. I was hoping for some distributed tracing between website and Spring Boot, but it is not working yet. The frontend and backend calls are visible in the Kibana APM site, but not correlated correctly.

I would expect a tracing header added by the RUM agent. Just to be sure I added the distributedTracingOrigins domain, even though the backend calls are fired against the same domain.

If relevant, the backend calls (e.g. searches), are fired via GET method. This new request is visible in the events request sent to the APM server, but the GET request itself is not instrumented with the needed header. I assume this is needed?

Implementation:

<script src="https://unpkg.com/@elastic/apm-rum@4.7.1/dist/bundles/elastic-apm-rum.umd.js" crossorigin></script>
<script>
  elasticApm.init({
	serviceName: 'PetClinic',
	serverUrl: 'https://tracing.ourdomain.com',
	environment: 'demo',
	pageLoadTransactionName: window.location.pathname,
	distributedTracingOrigins: ['https://demo.ourdomain.com'],
	logLevel: 'trace'
  })
</script>

Errors in browser console (if relevant):
[Elastic APM] startTransaction(10675fad7a8e0d93, /, page-load)
[Elastic APM] end transaction(10675fad7a8e0d93, /)
Transaction { full object }

Do you have any ideas? Tnx!

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @Harm,

Thanks for using Elastic APM.

The GET request should have the elastic-apm-traceparent http header so that the backend agent can use the correct trace in included in that header. Would you please confirm that this header is not preset on the GET request?

As you mentioned if your frontend and backend applications are served from the same domain, there's no need to add distributedTracingOrigins config option. However, the two origins should match exactly, including the port number (if used), subdomains and protocol. Would you please also confirm that this is the case?

Cheers,
Hamid

[Harm]

Hi @Hamidreza,

Thanks for your reponse. Yes both the initial page-load and the form submit are fired against our demo domain. Everything is on HTTPS. Please see the screenshot below. Our apm-server is running on the tracing.apm server.

The first /find opens a page, the events contain the trace and spans of it.
The GET request against /owner?lastName=test contains the search request. I have made a screenshot of its request headers.

You can find a complete HAR file here: https://we.tl/t-33jagT3WeR

Please let me know if there's something else I can debug.

Thanks!

[Hamidreza (Hamidreza Jahtalabziabari)]

Thanks for your reply.

Just an update on this, we have improved our logs a bit to make it easier to debug these type of issues. The changes are not released yet, but in the mean time, can I get you to use our unminified bundle and confirm if the origins are recognised as the same by setting a breakpoint at this line.

[Harm]

Hi @Hamidreza, thanks for your reply again. While debugging I realized that our example application (https://projects.spring.io/spring-petclinic/) is using html forms which are submitted via a button, but the APM agent only supports XHR and Fetch requests.

Would it be possible to get this supported out of the box?

For now I have changed the onsubmit action of the form and I'm now posting the data via an XHR-request, which is indeed adding the tracing headers now. I'm then updating the document body with the response. It is working more or less, but not totally as expected.

1. The initial page-load is still not correlated with the backend Spring Boot application. The backend calls are getting in as requests, but the correlation is missing.

2. The new XHR request is created as 'http-request' instead of page-load now. This request is correlated with the backend Spring Boot application. But loading the DOM of the response is not visible.

Do you have suggestions on how to approach these issues?