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.

Sign up for GitHub

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

Jump to bottom

fix(error-overlay): correct module grouping #62206

Merged
merged 21 commits into from
Feb 21, 2024
Merged

fix(error-overlay): correct module grouping #62206

merged 21 commits into from
Feb 21, 2024

Conversation

balazsorban44
Copy link
Member

@balazsorban44 balazsorban44 commented Feb 18, 2024 •
edited
Loading

What?

We regressed on #44137, meaning it was totally ignored. I haven't tracked down at which point this happened but made it work again in the same PR.

Also added support for module grouping via Turbopack.

This should significantly clear up the shown error stack in the error overlay:

Before:
After:

Why?

Some frames in the error stack are useless/unactionable to the user and make it harder to parse the error. This PR filters out some of them, to make the stack more readable.

How?

Fixed the regression on #44137 by extracting the logic that can be shared between webpack and turbopack for parsing the source package.

First, I just check the file coming from the client. Then, after the sourcemap tracing, I do another parsing, since that will give a more accurate result.

Longer term, we should also look into ignoreFields for sourcemaps, and collapse those by default (Related facebook/react#28310)

Tested in both App and Pages Router.

Some more before/after screenshots

Before/After (invalid hook call/App Router):

Before/After (random error thrown/App Router):

Before/After (invalid hook call/Pages Router):

Before/After (random error thrown/Pages Router):

Closes NEXT-2522

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Feb 18, 2024
@balazsorban44 balazsorban44 marked this pull request as ready for review February 18, 2024 02:59
@balazsorban44 balazsorban44 enabled auto-merge (squash) February 18, 2024 03:04
@ijjk
Copy link
Member

ijjk commented Feb 18, 2024 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
buildDuration 20.5s 14.5s N/A
buildDurationCached 8s 7.9s N/A
nodeModulesSize 196 MB 197 MB ⚠️ +374 kB
nextStartRea..uration (ms) 431ms 414ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
1068-HASH.js gzip 30.3 kB 30.3 kB N/A
3f784ff6-HASH.js gzip 53.5 kB 53.5 kB N/A
4944-HASH.js gzip 5.04 kB 5.03 kB N/A
8423.HASH.js gzip 181 B 181 B ✓
framework-HASH.js gzip 45.2 kB 45.2 kB ✓
main-app-HASH.js gzip 241 B 242 B N/A
main-HASH.js gzip 32.2 kB 32.1 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB ✓
Overall change 47.1 kB 47.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-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 fix/hide-useless-lines-from-stack Change
_app-HASH.js gzip 196 B 196 B ✓
_error-HASH.js gzip 184 B 183 B N/A
amp-HASH.js gzip 503 B 504 B N/A
css-HASH.js gzip 323 B 324 B N/A
dynamic-HASH.js gzip 2.5 kB 2.51 kB N/A
edge-ssr-HASH.js gzip 258 B 259 B N/A
head-HASH.js gzip 353 B 351 B N/A
hooks-HASH.js gzip 370 B 370 B ✓
image-HASH.js gzip 4.21 kB 4.2 kB N/A
index-HASH.js gzip 259 B 259 B ✓
link-HASH.js gzip 2.68 kB 2.67 kB N/A
routerDirect..HASH.js gzip 313 B 314 B N/A
script-HASH.js gzip 386 B 385 B N/A
withRouter-HASH.js gzip 309 B 311 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 931 B 931 B ✓
Client Build Manifests
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
_buildManifest.js gzip 485 B 484 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
index.html gzip 529 B 526 B N/A
link.html gzip 540 B 540 B ✓
withRouter.html gzip 524 B 522 B N/A
Overall change 540 B 540 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
edge-ssr.js gzip 94.8 kB 2.29 kB N/A
page.js gzip 152 kB 2.98 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
middleware-b..fest.js gzip 628 B 626 B N/A
middleware-r..fest.js gzip 151 B 151 B ✓
middleware.js gzip 44.9 kB 465 B N/A
edge-runtime..pack.js gzip 1.94 kB 839 B N/A
Overall change 151 B 151 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
app-page-exp...dev.js gzip 167 kB 166 kB N/A
app-page-exp..prod.js gzip 96.2 kB 95.9 kB N/A
app-page-tur..prod.js gzip 97.9 kB 97.6 kB N/A
app-page-tur..prod.js gzip 92.4 kB 92 kB N/A
app-page.run...dev.js gzip 136 kB 136 kB N/A
app-page.run..prod.js gzip 90.9 kB 90.6 kB N/A
app-route-ex...dev.js gzip 22.1 kB 22 kB N/A
app-route-ex..prod.js gzip 14.9 kB 14.9 kB N/A
app-route-tu..prod.js gzip 14.9 kB 14.9 kB N/A
app-route-tu..prod.js gzip 14.7 kB 14.6 kB N/A
app-route.ru...dev.js gzip 21.8 kB 21.7 kB N/A
app-route.ru..prod.js gzip 14.7 kB 14.6 kB N/A
pages-api-tu..prod.js gzip 9.49 kB 9.47 kB N/A
pages-api.ru...dev.js gzip 9.76 kB 9.74 kB N/A
pages-api.ru..prod.js gzip 9.48 kB 9.47 kB N/A
pages-turbo...prod.js gzip 22.3 kB 22.1 kB N/A
pages.runtim...dev.js gzip 23 kB 22.8 kB N/A
pages.runtim..prod.js gzip 22.3 kB 22.1 kB N/A
server.runti..prod.js gzip 50.3 kB 50.2 kB N/A
Overall change 0 B 0 B ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js fix/hide-useless-lines-from-stack Change
0.pack gzip 1.55 MB 1.49 MB N/A
index.pack gzip 104 kB 104 kB ⚠️ +802 B
Overall change 104 kB 104 kB ⚠️ +802 B
Diff details
Diff for page.js 
failed to diff
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 1068-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 
failed to diff
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-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.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

Diff for server.runtime.prod.js

Diff too large to display

Commit: 215788e

huozhi
huozhi reviewed Feb 19, 2024
View reviewed changes
Copy link
Member

@huozhi huozhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's separate the change of module grouping and hiding frames. And based on the offline discussion might not be good to hide all of them. But only stringify <anonymous> one. We can follow up it later since group most of the react trace would be helpful.

Also add a e2e test for both pages router and app router to cover it

@balazsorban44 balazsorban44 changed the title fix(error-overlay): correct module grouping, hide useless frames fix(error-overlay): correct module grouping Feb 19, 2024
@ijjk
Copy link
Member

ijjk commented Feb 19, 2024 •
edited
Loading

Failing test suites

Commit: 215788e

TURBOPACK=1 pnpm test-dev test/development/typescript-auto-install/index.test.ts (turbopack)

  • typescript-auto-install > should detect TypeScript being added and auto setup
Expand output

● typescript-auto-install › should detect TypeScript being added and auto setup

TIMED OUT: /hello again/

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="next-head-count" content="2"><noscript data-n-css=""></noscript><script src="/_next/static/chunks/%5Broot%20of%20the%20server%5D__a0cf97._.js" defer=""></script><script src="/_next/static/chunks/c8460_react_22c55a._.js" defer=""></script><script src="/_next/static/chunks/4e99c_react-dom_cjs_react-dom_development_c0b264.js" defer=""></script><script src="/_next/static/chunks/4e99c_react-dom_55c180._.js" defer=""></script><script src="/_next/static/chunks/node_modules__pnpm_762be9._.js" defer=""></script><script src="/_next/static/chunks/%5Bturbopack%5D_dev_client_38d6c6._.js" defer=""></script><script src="/_next/static/chunks/9a82c_next_dist_pages_e6da06._.js" defer=""></script><script src="/_next/static/chunks/%5Bnext%5D_entry_page-loader_ts_1fa757._.js" defer=""></script><script src="/_next/static/chunks/%5Bnext%5D_entry_page-loader_ts_49b22d._.js" defer=""></script><script src="/_next/static/chunks/pages/_app.js" defer=""></script><script src="/_next/static/chunks/9a82c_next_dist_c2d9c5._.js" defer=""></script><script src="/_next/static/chunks/c8460_react_3cd7ff._.js" defer=""></script><script src="/_next/static/chunks/%5Broot%20of%20the%20server%5D__c0438f._.js" defer=""></script><script src="/_next/static/chunks/9a82c_next_dist_pages_c63228._.js" defer=""></script><script src="/_next/static/chunks/%5Bnext%5D_entry_page-loader_ts_2cb28a._.js" defer=""></script><script src="/_next/static/chunks/%5Bnext%5D_entry_page-loader_ts_f8dde4._.js" defer=""></script><script src="/_next/static/chunks/pages/index.js" defer=""></script><script src="/_next/static/development/_ssgManifest.js" defer=""></script><script src="/_next/static/development/_buildManifest.js" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body style="overflow: hidden;"><div id="__next"><p>hello world</p></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script><div id="__next-build-watcher" style="position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;"></div><next-route-announcer><p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 1px; white-space: nowrap; overflow-wrap: normal;"></p></next-route-announcer><nextjs-portal></nextjs-portal></body>

undefined

  636 |
  637 |   if (hardError) {
> 638 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  639 |   }
  640 |   return false
  641 | }

  at check (lib/next-test-utils.ts:638:11)
  at Object.<anonymous> (development/typescript-auto-install/index.test.ts:63:5)

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

balazsorban44
balazsorban44 commented Feb 20, 2024
View reviewed changes
...c/client/components/react-dev-overlay/internal/container/RuntimeError/GroupedStackFrames.tsx
}) {
if (!show) return
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should respect the main "Hide/Show collapsed frames" and should not show grouped stackframes at all when collapsed

balazsorban44
balazsorban44 commented Feb 20, 2024
View reviewed changes
packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -196,7 +198,7 @@ export const styles = css`
[data-nextjs-collapsed-call-stack-details] summary {
display: flex;
align-items: center;
margin: var(--size-gap-double) 0;
margin-bottom: var(--size-gap);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed some inconsistent spacing, here is the before/after. (it makes the stack shorter as well):
image image

@balazsorban44 balazsorban44 requested a review from a team as a code owner February 21, 2024 10:57
@balazsorban44 balazsorban44 merged commit 2a9a7a2 into canary Feb 21, 2024
68 of 72 checks passed
@balazsorban44 balazsorban44 deleted the fix/hide-useless-lines-from-stack branch February 21, 2024 13:07
huozhi
huozhi reviewed Feb 21, 2024
View reviewed changes
packages/next/src/client/components/react-dev-overlay/server/shared.ts Show resolved Hide resolved
packages/next/src/client/components/react-dev-overlay/server/middleware.ts
@@ -318,6 +302,12 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
Boolean(parseInt(frame.lineNumber?.toString() ?? '', 10))
)
) {
if (sourcePackage) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be nice to group them into one place later, not blocking

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think the whole middleware.ts could use a bit of refactoring.

@huozhi
Copy link
Member

huozhi commented Feb 21, 2024

There're 2 next.js in one of the screenshots, is that expected?
image

@balazsorban44
Copy link
Member Author

Yes. It groups locally.

@balazsorban44 balazsorban44 mentioned this pull request Feb 21, 2024
Merged
balazsorban44 added a commit that referenced this pull request Feb 21, 2024
@balazsorban44
feat(error-overlay): hide <unknown>/stringify methods in `<anonym…
a1b2047 
…ous>` file from stack (#62325)

### What?

Clean up the error overlay:

<details>
<summary><b>Before:</b></summary>
<img
src="https://github.com/vercel/next.js/assets/18369201/22c3ab2c-8445-4c25-8554-a5ab51100af4"/>
</details>

<details>
<summary><b>After:</b></summary>
<img
src="https://github.com/vercel/next.js/assets/18369201/403c30fc-8b27-4529-838c-47d9cbe52381"/></details>


I also simplified the current code as it was likely using `useMemo` a
bit eagerly.

### Why?

This is an unactionable line by the user, no value in showing it in the
overlay.

### How?

Filter out the frame before rendering it in the overlay.

This answers [this
question](#62206 (comment))
too, since the module grouping is local. Now that `<anonymous>` is
filtered out, the two Next.js groups are now merged into one, further
cleaning up the stack.

Closes NEXT-2505
@balazsorban44 balazsorban44 mentioned this pull request Feb 22, 2024
Merged
@github-actions github-actions bot added the locked label Mar 7, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@huozhi huozhi huozhi left review comments

@ForsakenHarmony ForsakenHarmony ForsakenHarmony approved these changes

@timneutkens timneutkens Awaiting requested review from timneutkens

@ijjk ijjk Awaiting requested review from ijjk

@shuding shuding Awaiting requested review from shuding

@feedthejim feedthejim Awaiting requested review from feedthejim

@ztanner ztanner Awaiting requested review from ztanner

@wyattjoh wyattjoh Awaiting requested review from wyattjoh

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. locked type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@balazsorban44 @ijjk @huozhi @ForsakenHarmony