gracefully handle client router segment mismatches

[ztanner]

What?

Next.js throws a hard SEGMENT MISMATCH error when the reducers were unable to apply the a patch to the router tree from the server response.

How?

Rather than crashing the router, this will treat segment mismatches as a MPA navigation, to restore the client router into a working state.

Test Plan

If there are specific scenarios where Next.js throws this error, it should most likely be fixed in Next and not in user-land. Since it's not currently obvious what scenarios will trigger this error, this PR serves to recover from a mismatch more gracefully and provides some debug information rather than crashing the application. As such, there's no easy way to create an E2E test for this and I've instead opted for a simple unit test.

Closes NEXT-1878
slack x-ref
slack x-ref

[ztanner]

Current dependencies on/for this PR:

• canary
  • PR gracefully handle client router segment mismatches #60141 👈

This stack of pull requests is managed by Graphite.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
buildDuration	12.8s	12.6s	N/A
buildDurationCached	7.1s	6.2s	N/A
nodeModulesSize	202 MB	202 MB	⚠️ +10.4 kB
nextStartRea..uration (ms)	427ms	421ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
193.HASH.js gzip	181 B	182 B	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
433-HASH.js gzip	28.3 kB	28.5 kB	⚠️ +112 B
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	240 B	242 B	N/A
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	127 kB	127 kB	⚠️ +112 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	183 B	181 B	N/A
amp-HASH.js gzip	504 B	502 B	N/A
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	253 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	✓
routerDirect..HASH.js gzip	312 B	311 B	N/A
script-HASH.js gzip	385 B	383 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.4 kB	3.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
_buildManifest.js gzip	483 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
index.html gzip	528 B	526 B	N/A
link.html gzip	541 B	538 B	N/A
withRouter.html gzip	524 B	521 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
edge-ssr.js gzip	93.7 kB	93.8 kB	N/A
page.js gzip	147 kB	147 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
middleware-b..fest.js gzip	625 B	622 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.4 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.07 kB	2.07 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 01-02-gracefully_handle_client_router_segment_mismatches	Change
app-page-exp...dev.js gzip	168 kB	168 kB	✓
app-page-exp..prod.js gzip	94.2 kB	94.2 kB	✓
app-page-tur..prod.js gzip	94.9 kB	94.9 kB	✓
app-page-tur..prod.js gzip	89.4 kB	89.4 kB	✓
app-page.run...dev.js gzip	138 kB	138 kB	✓
app-page.run..prod.js gzip	88.7 kB	88.7 kB	✓
app-route-ex...dev.js gzip	24.1 kB	24.1 kB	✓
app-route-ex..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.3 kB	16.3 kB	✓
app-route.ru...dev.js gzip	23.5 kB	23.5 kB	✓
app-route.ru..prod.js gzip	16.3 kB	16.3 kB	✓
pages-api-tu..prod.js gzip	9.38 kB	9.38 kB	✓
pages-api.ru...dev.js gzip	9.65 kB	9.65 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.5 kB	22.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	932 kB	932 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Commit: d506cc4

[ijjk]

Failing test suites

Commit: f758e3c

pnpm test test/integration/edge-runtime-module-errors/test/module-imports.test.js

• Edge runtime code with imports > Edge API statically importing node.js module > throws unsupported module error in dev at runtime and highlights the faulty line

Expand output

● Edge runtime code with imports › Edge API statically importing node.js module › throws unsupported module error in dev at runtime and highlights the faulty line

expect(received).toBe(expected) // Object.is equality

Expected: 500
Received: 404

  86 |       context.app = await launchApp(context.appDir, context.appPort, appOption)
  87 |       const res = await fetchViaHTTP(context.appPort, url)
> 88 |       expect(res.status).toBe(500)
     |                          ^
  89 |       await check(async () => {
  90 |         expectUnsupportedModuleDevError(
  91 |           moduleName,

  at Object.toBe (integration/edge-runtime-module-errors/test/module-imports.test.js:88:26)

Read more about building and testing Next.js in contributing.md.

[feedthejim]

nice