Observability - APM RUM user experience data on SPA route-change

[john_b (john)]

I have a question that is a bit similar with APM is working, but not User Experience

I'm using the rum agent for a VueJS (nuxt) SPA app and only getting experience data on page-load events and not on route-change.

Is this something expected as mentioned in the post above? Is there any future plan to support experience metrics on route-change events too?

Thanks

[Alberto_Delgado]

Hi @john_b,

Thanks for taking the time to write your question!

I'm using the rum agent for a VueJS (nuxt) SPA app and only getting experience data on page-load events and not on route-change.

I'm assuming that on the type transaction dropdown the route-change option is not available. Is that right?

A few more questions:

• What version of the RUM and Vue agent are you using?
• Are you using the RUM integration for Vue? If you use Vue 2, you would need to use this one, and if you use Vue 3 then a newer one, like the latest one

events and not on route-change.

Is your SPA performing any network request (fetch/xhr) when you navigate to a different route?

Current version of the agent only reports a route-change transaction if there is a span related and that only happens if there is network activity (fetch/xhr) which the agent use to automatically create the span/spans.

If that's not your case, you would need to manually add a span to such transaction.

You can leverage advantage of the vue-router lifecycle and create the span there. There is something essential to keep in mind, when the url changes the agent detect that (since it instruments pushState api) the agent creates the route-change transaction.

Thanks to such behaviour you could write something like this:

// within the lifecycle method where the route change starts 
/// ...
const transaction = elasticApm.getCurrentTransaction()
if (transaction) {
   const span = transaction.startSpan("your-span-name", "your-span-type", { blocking: true })
}

// within the lifecycle method where the route change ends
// make sure the span you created is reachable and then...
/// ...
   span.end()

By the way, when checking the transaction returned by elasticApm.getCurrentTransaction() you might find that the type is user-interaction, that happens because the route change has been triggered because of a click, the agent will redefine that type of that transaction to route-change automatically, such behaviour don't represent any problem.

Hope this gives you some kind of help and guidance.

Also I wanted to say, that we are having conversations within the team about how to improve the support for this in future versions of the agent.

Cheers,
Alberto

[john_b (john)]

Hi @Alberto_Delgado,

Thanks so much for getting back to me.

I have a nuxt/vuejs2 app and I am using the [proposed RUM integration] for vue (though I've also tried the latest package version without any change). Elastic stack version is 7.17.6.

I was talking specifically about the User Experience dashboard reporting - I think the rest of the APM reporting looks quite OK. (every route-change I want to monitor performs a network request)

So in my "Observability" section in Kibana, in APM reports I can see all the page-load and route-change (and http-requests) metrics just fine.

Yet in the User Experience dashboard, the only URLs available to filter by and see Core Web Vital metrics are the page-load ones, not the route-change urls.

In my local env, when I have console logging to debug, I can see the reported payloads are different - the page-load event payload includes CWV info like:

{
   "name":"/someroute",
   "type":"page-load",
   "options":{
   ...
   "marks":{
      "agent":{
         "largestContentfulPaint":1723,
         "firstContentfulPaint":1753,
         "timeToFirstByte":1557,
         "domInteractive":1656,
         "domComplete":3350
      },
....
"experience":{
      "tbt":1109,
      "cls":0.0024246045060717573,
      "longtask":{
         "count":4,
         "sum":1365,
         "max":1121
      }
   },

While in the payload for an event of "type":"route-change", I can see no sign of CWV related data.

Is this expected? Is there some way to overcome this limitation? It's a core need for us to be able to monitor CWV for all types of user navigation, since this is what google does to calculate the score.

Thanks again for your time!

[vigneshshanmugam]

Hi @john_b,

Apologies for the delay.

Not every CWV metrics are applicable for all navigations. The hard navigation (page-load) is the only view (transaction in our case) that contains all the necessary CWV metrics like FCP, LCP, CLS etc.

For other Soft navigations (route-change) - The browsers does not report any data for FCP, LCP as there is no heuristic at the moment to calculate those. However, its being actively worked on by the Chrome team. Once it lands - we will add support for those metrics as well.

This is the reason, the UX app excludes all other transaction types except page-load to be able to provide consistent experience.

Please do let us know if you need anything else.

Thanks,
VIgnesh