`reportWebVitals` reports incorrect route

[klapec]

Since reportWebVitals in next-axiom relies on window.__NEXT_DATA__?.page, the route that's sent to Axiom isn't updated when user performs a client-side navigation.

Example:

https://user-images.githubusercontent.com/565022/184362879-db28f06a-41bd-417f-a5d9-7a39a7b7f948.mov

As you can see, client-side (via <Link/>) navigation doesn't affect the route being sent to Axiom. Only after doing a hard reload the correct route is being picked up and sent to Axiom.

[bahlo]

Hey @klapec, thanks for bringing this to our attention! We'll investigate if there's a better way to get the current route 👍

[dasfmi]

I have tried to use hooks useRouter() but it has the same problem upon navigation. It works correctly for each route when you open it the first time, but if you navigate to another page it still gives the same route. Looked for hints on nextjs docs but couldn't find any mentioning of the routes inisde of reportWebVital.

[dasfmi]

I am reaching out to next.js discord channel, to get more details about this, hopefully we can find a fix. I will continue debugging this, will keep the thread updated with any findings that come up.

[dasfmi]

@klapec we got an official reponse from vercel devs:

There’s no new web vitals reported after hydration, so you can’t have any different route than the initial page there

[klapec]

Alright so there's no way to capture web vitals data for a correct route after a client-side navigation, is that correct? Isn't it problematic that the captured data is being reported for an incorrect route? As you can see in the video above we're reporting web vitals data for / even though user has navigated away from it.

[dasfmi]

I agree that is not consistent with the answer we got. I doubt next-axiom has anything to do with the webVitals being generated after user navigated away, but I will create a new project without next-axiom to double check. I will just console.log the metric like its mentioned in next.js docs.

[dasfmi]

@klapec can you check the names of the webVitals generated after user navigation, based on my testing here it seems that the metrics generated are only next.js related, I am not sure about INP though.

[klapec]

@schehata oh snap I'm sorry, I somehow missed this! I'll take a look at this and I'll get back to you tomorrow.

[klapec]

Sorry for the delay once again, I'm flooded with work recently.

The first post-navigation metric sent is indeed only containing Next.js-related stuff:

However soon after another event is being sent, this time containing webvitals data:

As you can see it sends CLS and INP metrics with wrong route value.

[dasfmi]

are you calling reportWebVitals in _app.ts or in every page?

[klapec]

I'm doing export { reportWebVitals } from 'next-axiom'; in _app.ts.

[bahlo]

Hi @klapec, we just released 0.18 which adds a way to override the route for WebVitals.

This is how you can use the pathname from the URL:

import { NextWebVitalsMetric } from 'next/app'
import { reportWebVitalsWithPath } from 'next-axiom'

export function reportWebVitals(metric: NextWebVitalsMetric) {
  reportWebVitalsWithPath(metric, window.location.pathname)
}

Does this solution work for you?

[klapec]

Yes, this is exactly what I needed! It works great. Thank you!

[bahlo]

❤️