Open server component errors fullscreen (#43887)
https://github.com/vercel/next.js/pull/43844 continued. Make sure Server Component errors always open in fullscreen mode. Currently they only open in fullscreen on initial load - not when adding an Error when updating the file. If in test env, call `self.__NEXT_HMR_CB` after server component HMR was successful, used in tests for the error overlay. Closes NEXT-202 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
This commit is contained in:
parent
b3dfa03767
commit
45eea0a57e
3 changed files with 57 additions and 2 deletions
|
@ -348,6 +348,13 @@ function processMessage(
|
|||
dispatcher.onRefresh()
|
||||
})
|
||||
|
||||
if (process.env.__NEXT_TEST_MODE) {
|
||||
if (self.__NEXT_HMR_CB) {
|
||||
self.__NEXT_HMR_CB()
|
||||
self.__NEXT_HMR_CB = null
|
||||
}
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
case 'reloadPage': {
|
||||
|
|
|
@ -75,10 +75,10 @@ class ReactDevOverlay extends React.PureComponent<
|
|||
/>
|
||||
) : hasBuildError ? (
|
||||
<BuildError message={state.buildError!} />
|
||||
) : hasRuntimeErrors ? (
|
||||
<Errors initialDisplayState="minimized" errors={state.errors} />
|
||||
) : reactError ? (
|
||||
<Errors initialDisplayState="fullscreen" errors={[reactError]} />
|
||||
) : hasRuntimeErrors ? (
|
||||
<Errors initialDisplayState="minimized" errors={state.errors} />
|
||||
) : undefined}
|
||||
</ShadowPortal>
|
||||
) : undefined}
|
||||
|
|
|
@ -1221,4 +1221,52 @@ describe('ReactRefreshLogBox app', () => {
|
|||
|
||||
await cleanup()
|
||||
})
|
||||
|
||||
test('Server component errors should open up in fullscreen', async () => {
|
||||
const { session, browser, cleanup } = await sandbox(
|
||||
next,
|
||||
new Map([
|
||||
// Start with error
|
||||
[
|
||||
'app/page.js',
|
||||
`
|
||||
export default function Page() {
|
||||
throw new Error('Server component error')
|
||||
return <p id="text">Hello world</p>
|
||||
}
|
||||
`,
|
||||
],
|
||||
])
|
||||
)
|
||||
expect(await session.hasRedbox(true)).toBe(true)
|
||||
|
||||
// Remove error
|
||||
await session.patch(
|
||||
'app/page.js',
|
||||
`
|
||||
export default function Page() {
|
||||
return <p id="text">Hello world</p>
|
||||
}
|
||||
`
|
||||
)
|
||||
expect(await browser.waitForElementByCss('#text').text()).toBe(
|
||||
'Hello world'
|
||||
)
|
||||
expect(await session.hasRedbox()).toBe(false)
|
||||
|
||||
// Re-add error
|
||||
await session.patch(
|
||||
'app/page.js',
|
||||
`
|
||||
export default function Page() {
|
||||
throw new Error('Server component error!')
|
||||
return <p id="text">Hello world</p>
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
expect(await session.hasRedbox(true)).toBe(true)
|
||||
|
||||
await cleanup()
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue