Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(error-overlay): matching html tag with brackets in hydration error #63365

Merged
merged 4 commits into from
Mar 16, 2024

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Mar 16, 2024

What

  • The tags extracted from hydration errors could be "
    " and "p", we need to stripe the brackets "<>" for matching the tag name from component stack
  • Change the dimmed text color to lighter so you can see it better in light mode

After vs Before

Closes NEXT-2828

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Mar 16, 2024
@ijjk
Copy link
Member

ijjk commented Mar 16, 2024

Stats from current PR

Default Build
General
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
buildDuration 13.7s 13.8s N/A
buildDurationCached 8.4s 6.1s N/A
nodeModulesSize 198 MB 198 MB N/A
nextStartRea..uration (ms) 431ms 434ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style 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 242 B 242 B
main-HASH.js gzip 32.2 kB 32.2 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 45.6 kB 45.6 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style 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.21 kB 4.21 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.57 kB 6.57 kB
Client Build Manifests
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
_buildManifest.js gzip 481 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
index.html gzip 529 B 529 B
link.html gzip 542 B 542 B
withRouter.html gzip 525 B 523 B N/A
Overall change 1.07 kB 1.07 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
edge-ssr.js gzip 95.1 kB 95.1 kB N/A
page.js gzip 3.05 kB 3.05 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
middleware-b..fest.js gzip 626 B 623 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 polish-error-overlay-diff-style Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 96.6 kB 96.6 kB
app-page-tur..prod.js gzip 98.3 kB 98.3 kB
app-page-tur..prod.js gzip 92.8 kB 92.8 kB
app-page.run...dev.js gzip 149 kB 149 kB
app-page.run..prod.js gzip 91.3 kB 91.3 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 21 kB 21 kB
app-route.ru..prod.js gzip 14.8 kB 14.8 kB
pages-api-tu..prod.js gzip 9.52 kB 9.52 kB
pages-api.ru...dev.js gzip 9.8 kB 9.8 kB
pages-api.ru..prod.js gzip 9.52 kB 9.52 kB
pages-turbo...prod.js gzip 22.3 kB 22.3 kB
pages.runtim...dev.js gzip 22.9 kB 22.9 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 948 kB 948 kB
build cache
vercel/next.js canary vercel/next.js polish-error-overlay-diff-style Change
0.pack gzip 1.56 MB 1.55 MB N/A
index.pack gzip 105 kB 105 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Commit: d0c5c59

@huozhi huozhi marked this pull request as ready for review March 16, 2024 17:08
@ijjk
Copy link
Member

ijjk commented Mar 16, 2024

Failing test suites

Commit: 1d6b9b8

pnpm test-dev test/e2e/app-dir/metadata/metadata.test.ts (PPR)

  • app dir - metadata > react cache > should have same title and page value when navigating
Expand output

● app dir - metadata › react cache › should have same title and page value when navigating

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

Expected: "0.32218510985276994"
Received: "0.4037578577080747"

  986 |         const obj = JSON.parse(title)
  987 |         // Check `cache()`
> 988 |         expect(obj.val.toString()).toBe(value)
      |                                    ^
  989 |         // Check `fetch()`
  990 |         // TODO-APP: Investigate why fetch deduping doesn't apply but cache() does.
  991 |         if (!isNextDev) {

  at Object.toBe (e2e/app-dir/metadata/metadata.test.ts:988:36)

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

@huozhi huozhi enabled auto-merge (squash) March 16, 2024 18:43
@huozhi huozhi merged commit 53c2188 into canary Mar 16, 2024
66 of 67 checks passed
@huozhi huozhi deleted the polish-error-overlay-diff-style branch March 16, 2024 19:24
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants