Utilize CustomEvent Instead of Calling Exported reportWebVitals

[ragingwind]

Goals

1. Enable receiving webvital events in any components
2. Enable useReportWebVitals to receive Next.js custom events

Background

Currently, while hydrating on the local side, calling mod.reportWebVitals(webVitals), we are required to export reportWebVitals in _app.js. This approach has limitations when working with React components and hook, as reportWebVitals functions independently without any access to React component props. Consequently, there is a lack of information integration between props and webvital data. One thing I've concerned that is performance issues what I couldn't notice.

Proposal

Using custom event for web-vital which allow us get web-vital and next.js custom matrix at any component and hooks

AS-IS

//https://github.com/vercel/next.js/blob/a06775cdf33de747710aaffc339fbed3711d0991/packages/next/src/client/index.tsx#L837
mod.reportWebVitals(webVitals)

TO-BE

window.dispatchEvent(new CustomEvent('web-vital', {
    details: webVitals
});

Now, we can make a new hook for reportWebVitals

function useReportWebVitals(reportWebVitalsFn) {
    useEffect(() => {
        const handleWebVitalReport = (event) => {
            const { detail } = event;
            
            reportWebVitalsFn && reportWebVitalsFn(detail);
        }
        window.addEventListener('web-vital', handleWebVitalReport);
        return () => {
            window.removeEventListener('web-vital', handleWebVitalReport);
        }
    }, [reportWebVitalsFn]);
}

And, we can use it any component not only app

const MyAnalytics = (props) => {
    useReportWebVitals(vital => {...});

    return (
    <>
        <div>....</div>
    <>
    )
}

const MyApp = () => {
  return (
    <>
       <MyAnalytics />
       <Container />
   <>
  )
}

[Jaffar17]

Hi @ragingwind,
I am looking to achieve something similar. Can you guide me if there has been any update on this idea?

[jithin-jz]

This is a solid idea — more modern, hook-friendly, and powerful than the current reportWebVitals export. It would:

Improve integration with React

Make analytics + performance tracing easier

Allow per-page or per-component context with vitals

But:

It needs guardrails to avoid event listener chaos

It may need Next.js official support or a wrapper like useReportWebVitals()

💬 Final Thought
If you’re self-managing web vitals or analytics in a complex Next.js app, implementing your own CustomEvent dispatching is totally valid today — and arguably better than the default.

If you're asking: “Is this a better architecture than export function reportWebVitals?”

👉 Honestly: yes.