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

Ensure content is kept rendered below the error overlay on build errors in new router #41360

Merged
merged 4 commits into from Oct 12, 2022
Merged

Ensure content is kept rendered below the error overlay on build errors in new router #41360

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94ef48e
Remove unused code
timneutkens Oct 12, 2022
0fb3d62
Keep rendering underlying component tree when there is a build error
timneutkens Oct 12, 2022
9161229
Move error catch up one level
timneutkens Oct 12, 2022
a526fe8
Merge branch 'canary' into fix/error-overlay-on-top2
kodiakhq[bot] Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 0 additions & 33 deletions packages/next/client/components/react-dev-overlay/internal/ErrorBoundary.tsx
View file
Open in desktop

This file was deleted.

113 changes: 66 additions & 47 deletions packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
View file
Open in desktop
@@ -1,61 +1,80 @@
import * as React from 'react'
import type { OverlayState } from './error-overlay-reducer'
import {
ACTION_UNHANDLED_ERROR,
OverlayState,
UnhandledErrorAction,
} from './error-overlay-reducer'

import { ShadowPortal } from './components/ShadowPortal'
import { BuildError } from './container/BuildError'
import { Errors } from './container/Errors'
import { ErrorBoundary } from './ErrorBoundary'
import { Errors, SupportedErrorEvent } from './container/Errors'
import { Base } from './styles/Base'
import { ComponentStyles } from './styles/ComponentStyles'
import { CssReset } from './styles/CssReset'
import { parseStack } from './helpers/parseStack'

type ErrorType = 'runtime' | 'build'
interface ReactDevOverlayState {
reactError: SupportedErrorEvent | null
}
class ReactDevOverlay extends React.PureComponent<
{
state: OverlayState
children: React.ReactNode
},
ReactDevOverlayState
> {
state = { reactError: null }

const shouldPreventDisplay = (
errorType?: ErrorType | null,
preventType?: ErrorType[] | null
) => {
if (!preventType || !errorType) {
return false
static getDerivedStateFromError(error: Error): ReactDevOverlayState {
const e = error
const event: UnhandledErrorAction = {
type: ACTION_UNHANDLED_ERROR,
reason: error,
frames: parseStack(e.stack!),
}
const errorEvent: SupportedErrorEvent = {
id: 0,
event,
}
return { reactError: errorEvent }
}
return preventType.includes(errorType)
}

function ReactDevOverlay({
state,
children,
preventDisplay,
}: {
state: OverlayState
children?: React.ReactNode
preventDisplay?: ErrorType[]
}) {
const hasBuildError = state.buildError != null
const hasRuntimeErrors = Boolean(state.errors.length)

const isMounted = hasBuildError || hasRuntimeErrors

return (
<>
<ErrorBoundary isMounted={isMounted}>{children}</ErrorBoundary>
{isMounted ? (
<ShadowPortal>
<CssReset />
<Base />
<ComponentStyles />

{shouldPreventDisplay(
hasBuildError ? 'build' : hasRuntimeErrors ? 'runtime' : null,
preventDisplay
) ? null : hasBuildError ? (
<BuildError message={state.buildError!} />
) : hasRuntimeErrors ? (
<Errors errors={state.errors} />
) : undefined}
</ShadowPortal>
) : undefined}
</>
)
render() {
const { state, children } = this.props
const { reactError } = this.state

const hasBuildError = state.buildError != null
const hasRuntimeErrors = Boolean(state.errors.length)
const isMounted = hasBuildError || hasRuntimeErrors || reactError

return (
<>
{reactError ? (
<html>
<head></head>
<body></body>
</html>
) : (
children
)}
{isMounted ? (
<ShadowPortal>
<CssReset />
<Base />
<ComponentStyles />

{hasBuildError ? (
<BuildError message={state.buildError!} />
) : hasRuntimeErrors ? (
<Errors errors={state.errors} />
) : reactError ? (
<Errors errors={[reactError]} />
) : undefined}
</ShadowPortal>
) : undefined}
</>
)
}
}

export default ReactDevOverlay
2 changes: 0 additions & 2 deletions packages/next/client/components/react-dev-overlay/internal/error-overlay-reducer.ts
View file
Open in desktop
Expand Up @@ -69,8 +69,6 @@ export function errorOverlayReducer(
}
}
default: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _: never = action
return state
}
}
Expand Down