File size: 2,409 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import type { OverlayState } from '../../shared'
import type { StackFrame } from '../../../shared/stack-frame'
import { useMemo, useState, useEffect } from 'react'
import {
getErrorByType,
type ReadyRuntimeError,
} from '../../utils/get-error-by-type'
export type SupportedErrorEvent = {
id: number
error: Error
frames: readonly StackFrame[]
type: 'runtime' | 'recoverable' | 'console'
}
type Props = {
children: (params: {
runtimeErrors: ReadyRuntimeError[]
totalErrorCount: number
}) => React.ReactNode
state: OverlayState
isAppDir: boolean
}
export const RenderError = (props: Props) => {
const { state } = props
const isBuildError = !!state.buildError
if (isBuildError) {
return <RenderBuildError {...props} />
} else {
return <RenderRuntimeError {...props} />
}
}
const RenderRuntimeError = ({ children, state, isAppDir }: Props) => {
const { errors } = state
const [lookups, setLookups] = useState<{
[eventId: string]: ReadyRuntimeError
}>({})
const [runtimeErrors, nextError] = useMemo<
[ReadyRuntimeError[], SupportedErrorEvent | null]
>(() => {
let ready: ReadyRuntimeError[] = []
let next: SupportedErrorEvent | null = null
// Ensure errors are displayed in the order they occurred in:
for (let idx = 0; idx < errors.length; ++idx) {
const e = errors[idx]
const { id } = e
if (id in lookups) {
ready.push(lookups[id])
continue
}
next = e
break
}
return [ready, next]
}, [errors, lookups])
useEffect(() => {
if (nextError == null) {
return
}
let mounted = true
getErrorByType(nextError, isAppDir).then((resolved) => {
if (mounted) {
// We don't care if the desired error changed while we were resolving,
// thus we're not tracking it using a ref. Once the work has been done,
// we'll store it.
setLookups((m) => ({ ...m, [resolved.id]: resolved }))
}
})
return () => {
mounted = false
}
}, [nextError, isAppDir])
const totalErrorCount = errors.length
return children({ runtimeErrors, totalErrorCount })
}
const RenderBuildError = ({ children }: Props) => {
return children({
runtimeErrors: [],
// Build errors and missing root layout tags persist until fixed,
// so we can set a fixed error count of 1
totalErrorCount: 1,
})
}
|