reportWebVitals Never gets invoked with Custom Metrics

[zotijs]

Summary

Next: 14.0.4
Router: Page Router

Following the docs for analytics I have discovered that Next.js' custom metrics are never being passed as a metric in useReportWebVitals handler.

_app.tsx:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useReportWebVitals } from "next/web-vitals";

export default function App({ Component, pageProps }: AppProps) {
  useReportWebVitals(console.log);
  return <Component {...pageProps} />;
}

• Next.js-hydration
• Next.js-route-change-to-render
• Next.js-render

The implementation seems to not handle those custom metrics.

Am I missing something?

Thanks in advance.

Additional information

No response

Example

No response

[zotijs]

A reportWebVitals function exported from _app seems to also handle the custom metrics

export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric);
}

[zotijs]

Docs clearly state that custom metrics can be handled from reportWebVitals. Closing this discussion

[pixelpax]

@zotijs not sure if this has changed since you posted, but the docs explicitly state that this should be handled from useReportWebVitals now and doesn't even describe exported function method anymore.

Yet next still does not call useReportWebVitals for custom metrics.

I really think this is either a bug, or a major documentation inaccuracy

Here's the code snippet:

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'Next.js-hydration':
        // handle hydration results
        break
      case 'Next.js-route-change-to-render':
        // handle route-change to render results
        break
      case 'Next.js-render':
        // handle render results
        break
      default:
        break
    }
  })
 
  return <Component {...pageProps} />
}

from https://nextjs.org/docs/pages/api-reference/functions/use-report-web-vitals#custom-metrics

[imteekay]

From what I explored, the custom metrics still work for Pages Router, but they are not tracked anymore for App Router. As you wrote, the docs talks about the custom metrics (for Pages Router), but if you take a look at the App Router docs, there's no reference to these custom metrics anymore.

The exported reportWebVitals function was also dropped from App Router, unfortunately.