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

**URL:** <https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113>\
**Category:** APM\
**Tags:** ui\
**Created:** [August 20, 2021, 6:21pm UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113 "2021-08-20T18:21:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![piyush.sarin](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@piyush.sarin](https://discuss.elastic.co/u/piyush.sarin)\
**Post date:** [August 20, 2021, 6:21pm UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/1 "2021-08-20T18:21:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 20, 2021, 8:53pm UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/2 "2021-08-20T20:53:26Z")

</div>

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](https://www.elastic.co/guide/en/apm/agent/rum-js/current/supported-technologies.html#user-centric-metrics)

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![piyush.sarin](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@piyush.sarin](https://discuss.elastic.co/u/piyush.sarin)\
**Post date:** [August 23, 2021, 5:21am UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/3 "2021-08-23T05:21:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 24, 2021, 10:25pm UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/4 "2021-08-24T22:25:04Z")

</div>

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](https://www.elastic.co/guide/en/apm/agent/rum-js/current/custom-transactions.html)

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![piyush.sarin](https://avatars.discourse-cdn.com/v4/letter/p/c67d28/32.png) [@piyush.sarin](https://discuss.elastic.co/u/piyush.sarin)\
**Post date:** [August 25, 2021, 5:55am UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/5 "2021-08-25T05:55:21Z")

</div>

Thank You @vigneshshanmugam

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 15, 2021, 1:55am UTC](https://discuss.elastic.co/t/how-to-record-fcp-and-lcp-while-changing-the-routes-in-react-for-a-single-page-applications/282113/6 "2021-09-15T01:55:49Z")

</div>

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