From 78c3da738a6abddfc692c24ebfff65045e765b26 Mon Sep 17 00:00:00 2001 From: Jude Gao Date: Fri, 31 Jan 2025 14:24:26 -0500 Subject: [PATCH] consolidate --- .../call-stack-frame/call-stack-frame.tsx | 4 +- .../components/code-frame/code-frame.tsx | 2 +- .../errors/call-stack/call-stack.tsx | 2 +- .../error-overlay-floating-header.tsx | 2 +- .../error-overlay-layout.tsx | 2 +- .../error-overlay-pagination.tsx | 3 +- .../errors/error-overlay/error-overlay.tsx | 2 +- .../internal/components/terminal/terminal.tsx | 2 +- .../internal/container/errors.stories.tsx | 2 +- .../internal/container/errors.tsx | 2 +- .../container/runtime-error/index.tsx | 3 +- .../container/runtime-error/use-error-hook.ts | 6 +- .../internal/helpers/get-error-by-type.ts | 50 ------ .../internal/helpers/stack-frame.ts | 147 ------------------ 14 files changed, 16 insertions(+), 213 deletions(-) delete mode 100644 packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/get-error-by-type.ts delete mode 100644 packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/stack-frame.ts diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx index a0c1084183b85..624fccf9d72a3 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx @@ -1,9 +1,9 @@ import type { StackFrame } from 'next/dist/compiled/stacktrace-parser' -import type { OriginalStackFrame } from '../../helpers/stack-frame' +import type { OriginalStackFrame } from '../../../../internal/helpers/stack-frame' import { HotlinkedText } from '../hot-linked-text' import { ExternalIcon } from '../../icons/external' -import { getFrameSource } from '../../helpers/stack-frame' +import { getFrameSource } from '../../../../internal/helpers/stack-frame' import { useOpenInEditor } from '../../helpers/use-open-in-editor' import { noop as css } from '../../helpers/noop-template' diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx index e26a42e109526..2432f3e9d28b1 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx @@ -5,7 +5,7 @@ import stripAnsi from 'next/dist/compiled/strip-ansi' import { useMemo } from 'react' import { HotlinkedText } from '../hot-linked-text' -import { getFrameSource } from '../../helpers/stack-frame' +import { getFrameSource } from '../../../../internal/helpers/stack-frame' import { useOpenInEditor } from '../../helpers/use-open-in-editor' import { noop as css } from '../../helpers/noop-template' import { ExternalIcon } from '../../icons/external' diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/call-stack/call-stack.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/call-stack/call-stack.tsx index bc383762cfa15..d6aa505cbbff0 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/call-stack/call-stack.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/call-stack/call-stack.tsx @@ -1,4 +1,4 @@ -import type { OriginalStackFrame } from '../../../helpers/stack-frame' +import type { OriginalStackFrame } from '../../../../../internal/helpers/stack-frame' import { useMemo, useState } from 'react' import { CallStackFrame } from '../../call-stack-frame/call-stack-frame' import { noop as css } from '../../../helpers/noop-template' diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-floating-header/error-overlay-floating-header.tsx index b498f0ccb5d01..1b43b9cedbca7 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-floating-header/error-overlay-floating-header.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-floating-header/error-overlay-floating-header.tsx @@ -1,9 +1,9 @@ -import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type' import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info' import { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination' import { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info' import { noop as css } from '../../../helpers/noop-template' +import type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type' type ErrorOverlayFloatingHeaderProps = { readyErrors?: ReadyRuntimeError[] diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx index 0817574969041..bc6693f97e8fd 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx @@ -1,4 +1,3 @@ -import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type' import type { DebugInfo } from '../../../../../types' import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info' import type { ErrorMessageType } from '../error-message/error-message' @@ -33,6 +32,7 @@ import { import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body' import { CALL_STACK_STYLES } from '../call-stack/call-stack' import { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay' +import type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type' type ErrorOverlayLayoutProps = { errorMessage: ErrorMessageType diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx index d5f2dc6f185be..bbd6123de496f 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx @@ -1,9 +1,8 @@ -import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type' - import { useCallback, useEffect, useRef, useState } from 'react' import { noop as css } from '../../../helpers/noop-template' import { LeftArrow } from '../../../icons/left-arrow' import { RightArrow } from '../../../icons/right-arrow' +import type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type' type ErrorPaginationProps = { readyErrors: ReadyRuntimeError[] diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx index 022287f10a967..8eab88d0437fc 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx @@ -1,9 +1,9 @@ import type { OverlayState } from '../../../../../shared' -import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type' import { BuildError } from '../../../container/build-error' import { Errors } from '../../../container/errors' import { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error' +import type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type' export function ErrorOverlay({ state, diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx index 0125641b8f5dc..f48dd454fb7db 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx @@ -4,7 +4,7 @@ import { HotlinkedText } from '../hot-linked-text' import { EditorLink } from './editor-link' import { ExternalIcon } from '../../icons/external' import { noop as css } from '../../helpers/noop-template' -import { getFrameSource } from '../../helpers/stack-frame' +import { getFrameSource } from '../../../../internal/helpers/stack-frame' import { useOpenInEditor } from '../../helpers/use-open-in-editor' import { FileIcon } from '../../icons/file' diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx index f0c497817f999..c5e176b9dbeac 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react' -import type { ReadyRuntimeError } from '../helpers/get-error-by-type' import { Errors } from './errors' import { withShadowPortal } from '../storybook/with-shadow-portal' +import type { ReadyRuntimeError } from '../../../internal/helpers/get-error-by-type' const meta: Meta = { component: Errors, diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx index 826077b78f228..c1ecae8549949 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx @@ -1,7 +1,6 @@ import { useState, useMemo, useEffect } from 'react' import type { DebugInfo } from '../../../types' import { Overlay } from '../components/overlay' -import type { ReadyRuntimeError } from '../helpers/get-error-by-type' import { noop as css } from '../helpers/noop-template' import { RuntimeError } from './runtime-error' import type { VersionInfo } from '../../../../../../server/dev/parse-version-info' @@ -18,6 +17,7 @@ import { } from '../../../../errors/console-error' import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils' import { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout' +import type { ReadyRuntimeError } from '../../../internal/helpers/get-error-by-type' export type ErrorsProps = { readyErrors: ReadyRuntimeError[] diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx index 61f5576e4b6fe..9d57674c61d31 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/index.tsx @@ -1,11 +1,10 @@ -import type { ReadyRuntimeError } from '../../helpers/get-error-by-type' - import { useMemo } from 'react' import { CodeFrame } from '../../components/code-frame/code-frame' import { CallStack } from '../../components/errors/call-stack/call-stack' import { noop as css } from '../../helpers/noop-template' import { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html' +import type { ReadyRuntimeError } from '../../../../internal/helpers/get-error-by-type' export type RuntimeErrorProps = { error: ReadyRuntimeError } export function RuntimeError({ error }: RuntimeErrorProps) { diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts index d5b2c3579b75c..463328076dc6c 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts @@ -1,4 +1,3 @@ -import type { ReadyRuntimeError } from '../../helpers/get-error-by-type' import type { OverlayState, UnhandledErrorAction, @@ -6,11 +5,14 @@ import type { } from '../../../../shared' import { useMemo, useState, useEffect } from 'react' -import { getErrorByType } from '../../helpers/get-error-by-type' import { ACTION_UNHANDLED_ERROR, ACTION_UNHANDLED_REJECTION, } from '../../../../shared' +import { + getErrorByType, + type ReadyRuntimeError, +} from '../../../../internal/helpers/get-error-by-type' export type SupportedErrorEvent = { id: number diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/get-error-by-type.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/get-error-by-type.ts deleted file mode 100644 index 50b9c45a71c57..0000000000000 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/get-error-by-type.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { - ACTION_UNHANDLED_ERROR, - ACTION_UNHANDLED_REJECTION, -} from '../../../shared' -import type { SupportedErrorEvent } from '../container/runtime-error/use-error-hook' -import { getOriginalStackFrames } from './stack-frame' -import type { OriginalStackFrame } from './stack-frame' -import type { ComponentStackFrame } from './parse-component-stack' -import { getErrorSource } from '../../../../../../shared/lib/error-source' - -export type ReadyRuntimeError = { - id: number - runtime: true - error: Error - frames: OriginalStackFrame[] - componentStackFrames?: ComponentStackFrame[] -} - -export async function getErrorByType( - ev: SupportedErrorEvent, - isAppDir: boolean -): Promise { - const { id, event } = ev - switch (event.type) { - case ACTION_UNHANDLED_ERROR: - case ACTION_UNHANDLED_REJECTION: { - const readyRuntimeError: ReadyRuntimeError = { - id, - runtime: true, - error: event.reason, - frames: await getOriginalStackFrames( - event.frames, - getErrorSource(event.reason), - isAppDir, - event.reason.toString() - ), - } - if (event.type === ACTION_UNHANDLED_ERROR) { - readyRuntimeError.componentStackFrames = event.componentStackFrames - } - return readyRuntimeError - } - default: { - break - } - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const _: never = event as never - throw new Error('type system invariant violation') -} diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/stack-frame.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/stack-frame.ts deleted file mode 100644 index 68bb44681d17c..0000000000000 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/helpers/stack-frame.ts +++ /dev/null @@ -1,147 +0,0 @@ -import type { StackFrame } from 'next/dist/compiled/stacktrace-parser' -import type { OriginalStackFrameResponse } from '../../../server/shared' -import { - isWebpackInternalResource, - formatFrameSourceFile, -} from './webpack-module-path' -export interface OriginalStackFrame extends OriginalStackFrameResponse { - error: boolean - reason: string | null - external: boolean - ignored: boolean - sourceStackFrame: StackFrame -} - -function getOriginalStackFrame( - source: StackFrame, - type: 'server' | 'edge-server' | null, - isAppDir: boolean, - errorMessage: string -): Promise { - async function _getOriginalStackFrame(): Promise { - const params = new URLSearchParams() - params.append('isServer', String(type === 'server')) - params.append('isEdgeServer', String(type === 'edge-server')) - params.append('isAppDirectory', String(isAppDir)) - params.append('errorMessage', errorMessage) - for (const key in source) { - params.append(key, ((source as any)[key] ?? '').toString()) - } - - const controller = new AbortController() - const tm = setTimeout(() => controller.abort(), 3000) - const res = await self - .fetch( - `${ - process.env.__NEXT_ROUTER_BASEPATH || '' - }/__nextjs_original-stack-frame?${params.toString()}`, - { signal: controller.signal } - ) - .finally(() => { - clearTimeout(tm) - }) - if (!res.ok || res.status === 204) { - return Promise.reject(new Error(await res.text())) - } - - const body: OriginalStackFrameResponse = await res.json() - return { - error: false, - reason: null, - external: false, - sourceStackFrame: source, - originalStackFrame: body.originalStackFrame, - originalCodeFrame: body.originalCodeFrame || null, - sourcePackage: body.sourcePackage, - ignored: body.originalStackFrame?.ignored || false, - } - } - - // TODO: merge this section into ignoredList handling - if ( - source.file === 'file://' || - source.file?.match(/^node:/) || - source.file?.match(/https?:\/\//) - ) { - return Promise.resolve({ - error: false, - reason: null, - external: true, - sourceStackFrame: source, - originalStackFrame: null, - originalCodeFrame: null, - sourcePackage: null, - ignored: true, - }) - } - - return _getOriginalStackFrame().catch((err: Error) => ({ - error: true, - reason: err?.message ?? err?.toString() ?? 'Unknown Error', - external: false, - sourceStackFrame: source, - originalStackFrame: null, - originalCodeFrame: null, - sourcePackage: null, - ignored: false, - })) -} - -export function getOriginalStackFrames( - frames: StackFrame[], - type: 'server' | 'edge-server' | null, - isAppDir: boolean, - errorMessage: string -) { - return Promise.all( - frames.map((frame) => - getOriginalStackFrame(frame, type, isAppDir, errorMessage) - ) - ) -} - -export function getFrameSource(frame: StackFrame): string { - if (!frame.file) return '' - - const isWebpackFrame = isWebpackInternalResource(frame.file) - - let str = '' - // Skip URL parsing for webpack internal file paths. - if (isWebpackFrame) { - str = formatFrameSourceFile(frame.file) - } else { - try { - const u = new URL(frame.file) - - let parsedPath = '' - // Strip the origin for same-origin scripts. - if (globalThis.location?.origin !== u.origin) { - // URLs can be valid without an `origin`, so long as they have a - // `protocol`. However, `origin` is preferred. - if (u.origin === 'null') { - parsedPath += u.protocol - } else { - parsedPath += u.origin - } - } - - // Strip query string information as it's typically too verbose to be - // meaningful. - parsedPath += u.pathname - str = formatFrameSourceFile(parsedPath) - } catch { - str = formatFrameSourceFile(frame.file) - } - } - - if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) { - if (str) { - if (frame.column != null) { - str += ` (${frame.lineNumber}:${frame.column})` - } else { - str += ` (${frame.lineNumber})` - } - } - } - return str -}