PerformanceNavigationTiming "navigate" event does not fire for app-router to app-router navigations

[tavvy]

Link to the code that reproduces this issue

https://github.com/tavvy/nextjs-navigate-event-reproduction

To Reproduce

1. https://nextjs-navigate-event-reproduction.vercel.app/
2. navigate from app rotuer -> app router
3. check console log for CWV logs
4. 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 .

[sohrab-]

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 });
}, []);

[mirulnasir]

confirmed still bugged, corewebvitals not returning navigation data, only reload