DX: display highlited pesudo html when bad nesting html error occurred #62590
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ijjk
added
area: tests
created-by: Next.js team
Tests Passed |
Stats from current PRDefault Build (Increase detected
|
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| buildDuration | 13.7s | 13.8s | N/A |
| buildDurationCached | 8.4s | 6.2s | N/A |
| nodeModulesSize | 197 MB | 197 MB | |
| nextStartRea..uration (ms) | 423ms | 436ms | N/A |
Client Bundles (main, webpack)
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| 2453-HASH.js gzip | 30.5 kB | 30.5 kB | N/A |
| 3304.HASH.js gzip | 181 B | 181 B | ✓ |
| 3f784ff6-HASH.js gzip | 53.7 kB | 53.7 kB | N/A |
| 8299-HASH.js gzip | 5.04 kB | 5.04 kB | N/A |
| framework-HASH.js gzip | 45.2 kB | 45.2 kB | ✓ |
| main-app-HASH.js gzip | 243 B | 242 B | N/A |
| main-HASH.js gzip | 32.1 kB | 32.2 kB | N/A |
| webpack-HASH.js gzip | 1.7 kB | 1.7 kB | N/A |
| Overall change | 45.4 kB | 45.4 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 196 B | 197 B | N/A |
| _error-HASH.js gzip | 184 B | 184 B | ✓ |
| amp-HASH.js gzip | 505 B | 505 B | ✓ |
| css-HASH.js gzip | 324 B | 325 B | N/A |
| dynamic-HASH.js gzip | 2.5 kB | 2.5 kB | N/A |
| edge-ssr-HASH.js gzip | 258 B | 258 B | ✓ |
| head-HASH.js gzip | 352 B | 352 B | ✓ |
| hooks-HASH.js gzip | 370 B | 371 B | N/A |
| image-HASH.js gzip | 4.2 kB | 4.2 kB | ✓ |
| index-HASH.js gzip | 259 B | 259 B | ✓ |
| link-HASH.js gzip | 2.67 kB | 2.67 kB | N/A |
| routerDirect..HASH.js gzip | 314 B | 312 B | N/A |
| script-HASH.js gzip | 386 B | 386 B | ✓ |
| withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
| 1afbb74e6ecf..834.css gzip | 106 B | 106 B | ✓ |
| Overall change | 6.56 kB | 6.56 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 483 B | 485 B | N/A |
| Overall change | 0 B | 0 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| index.html gzip | 528 B | 526 B | N/A |
| link.html gzip | 541 B | 539 B | N/A |
| withRouter.html gzip | 523 B | 522 B | N/A |
| Overall change | 0 B | 0 B | ✓ |
Edge SSR bundle Size
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| edge-ssr.js gzip | 95 kB | 95 kB | N/A |
| page.js gzip | 3.05 kB | 3.06 kB | N/A |
| Overall change | 0 B | 0 B | ✓ |
Middleware size
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| middleware-b..fest.js gzip | 624 B | 625 B | N/A |
| middleware-r..fest.js gzip | 151 B | 151 B | ✓ |
| middleware.js gzip | 25.5 kB | 25.5 kB | N/A |
| edge-runtime..pack.js gzip | 839 B | 839 B | ✓ |
| Overall change | 990 B | 990 B | ✓ |
Next Runtimes
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| app-page-exp...dev.js gzip | 171 kB | 171 kB | ✓ |
| app-page-exp..prod.js gzip | 96.7 kB | 96.7 kB | ✓ |
| app-page-tur..prod.js gzip | 98.5 kB | 98.5 kB | ✓ |
| app-page-tur..prod.js gzip | 92.9 kB | 92.9 kB | ✓ |
| app-page.run...dev.js gzip | 150 kB | 150 kB | ✓ |
| app-page.run..prod.js gzip | 91.4 kB | 91.4 kB | ✓ |
| app-route-ex...dev.js gzip | 21.3 kB | 21.3 kB | ✓ |
| app-route-ex..prod.js gzip | 15 kB | 15 kB | ✓ |
| app-route-tu..prod.js gzip | 15 kB | 15 kB | ✓ |
| app-route-tu..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
| app-route.ru...dev.js gzip | 20.9 kB | 20.9 kB | ✓ |
| app-route.ru..prod.js gzip | 14.8 kB | 14.8 kB | ✓ |
| pages-api-tu..prod.js gzip | 9.51 kB | 9.51 kB | ✓ |
| pages-api.ru...dev.js gzip | 9.79 kB | 9.79 kB | ✓ |
| pages-api.ru..prod.js gzip | 9.51 kB | 9.51 kB | ✓ |
| pages-turbo...prod.js gzip | 22.3 kB | 22.3 kB | ✓ |
| pages.runtim...dev.js gzip | 23 kB | 23 kB | ✓ |
| pages.runtim..prod.js gzip | 22.3 kB | 22.3 kB | ✓ |
| server.runti..prod.js gzip | 50.6 kB | 50.6 kB | ✓ |
| Overall change | 950 kB | 950 kB | ✓ |
build cache Overall increase ⚠️
| vercel/next.js canary | vercel/next.js dx/component-stack | Change | |
|---|---|---|---|
| 0.pack gzip | 1.56 MB | 1.56 MB | |
| index.pack gzip | 105 kB | 104 kB | N/A |
| Overall change | 1.56 MB | 1.56 MB |
Diff details
Diff for middleware.js
Diff too large to display
huozhi
requested review from
timneutkens,
ijjk,
shuding,
feedthejim,
ztanner and
wyattjoh
as code owners
shuding
approved these changes
Feb 28, 2024
huozhi
added a commit
that referenced
this pull request
Feb 29, 2024
### What Keep improving the hydration erros. Currently we divide the hydration mismatch types into two categories, html tag mismatch and text mismatch. We're displaying the mismatched text content between server and client here since we have it in the component stack and warnings. We've already made some improvements in #62590 , here we carry on improving the highlited text into red and bold that is much easier for you to spot on. This updated a few long snapshots that we could collapse and show only the text content difference instead of all the component stack. ### Screenshots (Dark and light modes) #### Mismatch html tags <img width="360" src="https://github.com/vercel/next.js/assets/4800338/f721b374-69cc-4600-a09d-bef87e885fab"><img width="360" src="https://github.com/vercel/next.js/assets/4800338/1abf2572-2be8-4359-a652-8ba39aaccfd3"> #### Mismatch text content <img width="360" src="https://github.com/vercel/next.js/assets/4800338/7f0d2215-8bc0-4fba-9c92-6c44efa29531"><img width="360" src="https://github.com/vercel/next.js/assets/4800338/656d1e1a-3157-4bcf-a239-74bb81fcb4c4"> #### Large content mismatch ### Why I was intended to bring a html diff between server and client html content but turns out the diff result could be giant and not ideal due to few reasons. So we switched to the path of leveraging component stack and mismatch contents. React reordering the tags after hydration. For instance the `script` or `link` tags could be hoist by React Float, so the lines of html is are to preserved. so the diff is hard to be super accurate unless your mismatch is small. If you're mismatch a component with rich html content, it could be a pretty large diff. Another case is if you have a bad nesting html like `<p> ...<span>... <p>my text</p> ...</span>... <p>` where there're many span in between, the final different could also be hudge as browser will close the first `<p>` tag and the rest content will go into the diff. Hence we're going with the component and text content diff. Closes NEXT-2645
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
When you have bad nesting html in your React code, React wil raise hydration error since the browser html parser might parse it to sth else different comparing to server html on client. Previously we're display only the warning in the error description in dev overlay.
Now we introduced another format of displaying pesudo html that representing your code, with highlighting the html tag that causes the error. Since React might gives you the whole component stack of React tree, so we also introduced a way that can collapse the error.
Example
CleanShot.2024-02-27.at.15.29.51.mp4
Why
The reason we added this is that even we show the html diff, it could super large due to React ordering the html on client, so the mismatch might be a lot. The idea here is similar to what you saw when you passed down a bad event handler into server component, we displayed a pesudo html as it could hit your mind faster than just seeing the warning. The best way is to display the source code, but before we can show the source, getting component stack display as pseudo html instead of here could be more helpful.
After vs Before
Closes NEXT-2621