Elastic APM RUM JS Agent - Grouping http-request transactions

[chandra2037 (Chandra)]

Kibana version : 7.4.0

Elasticsearch version : 7.4.0

APM Server version : 7.4.0

APM Agent language and version : @elastic/apm-rum-angular 0.4.0. Angular 8.2.14.

Fresh install or upgraded from other version? Fresh

Is there anything special in your setup? Followed the Angular Integration instructions

Thanks to the new APM RUM Angular release v0.4.0, able to capture the standalone Ajax requests as http-request transaction type. Describing my question below:

URL's in our application follows something like

https://test.org/api/v1/testservice/testendpoint/id/

APM RUM Agent reporting standalone http-request transactions as

GET https://test.org/api/v1/testservice/testendpoint/test-id1/
POST https://test.org/api/v1/testservice/testendpoint/test-id1/

Is there any way to group all http-request transactions for the same endpoint, for the above example it should be like

https://test.org/api/v1/testservice/testendpoint/
or
/testservice/testendpoint/

Without grouping, APM view is getting cluttered large number of same endpoint transactions with different ids.

Thank you for any suggestions.

Regards,
Chandra

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @chandra2037,

Thanks for using our latest release.
That's a good suggestion. We have considered resolving these types of issues in different layers of our product, e.g. in the APM UI. I've also created an issue to address this problem in the agent itself.

In the meantime, you can modify any transaction by registering an event listener, for example:

apm.observe('transaction:end', function (transaction) {
  if (transaction.type === 'http-request') {
    let url = transaction.name.split(' ')[1]
    transaction.name = url.split('/').slice(0,-1).join('/')
  }
})

Hope this helps.

Cheers,
Hamid

[chandra2037 (Chandra)]

Thank you @Hamidreza. As you mentioned, we will use event listener. This is very helpful.

Regards
Chandra