After cancelling navigation once all future renders of a page component fail to emit routeChangeComplete

[sdcooke]

Link to the code that reproduces this issue

n/a

To Reproduce

I haven't provided code reproducing this because:

• it involves race conditions clicking between links which is hard to replicate
• I think the description of the bug below is hopefully enough to show that there is an issue

To find this error in our app we clicked between tabs on a page (the same route) until eventually clicking the tab does nothing because we don't get the routeChangeComplete event to trigger updates to the data shown on the page.

Current vs. Expected behavior

In Router.getRouteInfo (which is called when using useRouter().push) previous routeInfo for a component is reused https://github.com/vercel/next.js/blob/94c0152f673a70a492e72e7e84591e403fed918c/packages/next/src/shared/lib/router/router.ts#L1957-L1962 Some properties are overwritten https://github.com/vercel/next.js/blob/94c0152f673a70a492e72e7e84591e403fed918c/packages/next/src/shared/lib/router/router.ts#L2167-L2171 but error is not. If a previous navigation has been cancelled, error will be set on routeInfo and all future renders for that component will throw an error and not emit routeChangeComplete https://github.com/vercel/next.js/blob/94c0152f673a70a492e72e7e84591e403fed918c/packages/next/src/shared/lib/router/router.ts#L1758-L1779

This may also impact other failed renders and actions taken after successful navigation but I haven't seen those in our application.

Because the routeInfo caching is only used in production, this was quite difficult to debug in development.

Provide environment information

n/a

Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

I considered opening a PR for this, but I'm not sure what the best fix is - whether the cache shouldn't be used when there was previously an error, whether the error should be cleared, or something else.

[desmati]

We have the same issue in our project. We have a search result page and there are some filters. When the user clicks on any filter, it will change the search params accordingly. But after a few clicks, nextjs won't show any reaction to the user clicks. It will only change the url in the address bar and nothing else happens.

Notes:

• The user can try to open the URL in a new window and it will work.
• The user can wait for a few seconds (usually more than 30sec) and then click again and it will work.
• There are no activities on any developer console tabs while this issue happens (Network, Console, ....)
• Profiler shows inactivity during the freezing phase.

I've tried several approaches which didn't resolve the issue:

• Using Window.history.pushState instead of router.push
• Watching for URL changes with useEffect(() => { console.info(searchParams); }, [searchParams]); This won't log any changes. It looks like that there is not any route change happening at all.
• Toggling 'force-dynamic' or other dynamic features.
• Toggling usage of <Suspense/>

Finally, I've utilized window.location.href as a workaround to address the issue for that page which ruin the whole point of SPA and nextjs.

[qingzhoufeihu]

The situation I encountered is that when I jump back and forth between the list page and the details page using router.push more times, the rendering speed of the page switching becomes slower and slower. After the URL changes, it takes 5 seconds to render the list page.

[sdcooke]

Would be great if a maintainer could take a look at this issue - I know I didn't include example code, but I'd hope looking at the code was enough to see there's a bug here. I would open a PR to fix it, but I don't know what the preferred fix would be!

[peterwiebe]

This might seem sacrilegious but has anyone used react router inside of NextJS to detect url path updates? Kind of in a bind otherwise until NextJS team makes an update to fix the problem. 🤔