apm-rum-angular load-page transaction cannot get route path correctly

[a-fly-fly-bird]

I want get all page-load transactions, and its name is route path name by default. I saw some strange transactions name which do not be filled correctly.

For example, if my Route.ts is:

const routes: Routes = [
  {
    path: ':a/:b/:c:d',
    component: 'hello',
  },
];

this.router.routerState.root.firstChild.routeConfig.path can only get something like /:a/:b/:c:d but not the real recognized one(for example: /a/b/c/d)

I read the source code, and find the key code is: https://github.com/elastic/apm-agent-rum-js/blob/13fc87b5578e01ca46d7fbb1fd7867ff2ff8db12/packages/rum-angular/src/apm.service.ts#L88

I found that this.router.events can get the right value but this.router.routerState.root.firstChild cannot. Is there anything wrong with my configuration or initiation? Can you please check it? Thx.

reference

• ActivatedRoute
• RouterEvent

[vigneshshanmugam]

Thanks for raising the question. We are not using the resolved URL instead using the routed paths mainly to work around the explosion with unique transaction names. The slug pattern used on your example :a/:b/:c:d could be translated to anything and would end up creating more transactions which would lead to less useful traces on the Kibana APM application.

Check our docs on why we do it on the docs page - https://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transaction-name.html#custom-transaction-name

A common pattern to name the transactions would be to use the current URL (window.location.href). However, it creates too many unique transactions (blog titles, query strings, etc.) and would be less useful when visualizing the traces in Kibana APM **UI.**

By using the slug pattern, we can group the group these transactions on the UI with the same transaction name and can use the context.page.url to dig deeper in to specific views. Hope this helps, please do let us know if you have more questions.

[a-fly-fly-bird]

But if it's as you said, there shouldn't be any specific transactions when I switch to page-load or route-change in APM tab in Kibana.

However, when I enter a page and switch to other url, it will not only exists the slug pattern but also the real ones. For example, the slug pattern is /:year/:month/:day/, I enter /2023/12/12/ and then switch to /2022/10/01/, it will exists following transaction list:

/:year/:month/:day/
/2023/12/12/
/2022/10/01/

Is it right? Thank you for your patience.

[vigneshshanmugam]

If you visit 2023/12/12 and /2022/10/01, both of these would be grouped under the /:year/:month/:day/ transaction on the Kibana APM application. They can be distinguishable by the transaction.context.page.url, if you are not seeing this behaviour then there is a bug. If you can create a repo, that would be great. Thanks.

[a-fly-fly-bird]

Got it. I'll try.

[a-fly-fly-bird]

I'm trying to find out the behavior I mentioned in this issue, meanwhile I think this is a compromise solution. I think some people may not need slug routing feature, so I add a new feature to turn on/off. I've commit a PR: https://github.com/elastic/apm-agent-rum-js/pull/1471. How about this?

[vigneshshanmugam]

@a-fly-fly-bird You could already do that without the PR using the Observers. We dont want this to be a configuration mainly because it will create too many transactions for the APM UI which would not be so much useful for debugging performance issues.

apm.observe('transaction:end', function (transaction) {
   transaction.name = window.location. pathname
})

[a-fly-fly-bird]

Thank you so much! Have a nice day.