nextjs - ✅(Solved) Fix `useReportWebVitals` (LCP) Intermittently Not Reporting When User is Idle [1 pull requests, 4 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86291Fetched 2026-04-08 02:11:39
View on GitHub
Comments
4
Participants
3
Timeline
17
Reactions
0
Author
Timeline (top)
commented ×4subscribed ×4referenced ×3mentioned ×2

Fix Action

Fix / Workaround

Test 2 (Success Scenario - Interactive User) This demonstrates the required workaround:

PR fix notes

PR #15: Ensure LCP is reported for idle users

Description (problem / solution / changelog)

What?

Adds handling for visibilitychange and pagehide events to ensure the largest contentful paint (LCP) metric is reported when a page becomes hidden or is being unloaded. This resolves cases where LCP was not reported for idle users.

Why?

Users who didn’t interact with a page before it was hidden or unloaded were unable to get accurate LCP metrics, which impacted performance reporting.

How?

  • Tracks LCP entries using the Performance API
  • Finalizes LCP reporting on visibilitychange (visibilityState set to "hidden") or pagehide
  • Avoids duplicate reporting by keeping track of reported LCP status
  • Reports LCP using renderTime or loadTime from LCP entries for accuracy

Closes NEXT- Fixes #86291

Changed files

  • packages/next/src/client/web-vitals.ts (modified, +104/-7)
  • test/e2e/app-dir/app/useReportWebVitals.test.ts (modified, +52/-0)

Code Example

npm install --legacy-peer-deps

---

npm run dev

---

From the reproduction:

Operating System:
  Platform: linux
  Arch: x64
  Version: #88-Ubuntu SMP PREEMPT_DYNAMIC Sat Oct 11 09:28:41 UTC 2025
  Available memory (MB): 39737
  Available CPU cores: 8
Binaries:
  Node: 20.11.0
  npm: 11.4.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.0.2-canary.24 // Latest available version is detected (16.0.2-canary.24).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

However we're seeing this behaviour in our NextJS apps (which have a wide range of versions)
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/samtbg/userReportWebVitalsMissingLCP

To Reproduce

  1. Clone the linked repository and run the necessary package install command:
npm install --legacy-peer-deps
  1. Start the development server:
npm run dev
  1. Navigate to http://localhost:3000.

  2. Open the browser DevTools Console and clear the logs.

Test 1 (Failure Scenario - Idle User) This demonstrates the missing LCP report:

Reload the page.

Wait 12 seconds without moving or clicking the mouse.

Result: The console will show the "10-second timer fired" message. The OTel flush runs, and the log will confirm TTFB and FCP were sent, but LCP is missing.

Test 2 (Success Scenario - Interactive User) This demonstrates the required workaround:

Reload the page.

Wait 5 seconds (the LCP element is visible).

Click once anywhere on the white space. The console should show the LCP metric recorded immediately after the click.

Wait for the 10-second timer to fire (5 more seconds).

Result: The console will successfully show TTFB, FCP, and LCP being sent.

Current vs. Expected behavior

Current Behavior (Observable in the Console):

Test 1 (Failure): The console immediately logs the recording of TTFB and FCP. At approximately 10 seconds, the console logs the "10-second timer fired" and the OTel flush runs. The final flush log shows that LCP is missing from the buffer. The useReportWebVitals callback for LCP never executes.

Test 2 (Success): When a click on the page occurs, LCP is recorded and reported in the console

Expected Behaviour

The LCP is recorded/reported irregardless of user interaction

Provide environment information

From the reproduction:

Operating System:
  Platform: linux
  Arch: x64
  Version: #88-Ubuntu SMP PREEMPT_DYNAMIC Sat Oct 11 09:28:41 UTC 2025
  Available memory (MB): 39737
  Available CPU cores: 8
Binaries:
  Node: 20.11.0
  npm: 11.4.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.0.2-canary.24 // Latest available version is detected (16.0.2-canary.24).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

However we're seeing this behaviour in our NextJS apps (which have a wide range of versions)

Which area(s) are affected? (Select all that apply)

Performance

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

extent analysis

TL;DR

The issue can be mitigated by ensuring user interaction, such as a click, to trigger the recording of the Largest Contentful Paint (LCP) metric.

Guidance

  • The LCP metric is not being recorded in the absence of user interaction, suggesting that the useReportWebVitals callback for LCP is not being executed without user input.
  • To verify the issue, run the provided test scenarios and observe the console logs to confirm that LCP is missing without user interaction.
  • Consider adding a programmatic trigger to simulate user interaction, such as a synthetic click event, to ensure LCP is recorded consistently.
  • Review the Next.js configuration and version to ensure compatibility with the useReportWebVitals hook and LCP metric reporting.

Example

No code snippet is provided as the issue is more related to the behavior of the useReportWebVitals hook and LCP metric reporting rather than a specific code implementation.

Notes

The issue seems to be specific to the next dev stage and may be related to the way Next.js handles user interaction and metric reporting. Further investigation into the Next.js configuration and version may be necessary to determine the root cause.

Recommendation

Apply a workaround, such as simulating user interaction, to ensure consistent recording of the LCP metric, as the root cause of the issue is not immediately clear and may require further investigation.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix `useReportWebVitals` (LCP) Intermittently Not Reporting When User is Idle [1 pull requests, 4 comments, 3 participants]