merge pages and app overlays (#60899)

### What

Merges the package into the internal overlay.


### Detailed Changes

* Move `@next/react-dev-overlay` into next package and rename the import
paths.
* Fix the `getErrorSource` symbol issue, use `Symbol.for()` instead of
`Symbol`
* Extra `getErrorSource` into single lib as it's being used in a lot of
places, this will keep the same bundle size

Closes PACK-2261
Closes NEXT-1977

---------

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

packages/next/package.json

@@ -147,7 +147,6 @@
     "@napi-rs/triples": "1.2.0",
     "@next/polyfill-module": "14.1.1-canary.52",
     "@next/polyfill-nomodule": "14.1.1-canary.52",
-    "@next/react-dev-overlay": "14.1.1-canary.52",
     "@next/react-refresh-utils": "14.1.1-canary.52",
     "@next/swc": "14.1.1-canary.52",
     "@opentelemetry/api": "1.6.0",

packages/next/src/build/collect-build-traces.ts

@@ -302,7 +302,6 @@ export async function collectBuildTraces({
         '**/next/dist/compiled/webpack/(bundle4|bundle5).js',
         '**/node_modules/webpack5/**/*',
         '**/next/dist/server/lib/route-resolver*',
-        'next/dist/compiled/@next/react-dev-overlay/dist/**/*',
         'next/dist/compiled/semver/semver/**/*.js',
 
         ...(ciEnvironment.hasNextSupport

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.ts

@@ -1,6 +1,6 @@
 import { bold, cyan, green, red, yellow } from '../../../../lib/picocolors'
 import { SimpleWebpackError } from './simpleWebpackError'
-import { createOriginalStackFrame } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
+import { createOriginalStackFrame } from '../../../../client/components/react-dev-overlay/server/middleware'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 
 // Based on https://github.com/webpack/webpack/blob/fcdd04a833943394bbb0a9eeb54a962a24cc7e41/lib/stats/DefaultStatsFactoryPlugin.js#L422-L431

packages/next/src/client/app-index.tsx

@@ -157,9 +157,9 @@ export function hydrate() {
   if (process.env.NODE_ENV !== 'production') {
     const rootLayoutMissingTagsError = (self as any)
       .__next_root_layout_missing_tags_error
-    const HotReload: typeof import('./components/react-dev-overlay/hot-reloader-client').default =
-      require('./components/react-dev-overlay/hot-reloader-client')
-        .default as typeof import('./components/react-dev-overlay/hot-reloader-client').default
+    const HotReload: typeof import('./components/react-dev-overlay/app/hot-reloader-client').default =
+      require('./components/react-dev-overlay/app/hot-reloader-client')
+        .default as typeof import('./components/react-dev-overlay/app/hot-reloader-client').default
 
     // Don't try to hydrate if root layout is missing required tags, render error instead
     if (rootLayoutMissingTagsError) {
@@ -236,12 +236,12 @@ export function hydrate() {
     if (process.env.NODE_ENV !== 'production') {
       // if an error is thrown while rendering an RSC stream, this will catch it in dev
       // and show the error overlay
-      const ReactDevOverlay: typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default =
-        require('./components/react-dev-overlay/internal/ReactDevOverlay')
-          .default as typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default
+      const ReactDevOverlay: typeof import('./components/react-dev-overlay/app/ReactDevOverlay').default =
+        require('./components/react-dev-overlay/app/ReactDevOverlay')
+          .default as typeof import('./components/react-dev-overlay/app/ReactDevOverlay').default
 
-      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE =
-        require('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE
+      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE =
+        require('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE
 
       const getSocketUrl: typeof import('./components/react-dev-overlay/internal/helpers/get-socket-url').getSocketUrl =
         require('./components/react-dev-overlay/internal/helpers/get-socket-url')

packages/next/src/client/components/app-router.tsx

@@ -619,8 +619,8 @@ function Router({
         </DevRootNotFoundBoundary>
       )
     }
-    const HotReloader: typeof import('./react-dev-overlay/hot-reloader-client').default =
-      require('./react-dev-overlay/hot-reloader-client').default
+    const HotReloader: typeof import('./react-dev-overlay/app/hot-reloader-client').default =
+      require('./react-dev-overlay/app/hot-reloader-client').default
 
     content = <HotReloader assetPrefix={assetPrefix}>{content}</HotReloader>
   }

packages/next/src/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx → packages/next/src/client/components/react-dev-overlay/app/ReactDevOverlay.tsx

@@ -5,15 +5,15 @@ import type {
   UnhandledErrorAction,
 } from './error-overlay-reducer'
 
-import { ShadowPortal } from './components/ShadowPortal'
-import { BuildError } from './container/BuildError'
-import { Errors } from './container/Errors'
-import type { SupportedErrorEvent } from './container/Errors'
-import { RootLayoutError } from './container/RootLayoutError'
-import { parseStack } from './helpers/parseStack'
-import { Base } from './styles/Base'
-import { ComponentStyles } from './styles/ComponentStyles'
-import { CssReset } from './styles/CssReset'
+import { ShadowPortal } from '../internal/components/ShadowPortal'
+import { BuildError } from '../internal/container/BuildError'
+import { Errors } from '../internal/container/Errors'
+import type { SupportedErrorEvent } from '../internal/container/Errors'
+import { RootLayoutError } from '../internal/container/RootLayoutError'
+import { parseStack } from '../internal/helpers/parseStack'
+import { Base } from '../internal/styles/Base'
+import { ComponentStyles } from '../internal/styles/ComponentStyles'
+import { CssReset } from '../internal/styles/CssReset'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
@@ -86,12 +86,14 @@ class ReactDevOverlay extends React.PureComponent<
               />
             ) : reactError ? (
               <Errors
+                isAppDir={true}
                 versionInfo={state.versionInfo}
                 initialDisplayState="fullscreen"
                 errors={[reactError]}
               />
             ) : hasRuntimeErrors ? (
               <Errors
+                isAppDir={true}
                 initialDisplayState="minimized"
                 errors={state.errors}
                 versionInfo={state.versionInfo}

packages/next/src/client/components/react-dev-overlay/internal/error-overlay-reducer.ts → packages/next/src/client/components/react-dev-overlay/app/error-overlay-reducer.ts

@@ -1,7 +1,7 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
-import type { SupportedErrorEvent } from './container/Errors'
-import type { ComponentStackFrame } from './helpers/parse-component-stack'
+import type { SupportedErrorEvent } from '../internal/container/Errors'
+import type { ComponentStackFrame } from '../internal/helpers/parse-component-stack'
 
 export const ACTION_BUILD_OK = 'build-ok'
 export const ACTION_BUILD_ERROR = 'build-error'

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

@@ -7,41 +7,41 @@ import React, {
   startTransition,
 } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import formatWebpackMessages from '../../dev/error-overlay/format-webpack-messages'
-import { useRouter } from '../navigation'
+import formatWebpackMessages from '../../../dev/error-overlay/format-webpack-messages'
+import { useRouter } from '../../navigation'
 import {
   ACTION_VERSION_INFO,
   INITIAL_OVERLAY_STATE,
   errorOverlayReducer,
-} from './internal/error-overlay-reducer'
+} from './error-overlay-reducer'
 import {
   ACTION_BUILD_OK,
   ACTION_BUILD_ERROR,
   ACTION_BEFORE_REFRESH,
   ACTION_REFRESH,
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from './internal/error-overlay-reducer'
-import { parseStack } from './internal/helpers/parseStack'
-import ReactDevOverlay from './internal/ReactDevOverlay'
+} from './error-overlay-reducer'
+import { parseStack } from '../internal/helpers/parseStack'
+import ReactDevOverlay from './ReactDevOverlay'
 import {
   RuntimeErrorHandler,
   useErrorHandler,
-} from './internal/helpers/use-error-handler'
+} from '../internal/helpers/use-error-handler'
 import {
   useSendMessage,
   useTurbopack,
   useWebsocket,
   useWebsocketPing,
-} from './internal/helpers/use-websocket'
-import { parseComponentStack } from './internal/helpers/parse-component-stack'
-import type { VersionInfo } from '../../../server/dev/parse-version-info'
-import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../server/dev/hot-reloader-types'
+} from '../internal/helpers/use-websocket'
+import { parseComponentStack } from '../internal/helpers/parse-component-stack'
+import type { VersionInfo } from '../../../../server/dev/parse-version-info'
+import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
 import type {
   HMR_ACTION_TYPES,
   TurbopackMsgToBrowser,
-} from '../../../server/dev/hot-reloader-types'
-import { extractModulesFromTurbopackMessage } from '../../../server/dev/extract-modules-from-turbopack-message'
+} from '../../../../server/dev/hot-reloader-types'
+import { extractModulesFromTurbopackMessage } from '../../../../server/dev/extract-modules-from-turbopack-message'
 
 interface Dispatcher {
   onBuildOk(): void

packages/next/src/client/components/react-dev-overlay/internal/components/Dialog/styles.ts

@@ -8,7 +8,7 @@ const styles = css`
     margin-right: auto;
     margin-left: auto;
     outline: none;
-    background: white;
+    background: var(--color-background);
     border-radius: var(--size-gap);
     box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
       rgba(0, 0, 0, 0.25);

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

@@ -147,7 +147,6 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
               />
             </svg>
           </button>
-          &nbsp;
           {children}
         </nav>
         {close ? (

packages/next/src/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts

@@ -58,6 +58,8 @@ const styles = css`
 
     opacity: 0.4;
     transition: opacity 0.25s ease;
+
+    color: var(--color-font);
   }
   [data-nextjs-dialog-left-right] > button:last-of-type:hover {
     opacity: 0.7;

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

@@ -1,4 +1,3 @@
-// @ts-ignore
 import allyTrap from './maintain--tab-focus'
 import * as React from 'react'
 import { lock, unlock } from './body-locker'

packages/next/src/client/components/react-dev-overlay/internal/components/Overlay/maintain--tab-focus.ts

@@ -918,7 +918,7 @@ var focusSvgForeignobjectTabindex = {
     element.innerHTML = generate(
       '<foreignObject tabindex="-1"><input type="text" /></foreignObject>'
     )
-    // Safari 8's quersSelector() can't identify foreignObject, but getElementyByTagName() can
+    // Safari 8's querySelector() can't identify foreignObject, but getElementsByTagName() can
     return (
       element.querySelector('foreignObject') ||
       element.getElementsByTagName('foreignObject')[0]

packages/next/src/client/components/react-dev-overlay/internal/components/Overlay/styles.tsx

@@ -29,7 +29,7 @@ const styles = css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(17, 17, 17, 0.2);
+    background-color: var(--color-backdrop);
     pointer-events: all;
     z-index: -1;
   }

packages/next/src/client/components/react-dev-overlay/internal/components/hot-linked-text/index.tsx

@@ -4,7 +4,7 @@ import {
   MAGIC_IDENTIFIER_REGEX,
 } from '../../../../../../shared/lib/magic-identifier'
 
-const linkRegex = /https?:\/\/[^\s/$.?#].[^\s"]*/i
+const linkRegex = /https?:\/\/[^\s/$.?#].[^\s)'"]*/i
 
 const splitRegexp = new RegExp(`(${MAGIC_IDENTIFIER_REGEX.source}|\\s+)`)
 
@@ -19,9 +19,12 @@ export const HotlinkedText: React.FC<{
     <>
       {wordsAndWhitespaces.map((word, index) => {
         if (linkRegex.test(word)) {
+          const link = linkRegex.exec(word)!
           return (
             <React.Fragment key={`link-${index}`}>
-              <a href={word}>{word}</a>
+              <a href={link[0]} target="_blank" rel="noreferrer noopener">
+                {word}
+              </a>
             </React.Fragment>
           )
         }

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

@@ -67,6 +67,6 @@ export const styles = css`
   }
 
   .nextjs-container-build-error-body small {
-    color: #757575;
+    color: var(--color-font);
   }
 `

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

@@ -2,11 +2,11 @@ import { useState, useEffect, useMemo, useCallback } from 'react'
 import {
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import type {
   UnhandledErrorAction,
   UnhandledRejectionAction,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import {
   Dialog,
   DialogBody,
@@ -18,19 +18,20 @@ import { Overlay } from '../components/Overlay'
 import { Toast } from '../components/Toast'
 import { getErrorByType } from '../helpers/getErrorByType'
 import type { ReadyRuntimeError } from '../helpers/getErrorByType'
-import { getErrorSource } from '../helpers/nodeStackFrames'
 import { noop as css } from '../helpers/noop-template'
 import { CloseIcon } from '../icons/CloseIcon'
 import { RuntimeError } from './RuntimeError'
 import { VersionStalenessInfo } from '../components/VersionStalenessInfo'
 import type { VersionInfo } from '../../../../../server/dev/parse-version-info'
+import { getErrorSource } from '../../../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
 
 export type SupportedErrorEvent = {
   id: number
   event: UnhandledErrorAction | UnhandledRejectionAction
 }
 export type ErrorsProps = {
+  isAppDir: boolean
   errors: SupportedErrorEvent[]
   initialDisplayState: DisplayState
   versionInfo?: VersionInfo
@@ -57,6 +58,7 @@ function getErrorSignature(ev: SupportedErrorEvent): string {
 }
 
 export function Errors({
+  isAppDir,
   errors,
   initialDisplayState,
   versionInfo,
@@ -105,7 +107,7 @@ export function Errors({
     }
     let mounted = true
 
-    getErrorByType(nextError).then(
+    getErrorByType(nextError, isAppDir).then(
       (resolved) => {
         // 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,
@@ -122,7 +124,7 @@ export function Errors({
     return () => {
       mounted = false
     }
-  }, [nextError])
+  }, [nextError, isAppDir])
 
   const [displayState, setDisplayState] =
     useState<DisplayState>(initialDisplayState)

packages/next/src/client/components/react-dev-overlay/internal/helpers/getErrorByType.ts

@@ -1,12 +1,12 @@
 import {
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import type { SupportedErrorEvent } from '../container/Errors'
-import { getErrorSource } from './nodeStackFrames'
 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
@@ -17,7 +17,8 @@ export type ReadyRuntimeError = {
 }
 
 export async function getErrorByType(
-  ev: SupportedErrorEvent
+  ev: SupportedErrorEvent,
+  isAppDir: boolean
 ): Promise<ReadyRuntimeError> {
   const { id, event } = ev
   switch (event.type) {
@@ -30,6 +31,7 @@ export async function getErrorByType(
         frames: await getOriginalStackFrames(
           event.frames,
           getErrorSource(event.reason),
+          isAppDir,
           event.reason.toString()
         ),
       }

packages/react-dev-overlay/src/internal/helpers/getRawSourceMap.ts → packages/next/src/client/components/react-dev-overlay/internal/helpers/getRawSourceMap.ts

@@ -1,4 +1,3 @@
-// @ts-ignore Package Exists
 import dataUriToBuffer from 'next/dist/compiled/data-uri-to-buffer'
 import { getSourceMapUrl } from './getSourceMapUrl'
 

packages/next/src/client/components/react-dev-overlay/internal/helpers/launchEditor.ts

@@ -26,7 +26,6 @@ import child_process from 'child_process'
 import fs from 'fs'
 import os from 'os'
 import path from 'path'
-// @ts-ignore
 import shellQuote from 'next/dist/compiled/shell-quote'
 
 function isTerminalEditor(editor: string) {

packages/next/src/client/components/react-dev-overlay/internal/helpers/nodeStackFrames.ts

@@ -1,5 +1,9 @@
 import { parse } from 'next/dist/compiled/stacktrace-parser'
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
+import {
+  decorateServerError,
+  type ErrorSourceType,
+} from '../../../../../shared/lib/error-source'
 
 export function getFilesystemFrame(frame: StackFrame): StackFrame {
   const f: StackFrame = { ...frame }
@@ -20,24 +24,7 @@ export function getFilesystemFrame(frame: StackFrame): StackFrame {
   return f
 }
 
-const symbolError = Symbol('NextjsError')
-
-export function getErrorSource(error: Error): 'server' | 'edge-server' | null {
-  return (error as any)[symbolError] || null
-}
-
-type ErrorType = 'edge-server' | 'server'
-
-export function decorateServerError(error: Error, type: ErrorType) {
-  Object.defineProperty(error, symbolError, {
-    writable: false,
-    enumerable: false,
-    configurable: false,
-    value: type,
-  })
-}
-
-export function getServerError(error: Error, type: ErrorType): Error {
+export function getServerError(error: Error, type: ErrorSourceType): Error {
   let n: Error
   try {
     throw new Error(error.message)