Custom transaction names with RUM

[elastichooch]

If you are asking about a problem you are experiencing, please use the following template, as it will help us help you. If you have a different problem, please delete all of this text

Kibana version:
7.2

Elasticsearch version:
7.2

APM Server version:
7.1

APM Agent language and version:
RUM 4.2

Is there anything special in your setup? For example, are you using the Logstash or Kafka outputs? Are you using a load balancer in front of the APM Servers? Have you changed index pattern, generated custom templates, changed agent configuration etc.

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):
I have an angular based UI and am using typescript. I called init on apm and got some traces to show up in Kibana. I wanted to have my transactions have names other than Unknown so I tried to follow https://www.elastic.co/guide/en/apm/agent/js-base/current/custom-transaction-name.html. I tried it by adding the pathname split and setting the pageLoadTransactionName to the pageName. I tried setting the pageLoadTransactionName as part of the config that is passed to init. The first page to load has a transaction name of '/'. All subsequent transaction names are "Unknown".

How can I have the transaction names be set to a piece of the url path?

Errors in browser console (if relevant):
none

Provide logs and/or server output (if relevant):
n/a

[vigneshshanmugam]

Hi,

Apologies for the delay in responding. The config pageLoadTransactionName only works for the first transaction which is of type page-load and does not work for subsequent transactions since they belong to type route-change.

What you can do right now is to use out Events API (undocumented right now - https://github.com/elastic/apm-agent-rum-js/issues/389), You can listen for these events and change the transaction names based on location path.

apm.observe('transaction:end', (tr) => {
  if (tr.name === 'Unknown') {
    tr.name = window.location.pathname
  }
})

We are also working on Angular Integration which would make it easier to see the transaction names setting properly to the route names. You can track it here https://github.com/elastic/apm-agent-rum-js/pull/384

Any feedback would be appreciated, Also let us know if you have any questions.

Thanks,
Vignesh