import * as React from 'react' import { ACTION_UNHANDLED_ERROR, OverlayState, UnhandledErrorAction, } from './error-overlay-reducer' import { ShadowPortal } from './components/ShadowPortal' import { BuildError } from './container/BuildError' 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' interface ReactDevOverlayState { reactError: SupportedErrorEvent | null } class ReactDevOverlay extends React.PureComponent< { state: OverlayState children: React.ReactNode }, ReactDevOverlayState > { state = { reactError: null } 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 } } 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 ? ( ) : ( children )} {isMounted ? ( {hasBuildError ? ( ) : hasRuntimeErrors ? ( ) : reactError ? ( ) : undefined} ) : undefined} ) } } export default ReactDevOverlay