Display the stitched error instead of react error #72106
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 'use client' | ||
|
|
||
| import Foo from '../foo' | ||
|
|
||
| export default function BrowserOnly() { | ||
| return ( | ||
| <div> | ||
| <Foo /> | ||
| </div> | ||
| ) | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 'use client' | ||
|
|
||
| import dynamic from 'next/dynamic' | ||
|
|
||
| const BrowserOnly = dynamic(() => import('./browser-only'), { | ||
| ssr: false, | ||
| }) | ||
|
|
||
| export default function Page() { | ||
| return <BrowserOnly /> | ||
| } |
Empty file.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { ReactNode } from 'react' | ||
| export default function Root({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <html> | ||
| <body>{children}</body> | ||
| </html> | ||
| ) | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import Foo from '../foo' | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <Foo /> | ||
| </div> | ||
| ) | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 'use client' | ||
|
|
||
| import Foo from '../foo' | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <Foo /> | ||
| </div> | ||
| ) | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @type {import('next').NextConfig} | ||
| */ | ||
| const nextConfig = { | ||
| experimental: { | ||
| reactOwnerStack: true, | ||
| }, | ||
| } | ||
|
|
||
| module.exports = nextConfig |
|
There was a problem hiding this comment. Where are the assertions on the owner stack in this test? There was a problem hiding this comment. It doesn't have stacks from user land such as |
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,147 @@ | ||||||
| import { nextTestSetup } from 'e2e-utils' | ||||||
| import { assertHasRedbox, getRedboxSource } from 'next-test-utils' | ||||||
|
|
||||||
| async function getStackFramesContent(browser) { | ||||||
| const stackFrameElements = await browser.elementsByCss( | ||||||
| '[data-nextjs-call-stack-frame]' | ||||||
| ) | ||||||
| const stackFramesContent = ( | ||||||
| await Promise.all( | ||||||
| stackFrameElements.map(async (frame) => { | ||||||
| const functionNameEl = await frame.$('[data-nextjs-frame-expanded]') | ||||||
| const sourceEl = await frame.$('[data-has-source]') | ||||||
| const functionName = functionNameEl | ||||||
| ? await functionNameEl.innerText() | ||||||
| : '' | ||||||
| const source = sourceEl ? await sourceEl.innerText() : '' | ||||||
|
|
||||||
| if (!functionName) { | ||||||
| return '' | ||||||
| } | ||||||
| return `at ${functionName} (${source})` | ||||||
| }) | ||||||
| ) | ||||||
| ) | ||||||
| .filter(Boolean) | ||||||
| .join('\n') | ||||||
|
|
||||||
| return stackFramesContent | ||||||
| } | ||||||
|
|
||||||
| describe('app-dir - owner-stack-invalid-element-type', () => { | ||||||
| const { next } = nextTestSetup({ | ||||||
| files: __dirname, | ||||||
| }) | ||||||
|
|
||||||
| it('should catch invalid element from on client-only component', async () => { | ||||||
|
There was a problem hiding this comment.
Suggested change
I don't see a There was a problem hiding this comment. It's using the |
||||||
| const browser = await next.browser('/browser') | ||||||
|
|
||||||
| await assertHasRedbox(browser) | ||||||
| const source = await getRedboxSource(browser) | ||||||
|
|
||||||
| const stackFramesContent = await getStackFramesContent(browser) | ||||||
| if (process.env.TURBOPACK) { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot( | ||||||
| `"at Page (app/browser/page.js (10:10))"` | ||||||
|
There was a problem hiding this comment. Why is the Component name here different between Webpack and Turbopack? Turbopack has |
||||||
| ) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/browser/browser-only.js (8:7) @ BrowserOnly | ||||||
|
There was a problem hiding this comment. Why is the Component name here different between Turbopack and Webpack? Turbopack has There was a problem hiding this comment. It's returned from the source map, retrieved by the line number and column number. There might be some inconsistence between two that we need to tackle later with sourcemap. |
||||||
|
|
||||||
| 6 | return ( | ||||||
| 7 | <div> | ||||||
| > 8 | <Foo /> | ||||||
| | ^ | ||||||
| 9 | </div> | ||||||
| 10 | ) | ||||||
| 11 | }" | ||||||
| `) | ||||||
| } else { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot( | ||||||
| `"at BrowserOnly (app/browser/page.js (10:11))"` | ||||||
| ) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/browser/browser-only.js (8:8) @ Foo | ||||||
|
|
||||||
| 6 | return ( | ||||||
| 7 | <div> | ||||||
| > 8 | <Foo /> | ||||||
| | ^ | ||||||
| 9 | </div> | ||||||
| 10 | ) | ||||||
| 11 | }" | ||||||
| `) | ||||||
| } | ||||||
| }) | ||||||
|
|
||||||
| it('should catch invalid element from on rsc component', async () => { | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| const browser = await next.browser('/rsc') | ||||||
|
|
||||||
| await assertHasRedbox(browser) | ||||||
| const stackFramesContent = await getStackFramesContent(browser) | ||||||
| const source = await getRedboxSource(browser) | ||||||
|
|
||||||
| if (process.env.TURBOPACK) { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot(`""`) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/rsc/page.js (6:7) @ Page | ||||||
|
|
||||||
| 4 | return ( | ||||||
| 5 | <div> | ||||||
| > 6 | <Foo /> | ||||||
| | ^ | ||||||
| 7 | </div> | ||||||
| 8 | ) | ||||||
| 9 | }" | ||||||
| `) | ||||||
| } else { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot(`""`) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/rsc/page.js (6:8) @ Foo | ||||||
|
|
||||||
| 4 | return ( | ||||||
| 5 | <div> | ||||||
| > 6 | <Foo /> | ||||||
| | ^ | ||||||
| 7 | </div> | ||||||
| 8 | ) | ||||||
| 9 | }" | ||||||
| `) | ||||||
| } | ||||||
| }) | ||||||
|
|
||||||
| it('should catch invalid element from on ssr client component', async () => { | ||||||
| const browser = await next.browser('/ssr') | ||||||
|
|
||||||
| await assertHasRedbox(browser) | ||||||
|
|
||||||
| const stackFramesContent = await getStackFramesContent(browser) | ||||||
| const source = await getRedboxSource(browser) | ||||||
| if (process.env.TURBOPACK) { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot(`""`) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/ssr/page.js (8:7) @ Page | ||||||
|
|
||||||
| 6 | return ( | ||||||
| 7 | <div> | ||||||
| > 8 | <Foo /> | ||||||
| | ^ | ||||||
| 9 | </div> | ||||||
| 10 | ) | ||||||
| 11 | }" | ||||||
| `) | ||||||
| } else { | ||||||
| expect(stackFramesContent).toMatchInlineSnapshot(`""`) | ||||||
| expect(source).toMatchInlineSnapshot(` | ||||||
| "app/ssr/page.js (8:8) @ Foo | ||||||
|
|
||||||
| 6 | return ( | ||||||
| 7 | <div> | ||||||
| > 8 | <Foo /> | ||||||
| | ^ | ||||||
| 9 | </div> | ||||||
| 10 | ) | ||||||
| 11 | }" | ||||||
| `) | ||||||
| } | ||||||
| }) | ||||||
| }) | ||||||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not used anymore, I didn't figure out last time how to get rid of this. Some tests were failing when I replace
[reactError]withstate.errors.This time I found that it's the issue with not reporting
error.causeinonRecoverableError, otherwise it's erroring with"There was an error during concurrent rendering but React was able to recover by instead synchronously rendering the entire root.". The critical change is inonRecoverableError