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

ztanner · 2024-01-03T21:30:05Z

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 · 2024-01-03T21:30:16Z

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 · 2024-01-03T21:39:34Z

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 · 2024-01-03T22:38:38Z

Tests Passed

…el#60186) ### 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: - vercel#51805 - vercel#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. ![CleanShot 2024-01-03 at 14 34 30@2x](https://github.com/vercel/next.js/assets/1939140/1a00ea49-24b6-4ba0-9bac-8773c7e10a75) ### 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

ijjk added area: tests created-by: Next.js team PRs by the Next.js team. type: next labels Jan 3, 2024

ztanner force-pushed the 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404 branch from a583abb to 16c62b2 Compare January 3, 2024 21:34

ztanner marked this pull request as ready for review January 3, 2024 21:50

ztanner requested review from timneutkens, ijjk, shuding, huozhi, feedthejim, a team and wyattjoh as code owners January 3, 2024 21:50

ztanner force-pushed the 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404 branch from 16c62b2 to d82f110 Compare January 3, 2024 22:34

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

2e26791

ztanner force-pushed the 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404 branch from d82f110 to 2e26791 Compare January 3, 2024 22:51

feedthejim approved these changes Jan 4, 2024

View reviewed changes

huozhi approved these changes Jan 4, 2024

View reviewed changes

ztanner merged commit aa48b65 into canary Jan 4, 2024
70 checks passed

ztanner deleted the 01-03-log_a_dev_warning_when_a_missing_parallel_slot_results_in_a_404 branch January 4, 2024 15:56

huozhi mentioned this pull request Jan 4, 2024

(WIP) Remove extra top level not found boundary for parallel routes #60220

Closed

samcx mentioned this pull request Jan 6, 2024

chore: update turbo to the latest #60293

Closed

github-actions bot added the locked label Jan 19, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jan 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ztanner commented Jan 3, 2024 •

edited

Loading

ztanner commented Jan 3, 2024

ijjk commented Jan 3, 2024 •

edited

Loading

ijjk commented Jan 3, 2024 •

edited

Loading

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

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

Conversation

ztanner commented Jan 3, 2024 • edited Loading

What & Why?

How?

Future

ztanner commented Jan 3, 2024

ijjk commented Jan 3, 2024 • edited Loading

Stats from current PR

ijjk commented Jan 3, 2024 • edited Loading

Tests Passed

ztanner commented Jan 3, 2024 •

edited

Loading

ijjk commented Jan 3, 2024 •

edited

Loading

ijjk commented Jan 3, 2024 •

edited

Loading