performance.measure() is crashing my route

[devin-liu]

What version of Next.js are you using?

10.0.4

What version of Node.js are you using?

v14.4.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

I'm building a google oauth flow. I get the oauth menu account list opened, and click on my google account. It redirects back - unsuccessfully, to my app page. I get these errors

DOMException: Failed to execute 'measure' on 'Performance': The mark 'beforeRender' does not exist.

Uncaught (in promise) Error: Cancel rendering route

Expected Behavior

I'm building a google oauth flow. I get the oauth menu account list opened, and click on my google account. It redirects back - successfully, to my app page.

To Reproduce

I believe the error comes from this line. I suspect because my page is redirecting from google back to my app, the mark is not there or was cleared out.

https://github.com/vercel/next.js/blob/dbe1e626f877a9ef7bbffc2f360bae809874790d/packages/next/client/index.tsx#L534

[tarunama]

Can reproduce error with below example ? https://github.com/vercel/next.js/tree/canary/examples/with-next-auth

I tried to reproduce your error, but error did not occur. https://github.com/tarunama/with-next-google-oauth

[bwillem]

Looks like a separate bug? But I think I had performance reporting crash an API route in production as well - here's the Sentry stack trace

Nextjs version 10.0.7

Browser Edge 90.0.818

Edit: Looks like it didn't actually crash the route, there's another report of this, I'll move my inquiry to here https://github.com/vercel/next.js/issues/23856

[threehams]

I have a non-minimal repro case for this error, though under completely different circumstances, here: https://github.com/threehams/barrys-time-adventures-nx/tree/nextjs-perf-bug

Windows 10 Node 16.9.1 npm 7.21.1

Requires npm install --legacy-peer-deps, which is likely part of the problem. Run the server with npx nx serve barry. Happens immediately on server start.

[vitalybaev]

We've also experienced such problem on 12.1.6. I'll try to get more details here.

[sairion]

I'm seeing this as well on production. It's not very frequent, but a few users are seeing this on a random basis. it would be nice if this doesn't break the route, at least.

[vedraan]

I'm also seeing this in production but not too often. It seems to be happening if a browser tab with the app is left open but inactive, and users come back to it after a while.

Failed to execute 'measure' on 'Performance': The mark 'beforeRender' does not exist.

Next version 12.1.6

[m1guelsb]

In my case, looks like using useCallback + useEffect hook inside a Context is what was causing that error, when I rewrote the code the error sttoped. Very strange.

[CRIMSON-CORP]

I'm my case, i was getting the error when i use router.push() to the page i was currently on

[lveillard]

Same as @CRIMSON-CORP Had to compare with router.pathname to avoid doing the route.push to the same route

I think it could be nice to create a dedicated error message for this case

[abdulsalamcodes]

I got the error also because I was using router.push to push to the same page as the page I am currently on.

[devramsean0]

I'm also getting this error, but not when using router.push, using location.href instead and i'm still getting the error

[kingsley-sunny]

I'm also seeing this in production but not too often. It seems to be happening if a browser tab with the app is left open but inactive, and users come back to it after a wh

In my case router.replace() to the page that i was already on was causing that error

[michaelangeloio]

@balazsorban44 @lluia can we get some visibility on this? I'm getting the same error as well. This issue was opened in 2021.

[douglasjunior]

I`m getting this error when using MSAL.js in a mobile browser.

The error happens at some point when it is redirected to the Microsoft login page, and then returns as a callback to my Next.js page.

[rangshuman]

I'm my case, i was getting the error when i use router.push() to the page i was currently on

This was exactly what I was doing in my case. Pushing to the same router I was currently on created this issue for me. Thanks for this comment @CRIMSON-CORP

[JuniorTour]

Personally I think, this issue can be closed.

1. I made some investigation based on this reproduction: https://github.com/threehams/barrys-time-adventures-nx/tree/nextjs-perf-bug

There will be a error tip for this usage mistake, after this MR: https://github.com/vercel/next.js/issues/40903

It is a usage mistake, not a bug of next.js.

2. Another router.push() error: I cant reproduce it, but according to comments bellow, it is also usage mistake, not a bug of next.js.

So I think, this issue can be closed.

[capaj]

Still getting it in [email protected]

would be nice to get this fixed.

[Anvarmirzo]

in my case, this error is triggered when using router.push twice in different components, in one component I collected all query parameters and added a new parameter with them, in the other I also collected all query parameters and added a new parameter with them

solved the problem with {shallow:true} at router.push, see https://nextjs.org/docs/routing/shallow-routing

[desnor]

We are also encountering this issue occasionally when a page has been open for a while and focus has been on a different browser tab. When the user returns it goes into a sort of loop with the error message DOMException: Failed to execute 'measure' on 'Performance': The mark 'beforeRender' does not exist.

This is happening after the static export of the app, not using any calls to router at all, on a page that renders only plain HTML.

performance.measure("Next.js-route-change-to-render", e[0].name, "beforeRender"), is the source line causing this, in the minified output of the chunks main next files.

It seems like the app is trying to reroute the page to the same route - this warning pops up in the dev console in Chrome

main-627138c22ebf06ea.js:1 Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 

Not sure if that adds anything useful for someone?

[itsjavi]

In my case this triggered intermittently when I refreshed the page, when I accidentally used a next/document Head inside another. (NextJS 13.2)

I think NextJS should detect this case and report a proper error.

[mustafa-hanif]

In my case this triggered intermittently when I refreshed the page, when I accidentally used a next/document Head inside another. (NextJS 13.2)

I think NextJS should detect this case and report a proper error.

This is exactly what my issue was, thanks!

[ClemCa]

Had the same with replace, when the page stayed the same as well.

[cybershang]

Same error, nextjs version 13.1.6 with next-auth 4.20.1. I just found my error is wrong usage of next-auth(auth.js). this will casue error:

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <ConfigProvider locale={zhCN}>
          <Auth>
            <Component {...pageProps} />
          </Auth>
      </ConfigProvider>
    </SessionProvider>
  );
}

this is ok

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <ConfigProvider locale={zhCN}>
        {Component.auth == true ? (
          <Auth>
            <Component {...pageProps} />
          </Auth>
        ) : (
          <Component {...pageProps} />)}
      </ConfigProvider>
    </SessionProvider>
  );
}

[am1rb]

I faced the Failed to execute 'measure' on 'Performance': The mark 'beforeRender' does not exist. error in next.js 13.1.6. It happens when someone tries to load a page and, before it gets fully loaded, clicks on the browser back/forward button.

You can see the steps to reproduce it here: https://github.com/vercel/next.js/issues/47560#issuecomment-1488426370

[zodman]

We are also encountering this issue occasionally when a page has been open for a while and focus has been on a different browser tab. When the user returns it goes into a sort of loop with the error message DOMException: Failed to execute 'measure' on 'Performance': The mark 'beforeRender' does not exist.

This is happening after the static export of the app, not using any calls to router at all, on a page that renders only plain HTML.

performance.measure("Next.js-route-change-to-render", e[0].name, "beforeRender"), is the source line causing this, in the minified output of the chunks main next files.

It seems like the app is trying to reroute the page to the same route - this warning pops up in the dev console in Chrome

main-627138c22ebf06ea.js:1 Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 

Not sure if that adds anything useful for someone?

I think i have the same issue .. @desnor what version of nextjs you have ?

[shawngustaw]

I'm experiencing this with router.replace as well when the pathname is the same as the current url. I'm basically just using it to update the query parameters for the current route.

[shawngustaw]

It seems to go away if you add { shallow: true } to router.replace. I still get this error popping up but it doesn't break the page: Error: Loading initial props cancelled

[dellwatson]

i dont even have router push and this crashing my next app too

[gimenete]

Happened to me for having two <Head>s in the same component.

[rogeliorv]

Can replicate with router.replace