cloudflare / cloudflare/vinext

[nextjs-tracker] Align useReportWebVitals with web-vitals v6 soft-navigation metrics

Open
#3,166 0 comments 0 reactions 0 assignees View on GitHub
nextjs-tracking
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.