log a dev warning when a missing parallel slot results in a 404

[ztanner]

What & Why?

When visiting a route that attempts to render a slot with no page & no default, the fallback behavior is to trigger a 404. However this can lead to a confusing development experience for complex parallel routing cases as you might not realize a default is missing, or which slot is causing the error.

Previous issues where this caused confusion:

• Nested route unreachable if inside or besides a parallel route #51805
• [NEXT-1165] [App Router]: Group routes with parallel routes as a page slot, nested route will render NEXT_NOT_FOUND in server side. #49569

How?

This is a dev-only modification to track parallel slots that are using the default fallback (aka missing). When the NotFoundBoundary is triggered in development mode, this will log a warning about why it 404ed, along with a list of slot(s) that were determined to be missing.

Future

We should eventually lift this into some sort of dev-only UI to help catch it when not monitoring the browser console (similar to the error overlay). However, this will require some design thought and isn't necessary for the first iteration.

Closes NEXT-1798

[ztanner]

Current dependencies on/for this PR:

• canary
  • PR log a dev warning when a missing parallel slot results in a 404 #60186 👈

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-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	Change
buildDuration	12.8s	12.7s	N/A
buildDurationCached	7s	6s	N/A
nodeModulesSize	202 MB	203 MB	⚠️ +46.2 kB
nextStartRea..uration (ms)	422ms	426ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	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.4 kB	28.6 kB	⚠️ +114 B
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	239 B	242 B	N/A
main-HASH.js gzip	31.7 kB	31.8 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	127 kB	127 kB	⚠️ +114 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	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-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	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-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	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-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	Change
index.html gzip	528 B	527 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	523 B	523 B	✓
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	Change
edge-ssr.js gzip	93.7 kB	93.8 kB	N/A
page.js gzip	146 kB	147 kB	⚠️ +168 B
Overall change	146 kB	147 kB	⚠️ +168 B

Middleware size

	vercel/next.js canary	vercel/next.js 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	Change
middleware-b..fest.js gzip	624 B	624 B	✓
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.7 kB	2.7 kB	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404	Change
app-page-exp...dev.js gzip	168 kB	169 kB	⚠️ +121 B
app-page-exp..prod.js gzip	94.2 kB	94.2 kB	N/A
app-page-tur..prod.js gzip	94.9 kB	94.9 kB	N/A
app-page-tur..prod.js gzip	89.4 kB	89.5 kB	N/A
app-page.run...dev.js gzip	138 kB	139 kB	⚠️ +139 B
app-page.run..prod.js gzip	88.7 kB	88.8 kB	N/A
app-route-ex...dev.js gzip	24.1 kB	24.1 kB	N/A
app-route-ex..prod.js gzip	16.7 kB	16.7 kB	N/A
app-route-tu..prod.js gzip	16.7 kB	16.7 kB	N/A
app-route-tu..prod.js gzip	16.3 kB	16.3 kB	N/A
app-route.ru...dev.js gzip	23.5 kB	23.5 kB	N/A
app-route.ru..prod.js gzip	16.3 kB	16.3 kB	N/A
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	N/A
pages.runtim...dev.js gzip	22.5 kB	22.6 kB	N/A
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	N/A
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	385 kB	385 kB	⚠️ +260 B

Diff details

Diff for page.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Commit: 2e26791

[ijjk]

Tests Passed