cloudflare / cloudflare/vinext
[nextjs-tracker] Align useReportWebVitals with web-vitals v6 soft-navigation metrics
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 406
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 120
Description
## Next.js Change
**Commit:** [`fb4c498`](https://github.com/vercel/next.js/commit/fb4c498852c0884cbc356cac4c2a6efec98da50f)
**PR:** [#97232](https://github.com/vercel/next.js/pull/97232)
## What changed
Next.js upgraded its vendored `web-vitals` package to v6, removed FID reporting, and enabled soft-navigation reporting for CLS, INP, and LCP. Reported metrics now identify the navigation where they occurred through fields including `navigationURL`, enabling route attribution after client-side navigation. The public Web Vitals metric union no longer includes `FID`.
## Impact on vinext
vinext exposes the Next.js `useReportWebVitals` API and must preserve its reporting and type contract. Without the v6 behavior, App Router applications cannot attribute metrics to soft navigations, and vinext can continue to expose the obsolete FID metric.
## Acceptance criteria
- [ ] Upgrade the Web Vitals integration to an upstream v6-compatible implementation.
- [ ] Enable soft-navigation reporting for CLS, INP, and LCP when the browser supports the required Performance APIs.
- [ ] Include navigation attribution, including `navigationURL`, in reported metrics.
- [ ] Remove FID from the public metric union and do not emit FID reports.
- [ ] Add production browser coverage for initial-load and soft-navigation reports, including route attribution.
## Related
- Upstream coverage: `test/e2e/app-dir/app/useReportWebVitals.test.ts`
- Related upstream issue: [#97161](https://github.com/vercel/next.js/issues/97161)
Contributor guide
Research direction
Start by locating vinext's useReportWebVitals implementation and compare its public metric types and reports with the upstream v6 behavior described in the issue. Read test/e2e/app-dir/app/useReportWebVitals.test.ts, then add production browser coverage for initial-load and soft-navigation reports, including route attribution; done means FID is absent and navigationURL is reported where supported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, typescript
- Domain
- frontend, performance, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100