Capture route change transactions

There are multiple approaches for capturing the route change transactions:

1. Instrumenting the history API
2. Providing framework-specific instrumentation

The first solution would provide support for a wide range of frameworks (potentially with some work on the user side) but we don’t have access to the route name, we only have the URL which might contain IDs. To solve this issue we can provide onStart and onEnd event listeners in the config options for transaction start and transaction end respectively, as an example consider the following:

Please note that users don’t need to provide both event listeners.

apm.init({
   onStart: (transaction)=>{ 
      transaction.name= 'transactions-name' 
      return transaction
   },
   onEnd: (transaction)=>{ 
      transaction.name= 'transactions-name' 
      return transaction
   }
})

The drawback for the second approach is that we need to provide instrumentation for each framework.

Potential pitfalls for react-route:

• Multiple routes could match with any route change, but we should only create one transaction for the whole route change (need to investigate this kind of use-cases)

Currently, I think we should take both approaches, the first approach would serve as a base for the second approach. i.e. a framework specific instrumentation can register event listeners for transactions and fix the transaction name if necessary.

Update: The above event listeners are not useful for instrumenting react-router therefore we should provide react specific instrumentation.

[hmdhk]

@tbragin , at first we decided to take framework-agnostic approach but in a lot of cases usage would be harder for user, so we will have to provide framework specific integrations. We’re starting with React, but Angular will follow after that.

[hmdhk]

@freezy, Thanks for reaching out!

if your application is using the history API to manage route changes, the lates version of the RUM agent should already capture route changes automatically. However, we can not capture the correct route name at the level we instrument the history API, therefore, you should use the Filter API to set the correct route name on the transaction before it is sent to the APM server.