RUM Agent - APM Server location only known after page load

APM Agent language and version: elastic/apm-rum: 5.9.1 added via npm and bundled


we have the following setup with our React web application (client side rendered):
The application is build once as a standalone webpage and once as a JS package, that can be included into existing webpages.
The standalone webpage is served from one location, but for different domains. On page load, a configuration is fetched, based on the domain and parameters. This configuration describes how the application behaves.
The package contains a custom html element that is included into existing webpages with a set of parameters. Based on the parameters again a configuration is fetched.

Based on the configuration, we have different target locations for the APM RUM agent or might not monitor at all.
This means we cannot monitor the page load, since we don't have the full agent configuration yet.
Is here a way, such that the agent still records, but only starts sending after the full configuration is available.


Hi @mathiasmah,

Thanks for sharing the details of your setup!

Is here a way, such that the agent still records, but only starts sending after the full configuration is available.

At present, it's not possible to decouple what the agent records and what the agent sends. This happens because both behaviours start happening after the agent is initialized.

Although the RUM agent should be creating a PAGE_LOAD transaction even in your scenario since we use PerformanceObserver with buffered set to true performance metrics with, it's also true that just with performance metrics, but nothing else, like network requests, user interactions, etc.

Let me give you an example of what happens when you initialize the agent after a few seconds:


<!DOCTYPE html>
        <script src="http://localhost:3000/elastic-apm-rum.umd.min.js"></script>
        Sample app that will initiaze agent in five seconds...

            setTimeout(() => {
                    serviceName: "page-load-discuss-forum",
                    serverUrl: "http://localhost:8200/"

                console.log("agent initialised!!!!")

                elasticApm.observe("transaction:end", tr => {
                    console.log("tr", tr)
            }, 5000)

Screenshot with the PAGE_LOAD transaction details


Question from my side:

Would it be possible to send all the RUM information to a single endpoint? Something like a reverse proxy that sits between your APM Servers and the rum agent.

  1. you set that reverse proxy
  2. you make sure to initialize always the agent
  3. Your reverse proxy gets the request
  4. Based on the header of the requests (like origin) send the data to a particular APM server location

Not sure if that might help you!

You can add headers to the events the agent sends through the config apmRequest

Important: currently, using apmRequest config has a drawback that will be handled in future versions of the agent. The beaconing enhancement made in 5.11.0 will not work if you set apmRequest config since depends on XHR. I'm seeing you are using 5.9.0 so it shouldn't be a big deal for you at present.


                    serviceName: "page-load-discuss-forum",
                    serverUrl: "http://localhost:8200/",
                    apmRequest: ({ xhr }) => {
                        xhr.setRequestHeader('my-custom-header-1', 'value-1')
                        xhr.setRequestHeader('my-custom-header-2', 'value-2')

                        return true

Sorry that I cannot give you an "out-of-the-box agent" solution. I hope the proposed workarounds/strategies help you, though.

We will take this scenario into account for future enhancements (decoupling recording and event sending)


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