Route change without XHR shows longer route time

[sundarv85]

When there are no XHR within a route change, then the route-change transaction is marked as completed only when the next route change starts.

So we see very long route change timings, but the real route change has completed already and when the user proceeded to the next route change start event, the previous route change timing is now calculated.

[devcorpio]

@sundarv85,

I reproduced the scenario that you described. When it comes to SPAs the current implementation is not taking it into consideration.

For that transaction to finish when expected, the agent requires to detect a xhr/fetch request. Although if you perform a click in any element with a click eventListener attached that transaction will end as well.

We will discuss about an approach to solve this situation. Thanks for bringing this to our notice.

[vigneshshanmugam]

@sundarv85 Can you share that specific route change transaction. Also, Are you using any framework instrumentation (React, Vue etc) or just vanilla SPA using history-change events?

The first case, we do solve this already by relying on the signal from the underlying routers (react-router, vue-router respectively. For the other cases, we don't have any signal to identify when the route change ends as we listen to all network activity on the page and wait for the next signal to close the transaction.

The only way for now to solve this is to give explicit hints to the current transaction. You can do so by two ways

Task API

1. When SPA navigation begins

const tr = apm.getCurrentTransaction()
tr && tr.addTask("id")

2. when SPA navigation ends

const tr = apm.getCurrentTransaction()
tr && tr.endTask("id")
// If there are no pending tasks in that transaction, it will be closed immediately. 

Closing the active transaction on navigation complete

You can also end the transaction on navigation completion as you know exactly when the navigation finishes for a given route.

const tr = apm.getCurrentTransaction()
tr && tr.end() // any active span would be truncated and included as truncated spans as part of the transaction