From c20afd3852efd854664a49e18eef38e2bdfec4a5 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 25 Oct 2024 18:16:48 +0200 Subject: [PATCH] revert unrelated changes --- .../globals/intercept-console-error.ts | 63 ++++++++----------- .../internal/helpers/stitched-error.ts | 16 ++++- .../helpers/strip-stack-frame.test.ts | 32 ---------- .../internal/helpers/strip-stack-frame.ts | 21 ------- 4 files changed, 40 insertions(+), 92 deletions(-) delete mode 100644 packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.test.ts delete mode 100644 packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.ts diff --git a/packages/next/src/client/components/globals/intercept-console-error.ts b/packages/next/src/client/components/globals/intercept-console-error.ts index 1a0932c430c76..5eb5f8c814151 100644 --- a/packages/next/src/client/components/globals/intercept-console-error.ts +++ b/packages/next/src/client/components/globals/intercept-console-error.ts @@ -3,8 +3,6 @@ import { isNextRouterError } from '../is-next-router-error' import { captureStackTrace } from '../react-dev-overlay/internal/helpers/capture-stack-trace' import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler' -const NEXT_CONSOLE_STACK_FRAME = 'next-console-stack-frame' - export const originConsoleError = window.console.error // Patch console.error to collect information about hydration errors @@ -13,48 +11,41 @@ export function patchConsoleError() { if (typeof window === 'undefined') { return } + window.console.error = function error(...args: any[]) { + let maybeError: unknown + let isReplayedError = false - const namedLoggerInstance = { - [NEXT_CONSOLE_STACK_FRAME](...args: any[]) { - let maybeError: unknown - let isReplayedError = false - - if (process.env.NODE_ENV !== 'production') { - const replayedError = matchReplayedError(...args) - if (replayedError) { - isReplayedError = true - maybeError = replayedError - } else { - // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78 - maybeError = args[1] - } + if (process.env.NODE_ENV !== 'production') { + const replayedError = matchReplayedError(...args) + if (replayedError) { + isReplayedError = true + maybeError = replayedError } else { - maybeError = args[0] + // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78 + maybeError = args[1] } + } else { + maybeError = args[0] + } - if (!isNextRouterError(maybeError)) { - if (process.env.NODE_ENV !== 'production') { - // Create an origin stack that pointing to the origin location of the error - if (!isReplayedError && isError(maybeError)) { - captureStackTrace(maybeError) - } - - handleClientError( - // replayed errors have their own complex format string that should be used, - // but if we pass the error directly, `handleClientError` will ignore it - maybeError, - args - ) + if (!isNextRouterError(maybeError)) { + if (process.env.NODE_ENV !== 'production') { + // Create an origin stack that pointing to the origin location of the error + if (!isReplayedError && isError(maybeError)) { + captureStackTrace(maybeError) } - originConsoleError.apply(window.console, args) + handleClientError( + // replayed errors have their own complex format string that should be used, + // but if we pass the error directly, `handleClientError` will ignore it + maybeError, + args + ) } - }, - } - window.console.error = namedLoggerInstance[NEXT_CONSOLE_STACK_FRAME].bind( - window.console - ) + originConsoleError.apply(window.console, args) + } + } } function matchReplayedError(...args: unknown[]): Error | null { diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts index d4d513c520474..3e40528344e8c 100644 --- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts +++ b/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts @@ -1,16 +1,26 @@ import React from 'react' import isError from '../../../../../lib/is-error' -import { stripReactStackTrace } from './strip-stack-frame' + +const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame' +const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp( + `(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\@)` +) export function getReactStitchedError(err: T): Error | T { if (typeof (React as any).captureOwnerStack !== 'function') { return err } - const isErrorInstance = isError(err) const originStack = isErrorInstance ? err.stack || '' : '' const originMessage = isErrorInstance ? err.message : '' - let newStack = stripReactStackTrace(originStack) + const stackLines = originStack.split('\n') + const indexOfSplit = stackLines.findIndex((line) => + REACT_ERROR_STACK_BOTTOM_FRAME_REGEX.test(line) + ) + const isOriginalReactError = indexOfSplit >= 0 // has the react-stack-bottom-frame + let newStack = isOriginalReactError + ? stackLines.slice(0, indexOfSplit).join('\n') + : originStack const newError = new Error(originMessage) // Copy all enumerable properties, e.g. digest diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.test.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.test.ts deleted file mode 100644 index d14ad337c88d6..0000000000000 --- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.test.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { stripReactStackTrace } from './strip-stack-frame' - -describe('stripReactStackTrace', () => { - it('strips stack after frame', () => { - const stack = `Error: test - at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - at react-stack-bottom-frame (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - ` - - const strippedStack = stripReactStackTrace(stack) - expect(strippedStack).toMatchInlineSnapshot(` - " at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - " - `) - }) - - it('strips nothing if there is no react stack', () => { - const stack = `Error: test - at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - ` - - const strippedStack = stripReactStackTrace(stack) - expect(strippedStack).toMatchInlineSnapshot(` - "Error: test - at page (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - at foo (http://localhost:3000/_next/static/chunks/webpack.js:1:1) - " - `) - }) -}) diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.ts deleted file mode 100644 index 5149cf1c4591d..0000000000000 --- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/strip-stack-frame.ts +++ /dev/null @@ -1,21 +0,0 @@ -const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame' - -// Create a regex that matches the pivot frame in the stack trace -// chrome: at react-stack-bottom-frame -// safari: react-stack-bottom-frame@... -const createLocationRegex = (pivot: string) => - new RegExp(`(at ${pivot} )|(${pivot}\\@)`) - -export function stripReactStackTrace(stack: string): string { - const framePivotRegex = createLocationRegex(REACT_ERROR_STACK_BOTTOM_FRAME) - const stackLines = stack.split('\n') - const indexOfSplit = stackLines.findIndex((line) => - framePivotRegex.test(line) - ) - const isOriginalReactError = indexOfSplit >= 0 // has the frame pivot - const strippedStack = isOriginalReactError - ? stackLines.slice(indexOfSplit + 1).join('\n') - : stack - - return strippedStack -}