Skip to content

Commit

Permalink
address feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
huozhi committed Oct 18, 2024
1 parent 93bba33 commit f712e0e
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ export default class ReactDevOverlay extends React.PureComponent<
> {
state = { reactError: null }

static getDerivedStateFromError(err: Error): ReactDevOverlayState {
if (!err.stack) return { reactError: null }
static getDerivedStateFromError(error: Error): ReactDevOverlayState {
if (!error.stack) return { reactError: null }

const error = getReactStitchedError(err)
const stitchedError = getReactStitchedError(error)
return {
reactError: {
id: 0,
event: {
type: ACTION_UNHANDLED_ERROR,
reason: error,
frames: parseStack(error.stack || ''),
reason: stitchedError,
frames: parseStack(stitchedError.stack || ''),
},
},
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import isError from '../../../../../lib/is-error'

const captureOwnerStack = process.env.__NEXT_REACT_OWNER_STACK
? (React as any).captureOwnerStack
Expand All @@ -9,12 +10,12 @@ const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(
`(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\@)`
)

export function getReactStitchedError<T = unknown>(err: T): Error {
export function getReactStitchedError<T = unknown>(err: T): Error | T {
if (!process.env.__NEXT_REACT_OWNER_STACK) {
return err as any
return err
}

const isErrorInstance = err instanceof Error
const isErrorInstance = isError(err)
const originStack = isErrorInstance ? err.stack || '' : ''
const originMessage = isErrorInstance ? err.message : ''
const stackLines = originStack.split('\n')
Expand Down
14 changes: 11 additions & 3 deletions packages/next/src/client/react-client-callbacks/app-router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,12 @@ export const onCaughtError: HydrationOptions['onCaughtError'] = (
}

// Create error location with errored component and error boundary, to match the behavior of default React onCaughtError handler.
const errorLocation = `The above error occurred in the <${componentThatErroredName}> component. It was handled by the <${errorBoundaryName}> error boundary.`
const errorBoundaryMessage = `It was handled by the <${errorBoundaryName}> error boundary.`
const componentErrorMessage = componentThatErroredName
? `The above error occurred in the <${componentThatErroredName}> component.`
: `The above error occurred in one of your components.`

const errorLocation = `${componentErrorMessage} ${errorBoundaryMessage}`

const originErrorStack = isError(err) ? err.stack || '' : ''

Expand Down Expand Up @@ -77,9 +82,12 @@ export const onUncaughtError: HydrationOptions['onUncaughtError'] = (
}

// Create error location with errored component and error boundary, to match the behavior of default React onCaughtError handler.
const errorLocation = `The above error occurred in the <${componentThatErroredName}> component.`
const errorLocation = componentThatErroredName
? `The above error occurred in the <${componentThatErroredName}> component.`
: `The above error occurred in one of your components.`

originConsoleError(stitchedError.stack + '\n\n' + errorLocation)
const errStack = (stitchedError as any).stack || ''
originConsoleError(errStack + '\n\n' + errorLocation)
// Always log the modified error instance so the console.error interception side can pick it up easily without constructing an error again.
reportGlobalError(stitchedError)
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ export const reportGlobalError =
? // In modern browsers, reportError will dispatch an error event,
// emulating an uncaught JavaScript error.
reportError
: (error: any) => {
: (error: unknown) => {
window.console.error(error)
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { nextTestSetup } from 'e2e-utils'
import { assertHasRedbox, assertNoRedbox } from 'next-test-utils'

// TODO: parse the location and assert them in the future
// Remove the location `()` part in every line of stack trace;
// Remove the leading spaces in every line of stack trace;
// Remove the trailing spaces in every line of stack trace;
Expand Down

0 comments on commit f712e0e

Please sign in to comment.