Skip to content

fix(performance): Fix LCP not getting picked up on initial pageload transaction by setting reportAllChanges to true #12360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 6, 2024

Conversation

edwardgou-sentry
Copy link
Contributor

There's currently an issue where initial pageloads frequently do not capture LCP. This is because LCP is only reported when there is a user interaction on the page, or the user triggers a pagehide. Either of these events must happen within the initial pageload transaction boundary for the LCP value to be capture.

Previously, in v7, we added custom code the the vendored LCP library to force report when closing the initial pageload transaction. This custom code was removed when we moved to v8.

In this change, we are using the reportAllChanges option, so that any time a new LCP is detected, we add the LCP value to the initial pageload transaction, as long as the transaction has not closed yet.

This solution is no worse than the previous solution in v7 because:

  • The risk of reporting an early LCP is the same because in either situation this is completely dependant on when the pageload transaction closes, which this PR does not change.

    • using reportAllChanges, we always go with the longest LCP recorded
  • We avoid introducing custom code to the vendored LCP library, and we use the intended reportAllChanges, so there's less risk of introducing a regression the next time we update the library.

It's not a perfect solution, but I think it's reasonable to go with this until we come up with a better one (specifically to resolve the span/transaction boundary issue).

Copy link
Contributor

github-actions bot commented Jun 5, 2024

size-limit report 📦

Path Size
@sentry/browser 22 KB (0%)
@sentry/browser (incl. Tracing) 33.05 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay) 68.65 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.94 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.7 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.82 KB (+0.01% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback, metrics) 86.66 KB (+0.01% 🔺)
@sentry/browser (incl. metrics) 26.18 KB (0%)
@sentry/browser (incl. Feedback) 38.16 KB (0%)
@sentry/browser (incl. sendFeedback) 26.59 KB (0%)
@sentry/browser (incl. FeedbackAsync) 31.14 KB (0%)
@sentry/react 24.77 KB (0%)
@sentry/react (incl. Tracing) 36.08 KB (+0.01% 🔺)
@sentry/vue 26 KB (0%)
@sentry/vue (incl. Tracing) 34.87 KB (+0.01% 🔺)
@sentry/svelte 22.13 KB (0%)
CDN Bundle 23.35 KB (0%)
CDN Bundle (incl. Tracing) 34.73 KB (+0.02% 🔺)
CDN Bundle (incl. Tracing, Replay) 68.67 KB (+0.01% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) 73.83 KB (+0.01% 🔺)
CDN Bundle - uncompressed 68.6 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed 102.8 KB (+0.03% 🔺)
CDN Bundle (incl. Tracing, Replay) - uncompressed 212.73 KB (+0.02% 🔺)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 225.2 KB (+0.01% 🔺)
@sentry/nextjs (client) 35.45 KB (+0.01% 🔺)
@sentry/sveltekit (client) 33.68 KB (+0.01% 🔺)
@sentry/node 115.83 KB (+0.01% 🔺)
@sentry/node - without tracing 94.91 KB (0%)
@sentry/aws-serverless 104.12 KB (0%)

@lforst
Copy link
Member

lforst commented Jun 5, 2024

I went through the same exercise with CLS before: #11934.

Should we think about doing the same exact thing for FID too?

@edwardgou-sentry
Copy link
Contributor Author

I went through the same exercise with CLS before: #11934.

Should we think about doing the same exact thing for FID too?

Took a quick look at the FID code. Looks like FID is always reported: https://github.com/getsentry/sentry-javascript/blob/develop/packages/browser-utils/src/metrics/web-vitals/getFID.ts#L50

So reportAllChanges would probably have no effect here

Copy link
Member

@mydea mydea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this makes sense to me!

@AbhiPrasad AbhiPrasad merged commit 039aa1d into develop Jun 6, 2024
105 checks passed
@AbhiPrasad AbhiPrasad deleted the egou/fix/report-all-lcp-changes branch June 6, 2024 14:55
billyvg pushed a commit that referenced this pull request Jun 10, 2024
…ransaction by setting reportAllChanges to true (#12360)

There's currently an issue where initial pageloads frequently do not
capture LCP. This is because LCP is only reported when there is a user
interaction on the page, or the user triggers a pagehide. Either of
these events must happen within the initial pageload transaction
boundary for the LCP value to be capture.

Previously, in v7, we added custom code the the vendored LCP library to
force report when closing the initial pageload transaction. This custom
code was removed when we moved to v8.

In this change, we are using the `reportAllChanges` option, so that any
time a new LCP is detected, we add the LCP value to the initial pageload
transaction, as long as the transaction has not closed yet.

This solution is no worse than the previous solution in v7 because:
- The risk of reporting an early LCP is the same because in either
situation this is completely dependant on when the pageload transaction
closes, which this PR does not change.
- using `reportAllChanges`, we always go with the longest LCP recorded

- We avoid introducing custom code to the vendored LCP library, and we
use the intended `reportAllChanges`, so there's less risk of introducing
a regression the next time we update the library.

It's not a perfect solution, but I think it's reasonable to go with this
until we come up with a better one (specifically to resolve the
span/transaction boundary issue).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants