From ca302c7e7a2ed3a5c48a9eee8bd1e1810251a561 Mon Sep 17 00:00:00 2001 From: natew Date: Thu, 10 Feb 2022 13:10:55 -0800 Subject: [PATCH] feat(react-dev-overlay): accept preventDisplay prop to allow config of which errors are display (used by next live) --- packages/react-dev-overlay/src/client.ts | 1 + .../src/internal/ReactDevOverlay.tsx | 28 +++++++++++++- .../src/internal/container/Errors.tsx | 38 +------------------ .../src/internal/container/RuntimeError.tsx | 2 +- .../src/internal/helpers/getErrorByType.ts | 37 ++++++++++++++++++ 5 files changed, 67 insertions(+), 39 deletions(-) create mode 100644 packages/react-dev-overlay/src/internal/helpers/getErrorByType.ts diff --git a/packages/react-dev-overlay/src/client.ts b/packages/react-dev-overlay/src/client.ts index f3acdd5b928721c..8a4a83be0b500ce 100644 --- a/packages/react-dev-overlay/src/client.ts +++ b/packages/react-dev-overlay/src/client.ts @@ -87,6 +87,7 @@ function onRefresh() { Bus.emit({ type: Bus.TYPE_REFRESH }) } +export { getErrorByType } from './internal/helpers/getErrorByType' export { getNodeError } from './internal/helpers/nodeStackFrames' export { default as ReactDevOverlay } from './internal/ReactDevOverlay' export { diff --git a/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx b/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx index 60023315c9c2c3f..53446cf6014abcf 100644 --- a/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx +++ b/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx @@ -58,8 +58,14 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState { } } +type ErrorType = 'runtime' | 'build' | 'full-refresh' + const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({ children, + preventDisplay, +}: { + children?: React.ReactNode + preventDisplay?: ErrorType[] }) { const [state, dispatch] = React.useReducer< React.Reducer @@ -90,6 +96,7 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({ const isAboutToFullRefresh = state.isAboutToFullRefresh const isMounted = hasBuildError || hasRuntimeErrors || isAboutToFullRefresh + return ( @@ -101,7 +108,16 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({ - {hasBuildError ? ( + {shouldPreventDisplay( + hasBuildError + ? 'build' + : hasRuntimeErrors + ? 'runtime' + : isAboutToFullRefresh + ? 'full-refresh' + : null, + preventDisplay + ) ? null : hasBuildError ? ( ) : hasRuntimeErrors ? ( @@ -114,4 +130,14 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({ ) } +const shouldPreventDisplay = ( + errorType?: ErrorType | null, + preventType?: ErrorType[] | null +) => { + if (!preventType || !errorType) { + return false + } + return preventType.includes(errorType) +} + export default ReactDevOverlay diff --git a/packages/react-dev-overlay/src/internal/container/Errors.tsx b/packages/react-dev-overlay/src/internal/container/Errors.tsx index c77339b0c6b36a7..556d3bd29d9947c 100644 --- a/packages/react-dev-overlay/src/internal/container/Errors.tsx +++ b/packages/react-dev-overlay/src/internal/container/Errors.tsx @@ -14,12 +14,9 @@ import { import { LeftRightDialogHeader } from '../components/LeftRightDialogHeader' import { Overlay } from '../components/Overlay' import { Toast } from '../components/Toast' +import { getErrorByType, ReadyRuntimeError } from '../helpers/getErrorByType' import { isNodeError } from '../helpers/nodeStackFrames' import { noop as css } from '../helpers/noop-template' -import { - getOriginalStackFrames, - OriginalStackFrame, -} from '../helpers/stack-frame' import { RuntimeError } from './RuntimeError' export type SupportedErrorEvent = { @@ -28,13 +25,6 @@ export type SupportedErrorEvent = { } export type ErrorsProps = { errors: SupportedErrorEvent[] } -export type ReadyRuntimeError = { - id: number - - runtime: true - error: Error - frames: OriginalStackFrame[] -} type ReadyErrorEvent = ReadyRuntimeError function getErrorSignature(ev: SupportedErrorEvent): string { @@ -82,32 +72,6 @@ const HotlinkedText: React.FC<{ ) } -async function getErrorByType( - ev: SupportedErrorEvent -): Promise { - const { id, event } = ev - switch (event.type) { - case TYPE_UNHANDLED_ERROR: - case TYPE_UNHANDLED_REJECTION: { - return { - id, - runtime: true, - error: event.reason, - frames: await getOriginalStackFrames( - isNodeError(event.reason), - event.frames - ), - } - } - default: { - break - } - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const _: never = event - throw new Error('type system invariant violation') -} - export const Errors: React.FC = function Errors({ errors }) { const [lookups, setLookups] = React.useState( {} as { [eventId: string]: ReadyErrorEvent } diff --git a/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx b/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx index e1b82ca5d7b2328..74665ef24c62b37 100644 --- a/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx +++ b/packages/react-dev-overlay/src/internal/container/RuntimeError.tsx @@ -1,9 +1,9 @@ import * as React from 'react' import { StackFrame } from 'stacktrace-parser' import { CodeFrame } from '../components/CodeFrame' +import { ReadyRuntimeError } from '../helpers/getErrorByType' import { noop as css } from '../helpers/noop-template' import { getFrameSource, OriginalStackFrame } from '../helpers/stack-frame' -import { ReadyRuntimeError } from './Errors' export type RuntimeErrorProps = { error: ReadyRuntimeError } diff --git a/packages/react-dev-overlay/src/internal/helpers/getErrorByType.ts b/packages/react-dev-overlay/src/internal/helpers/getErrorByType.ts new file mode 100644 index 000000000000000..6e5276d1fdb5b29 --- /dev/null +++ b/packages/react-dev-overlay/src/internal/helpers/getErrorByType.ts @@ -0,0 +1,37 @@ +import { TYPE_UNHANDLED_ERROR, TYPE_UNHANDLED_REJECTION } from '../bus' +import { SupportedErrorEvent } from '../container/Errors' +import { isNodeError } from './nodeStackFrames' +import { getOriginalStackFrames, OriginalStackFrame } from './stack-frame' + +export type ReadyRuntimeError = { + id: number + runtime: true + error: Error + frames: OriginalStackFrame[] +} + +export async function getErrorByType( + ev: SupportedErrorEvent +): Promise { + const { id, event } = ev + switch (event.type) { + case TYPE_UNHANDLED_ERROR: + case TYPE_UNHANDLED_REJECTION: { + return { + id, + runtime: true, + error: event.reason, + frames: await getOriginalStackFrames( + isNodeError(event.reason), + event.frames + ), + } + } + default: { + break + } + } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const _: never = event + throw new Error('type system invariant violation') +}