Cannot active RUM debug for Angular

Elastic Observability APM
,
1

Hello,

I'm doing a POC with ELK Cloud's APM and an Angular app that uses SpringBoot services.

For a call to an api that takes a minute, the RUM lib doesn't report anything at all. First concern.

To understand this I try to activate the debug in the JS console but without success.

This is a basic app for the POC, fresh installation with the latest version of the NPM package (2.1.4).

The config is at its simplest:

const apm = service.init({
  serviceName: 'angular-app',
  serverUrl: 'https://...........us-east4.gcp.elastic-cloud.com:443',
  distributedTracingOrigins: [environment.apiUrl],
  logLevel: 'debug'
});

The console remains empty...

Thank you !

2

Hi @nicesp,

Thanks for reaching out!

I have a couple of questions:

  • What version of angular are you using?
  • Are you seeing network requests coming from the agent in your browser network tab? (events/ endpoint)
  • Is this behaviour reproducible in more than one browser?

For the description it seems that maybe the agent is disabled for some reason

What is the output of the following statements?:

console.log(apm.isEnabled())
console.log(apm.isActive())

On the other hand, the following code checks if some feature is not available:

function isPlatformSupported() {
  if (typeof window === 'undefined') {
      console.log("window not defined")
      return
  }
    
  var xhr = new window.XMLHttpRequest()
  if (!('withCredentials' in xhr)) {
    console.log("CORS is not supported")
      return
  }

  if (typeof Set !== 'function') {
    console.log("Set is not a function")
      return
  }

  if (typeof JSON.stringify !== 'function') {
    console.log("JSON.stringify is not a function")
      return
  }

  if (typeof window.performance.now !== 'function') {
     console.log("window.performance is not a function")
      return
  }

  console.log("all checks passed properly")
}
isPlatformSupported()

Let me know if this helps you

Thanks,
Alberto

3

Hi @Alberto_Delgado,

Thank you for the answer.

  • I use Angular 13
  • Yes, the agent work, events are sents, data and trace are displayed in ELK. Only about once in 10 or 20, when a particular call to my API takes (abnormally) one minute (with sucess), the events are not sent at all.
  • I can reproduce on Brave (last version) or Chrome (last version)

I confirm that, in the event that the events are not sent, the checks have passed and the apm is active.

Thanks !

4

Hi @nicesp,

The RUM agent ignores the debugLevel in prod environments:

process.env.NODE_ENV === 'production' // does not add debug logic

That's why your JS console is empty. In order to see the logs you may need to create a bundle with a non-production NODE_ENV.

In the following link explains why: Install the Agent | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic

--
On the other hand, managed transactions such as http-requests have a threshold of 60 seconds, if the transaction duration is greater than that, it will be discarded by the agent.

Let me know if this helps you

Thanks,
Alberto