LCP is being captured only 3% of the time

[danielbeardsley]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.29

Framework Version

12.2.3

Link to Sentry event

https://sentry.io/organizations/ifixit/discover/results/?display=default&field=count%28%29&field=count_if%28measurements.lcp%2Cgreater%2C0%29&field=equation%7Ccount_if%28measurements.lcp%2Cgreater%2C0%29+%2Fcount%28%29&field=avg%28measurements.lcp%29&interval=1h&name=All+Events&project=6469069&query=event.type%3Atransaction+transaction.op%3Apageload&sort=-count%28%29&statsPeriod=14d&user=669438&yAxis=equation%7Ccount_if%28measurements.lcp%2Cgreater%2C0%29+%2Fcount%28%29&yAxis=count%28%29

Steps to Reproduce

1. Configure sentry in our next.js app and include BrowserTracing integration. Our config
2. Examine performance metrics in sentry.io (see link and screenshot below)

Expected Result

I expect all "pageload" transactions to have the LCP metric.

Actual Result

Only ~3% of our page pageload transactions have a recorded LCP. I've looked at all the issues regarding LCP but none of them quite capture that it's broken and recording so little data. Given the descriptions in the other issues, it seems to be about timing. If that's the case and we're missing all LCP events that happen after something, or missing all LCP events that happen before something, then surely the data is not to be trusted.

Note: We have traces sampling set to 0.5% and we are seeing the expected number of "transactions", but only a tiny % of those transactions have LCP.

[AbhiPrasad]

Hey, thanks for writing in. A part of this is that the LCP is firing after the transaction is finished - hence the data not being collected properly here.

This is a tricky problem, because if we artificially extend a transaction's duration, there is the danger that it won't be sent because user's navigate away, or the tab is backgrounded.

This is something we need to improve though, but not quite sure where to start. Will backlog, but any suggestions are appreciated.

[danielbeardsley]

This is a tricky problem, because if we artificially extend a transaction's duration, there is the danger that it won't be sent because user's navigate away, or the tab is backgrounded.

If "whether we send the LCP" is based on how long the LCP takes, then by definition the resulting data is unusable because it's not randomly sampled. Though, this is a more specific case of the general problem of if people leave your pages because they are slow-loading, then the same is true about all time-based measurements.

I'm not familiar with why a backgrounded tab impacts our ability to measure things, so I can't speak to that.

I think that having 100% untrustworthy measurements cause they aren't randomly sampled is far worse than missing out on a few % of the overall measurements from people who quickly navigate away.

[jarstelfox]

if we artificially extend a transaction's duration, there is the danger that it won't be sent because user's navigate away, or the tab is backgrounded.

One option: Send the transaction as normal. Allow an API to extend a page load transaction with extra data.

there is the danger that it won't be sent because user's navigate away, or the tab is backgrounded.

It looks like core does it's best to send with sendBeacon. Which is available on 95%+ of devices.

Is it possible to detect if send beacon is available and delay transactions until beforeunload? Otherwise, use the existing behavior.

[AbhiPrasad]

Thanks for the feedback @danielbeardsley and @jarstelfox.

Allow an API to extend a page load transaction with extra data

We do have this. You can extend the idleTimeout of your transactions (defaults to 1000ms) to get a chance to capture some additional data. We have heuristics to trim transactions, so this shouldn't artificially increase duration.

Is it possible to detect if send beacon is available and delay transactions until beforeunload

I think there was a reason why we stayed away from beacons (we don't use them to send performance monitoring data), but I can't recall why. Let me investigate.

[efarem]

There is another issue with LCP/CLS here calling report() here actually does nothing. because the underlying callback is skipped inside bindReporter.

The result is that LCP/CLS is only ever reported if the user clicks before the idleTimeout of 1s which is very unlikely. Shouldn't LCP/CLS be recorded without the need for interactions?

[AbhiPrasad]

We made change to address @efarem's comments in our latest release: https://github.com/getsentry/sentry-javascript/releases/tag/7.42.0

This should help improve LCP/CLS collection. Closing the issue for now as a result!

[RealOFF]

@AbhiPrasad Hello. Perhaps I don't understand something. But perhaps the problem of LCP not registering continues to occur in the latest version. In the case of my application, we have a loading splash screen in the SPA that is added to index.html. This splash screen does not contain elements that can be registered with LCP (only inline SVG). This splash screen is displayed until the resources and data from the backend are loaded. As I understand sentry log LCP in "pageload" transaction and "pageload" transaction happening after DOM "load" event but in this time the splash screen is displayed that not contain elements for LCP. May be you know some solution for this situation?

[AbhiPrasad]

@RealOFF you can try adjusting your idleTimeout if you're finding the LCP is not getting captured in time in the transaction.

[RealOFF]

@AbhiPrasad Thank you, that helped me.