How to record FCP and LCP while changing the routes in react for a single page applications

Elastic Observability APM
1

Is it possible to record domComplete matrix such as FCP and LCP in transaction marks matrix when the we are not reloading a page and the component is changing with react routing?

2

Hi @piyush.sarin,

FCP and LCP are load responsiveness metrics which means they are reported only for hard navigations such as Page load or Hard Refresh of the current tab.

For route change navigations, these metrics are not reported by the browser and we would be able to capture such metrics for those events.

More details - Supported Technologies | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic

Thanks,
Vignesh

3

Thanks @vigneshshanmugam .
Could you please clarify for recoding the route change time do we need to create a custom transaction with transaction.startSpan and transaction.end() or we have a by default method to measure route change time?

4

RUM agent tries to account for all network activity when doing a route change, but if there any lazy loaded resources for a particular route change request then the agent might miss it a specific scenario, For these scenarios I would recommend using a custom transaction and waiting for all associated network request to get completed before ending the transaction.

Docs - Custom Transactions | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic

Thanks,
Vignesh

5

Thank You @vigneshshanmugam

6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.