refactor: move the global client error code (#74699)

### What

Refactor the code that responsible for global client error handling,
since they could touch shared state so they shouldn't be forked in new
error overlay as hooks or utils. Hence I deleted the forked ones, and
move the existing used ones to the `/errors/` to avoid getting
duplicated.

packages/next/src/client/components/react-dev-overlay/internal/helpers/attach-hydration-error-state.ts → packages/next/src/client/components/errors/attach-hydration-error-state.ts

@@ -1,7 +1,7 @@
 import {
   isHydrationError,
   getDefaultHydrationErrorMessage,
-} from '../../../is-hydration-error'
+} from '../is-hydration-error'
 import {
   hydrationErrorState,
   getReactHydrationDiffSegments,

packages/next/src/client/components/react-dev-overlay/internal/helpers/enqueue-client-error.ts → packages/next/src/client/components/errors/enqueue-client-error.ts

@@ -1,4 +1,4 @@
-import { isHydrationError } from '../../../is-hydration-error'
+import { isHydrationError } from '../is-hydration-error'
 
 // Dedupe the two consecutive errors: If the previous one is same as current one, ignore the current one.
 export function enqueueConsecutiveDedupedError(

packages/next/src/client/components/react-dev-overlay/internal/helpers/hydration-error-info.ts → packages/next/src/client/components/errors/hydration-error-info.ts

@@ -1,4 +1,4 @@
-import { getHydrationErrorStackInfo } from '../../../is-hydration-error'
+import { getHydrationErrorStackInfo } from '../is-hydration-error'
 
 export type HydrationErrorState = {
   // Hydration warning template format: <message> <serverContent> <clientContent>

packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts → packages/next/src/client/components/errors/stitched-error.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import isError from '../../../../../lib/is-error'
+import isError from '../../../lib/is-error'
 
 const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts → packages/next/src/client/components/errors/use-error-handler.ts

@@ -1,12 +1,12 @@
 import { useEffect } from 'react'
 import { attachHydrationErrorState } from './attach-hydration-error-state'
-import { isNextRouterError } from '../../../is-next-router-error'
+import { isNextRouterError } from '../is-next-router-error'
 import { storeHydrationErrorStateFromConsoleArgs } from './hydration-error-info'
-import { formatConsoleArgs } from '../../../../lib/console'
-import isError from '../../../../../lib/is-error'
+import { formatConsoleArgs } from '../../lib/console'
+import isError from '../../../lib/is-error'
 import { createUnhandledError } from './console-error'
 import { enqueueConsecutiveDedupedError } from './enqueue-client-error'
-import { getReactStitchedError } from './stitched-error'
+import { getReactStitchedError } from '../errors/stitched-error'
 
 const queueMicroTask =
   globalThis.queueMicrotask || ((cb: () => void) => Promise.resolve().then(cb))

packages/next/src/client/components/globals/handle-global-errors.ts

@@ -1,3 +1,3 @@
-import { handleGlobalErrors } from '../react-dev-overlay/internal/helpers/use-error-handler'
+import { handleGlobalErrors } from '../errors/use-error-handler'
 
 handleGlobalErrors()

packages/next/src/client/components/globals/intercept-console-error.ts

@@ -1,6 +1,6 @@
 import isError from '../../../lib/is-error'
 import { isNextRouterError } from '../is-next-router-error'
-import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler'
+import { handleClientError } from '../errors/use-error-handler'
 
 export const originConsoleError = window.console.error
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx

@@ -18,11 +18,11 @@ import { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'
 import {
   type HydrationErrorState,
   getHydrationWarningType,
-} from '../helpers/hydration-error-info'
+} from '../../../../errors/hydration-error-info'
 import {
   getUnhandledErrorType,
   isUnhandledConsoleOrRejection,
-} from '../helpers/console-error'
+} from '../../../../errors/console-error'
 import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'
 import { DevToolsIndicator } from '../components/Errors/dev-tools-indicator/dev-tools-indicator'
 import { ErrorOverlayLayout } from '../components/Errors/error-overlay-layout/error-overlay-layout'

packages/next/src/client/components/react-dev-overlay/app/OldReactDevOverlay.tsx

@@ -9,7 +9,7 @@ import { ComponentStyles } from '../internal/styles/ComponentStyles'
 import { CssReset } from '../internal/styles/CssReset'
 import { RootLayoutMissingTagsError } from '../internal/container/RootLayoutMissingTagsError'
 import type { Dispatcher } from './hot-reloader-client'
-import { RuntimeErrorHandler } from '../internal/helpers/runtime-error-handler'
+import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
 
 interface ReactDevOverlayState {
   isReactError: boolean

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -24,8 +24,8 @@ import {
 } from '../shared'
 import { parseStack } from '../internal/helpers/parse-stack'
 import ReactDevOverlay from './ReactDevOverlay'
-import { useErrorHandler } from '../internal/helpers/use-error-handler'
-import { RuntimeErrorHandler } from '../internal/helpers/runtime-error-handler'
+import { useErrorHandler } from '../../errors/use-error-handler'
+import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
 import {
   useSendMessage,
   useTurbopack,
@@ -41,10 +41,10 @@ import type {
 } from '../../../../server/dev/hot-reloader-types'
 import { extractModulesFromTurbopackMessage } from '../../../../server/dev/extract-modules-from-turbopack-message'
 import { REACT_REFRESH_FULL_RELOAD_FROM_ERROR } from '../shared'
-import type { HydrationErrorState } from '../internal/helpers/hydration-error-info'
+import type { HydrationErrorState } from '../../errors/hydration-error-info'
 import type { DebugInfo } from '../types'
 import { useUntrackedPathname } from '../../navigation-untracked'
-import { getReactStitchedError } from '../internal/helpers/stitched-error'
+import { getReactStitchedError } from '../../errors/stitched-error'
 import { shouldRenderRootLevelErrorOverlay } from '../../../lib/is-error-thrown-while-rendering-rsc'
 import { handleDevBuildIndicatorHmrEvents } from '../../../dev/dev-build-indicator/internal/handle-dev-build-indicator-hmr-events'
 

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -28,13 +28,13 @@ import { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'
 import {
   type HydrationErrorState,
   getHydrationWarningType,
-} from '../helpers/hydration-error-info'
+} from '../../../errors/hydration-error-info'
 import { NodejsInspectorCopyButton } from '../components/nodejs-inspector'
 import { CopyButton } from '../components/copy-button'
 import {
   getUnhandledErrorType,
   isUnhandledConsoleOrRejection,
-} from '../helpers/console-error'
+} from '../../../errors/console-error'
 import { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'
 
 export type SupportedErrorEvent = {

packages/next/src/client/components/react-dev-overlay/pages/client.ts

@@ -4,7 +4,7 @@ import { parseComponentStack } from '../internal/helpers/parse-component-stack'
 import {
   hydrationErrorState,
   storeHydrationErrorStateFromConsoleArgs,
-} from '../internal/helpers/hydration-error-info'
+} from '../../errors/hydration-error-info'
 import {
   ACTION_BEFORE_REFRESH,
   ACTION_BUILD_ERROR,
@@ -15,7 +15,7 @@ import {
   ACTION_VERSION_INFO,
 } from '../shared'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
-import { attachHydrationErrorState } from '../internal/helpers/attach-hydration-error-state'
+import { attachHydrationErrorState } from '../../errors/attach-hydration-error-state'
 
 let isRegistered = false
 let stackTraceLimit: number | undefined = undefined