vercel
PerformanceNavigationTiming "navigate" event does not fire for app-router to app-router navigations
Link to the code that reproduces this issue
https://github.com/tavvy/nextjs-navigate-event-reproduction
To Reproduce
- https://nextjs-navigate-event-reproduction.vercel.app/
- navigate from app rotuer -> app router
- check console log for CWV logs
- No PerformanceNavigationTiming "navigate" events fired, so no TTFB, FCP etc
Current vs. Expected behavior
App router -> App router page navigations should fire PerformanceNavigationTiming "navigate" events so that web vital metrics are collected.
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:41:28 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T6000
Binaries:
Node: 18.18.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.9.2
Relevant Packages:
next: 14.0.4-canary.5
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
App Router
Additional context
App router -> App router navigations do not fire the "navigate" PerformanceNavigationTiming event.
Pages -> App router and App router -> pages are not impacted.
Please see the reproduction deployment: https://nextjs-navigate-event-reproduction.vercel.app/ Click around and view console logs
I used the vanilla web vitals script https://github.com/GoogleChrome/web-vitals as I want to demonstrate the problem is "outside" of the vercel web vital hook implementations. The same issue is present in the custom vercel / next web vital hook implementations.
I've used next/link but the same issue is present with router.push() (my main use case).
The main issue is this drastically reduces the number of CWV data points that will be collected for a project. We went from 10,000s per/hour to just 10s! I understand these metrics just wrap browser apis. My concern is this will reflect how the Google CrUX data is collected and site page scores are going to be impacted as the sample size is so small and thus variance in the data is far greater .
I have also observed this with useRouter.refresh():
useEffect(() => {
new PerformanceObserver((list) => {
if (
(list.getEntries() as PerformanceNavigationTiming[]).find(
({ type }) => type === "reload"
)
) {
console.log("reload"); // only prints on browser refresh, not `useRouter.refresh()`
}
}).observe({ type: "navigation", buffered: true });
}, []);
confirmed still bugged, corewebvitals not returning navigation data, only reload
Experiencing the same issue. Was anyone able to get around this to detect page refreshes?
