feat: forward browser errors/logs to terminal

packages/next/package.json

@@ -309,6 +309,7 @@
     "react-refresh": "0.12.0",
     "recast": "0.23.11",
     "regenerator-runtime": "0.13.4",
+    "safe-stable-stringify": "2.5.0",
     "sass-loader": "15.0.0",
     "schema-utils2": "npm:schema-utils@2.7.1",
     "schema-utils3": "npm:schema-utils@3.0.0",

packages/next/src/build/define-env.ts

@@ -321,6 +321,10 @@ export function getDefineEnv({
       isDevToolPanelUIEnabled || !!config.experimental.devtoolSegmentExplorer,
     'process.env.__NEXT_DEVTOOL_NEW_PANEL_UI': isDevToolPanelUIEnabled,
 
+    'process.env.__NEXT_BROWSER_DEBUG_INFO_IN_TERMINAL': JSON.stringify(
+      config.experimental.browserDebugInfoInTerminal || false
+    ),
+
     // The devtools need to know whether or not to show an option to clear the
     // bundler cache. This option may be removed later once Turbopack's
     // persistent cache feature is more stable.

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

@@ -31,6 +31,7 @@ import reportHmrLatency from '../../report-hmr-latency'
 import { TurbopackHmr } from '../turbopack-hot-reloader-common'
 import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../../components/app-router-headers'
 import type { GlobalErrorState } from '../../../components/app-router-instance'
+import { useForwardConsoleLog } from '../../../../next-devtools/userspace/app/errors/use-forward-console-log'
 
 let mostRecentCompilationHash: any = null
 let __nextDevClientId = Math.round(Math.random() * 100 + Date.now())
@@ -456,8 +457,10 @@ export default function HotReload({
   useErrorHandler(dispatcher.onUnhandledError, dispatcher.onUnhandledRejection)
 
   const webSocketRef = useWebsocket(assetPrefix)
+
   useWebsocketPing(webSocketRef)
   const sendMessage = useSendMessage(webSocketRef)
+  useForwardConsoleLog(webSocketRef)
   const processTurbopackMessage = useTurbopack(sendMessage, (err) =>
     performFullReload(err, sendMessage)
   )
@@ -533,7 +536,6 @@ export default function HotReload({
     processTurbopackMessage,
     appIsrManifestRef,
   ])
-
   return (
     <AppDevOverlayErrorBoundary globalError={globalError}>
       <ReplaySsrOnlyErrors onBlockingError={dispatcher.openErrorOverlay} />

packages/next/src/client/dev/hot-reloader/pages/websocket.ts

@@ -1,3 +1,7 @@
+import {
+  isTerminalLoggingEnabled,
+  logQueue,
+} from '../../../../next-devtools/userspace/app/forward-logs'
 import {
   HMR_ACTIONS_SENT_TO_BROWSER,
   type HMR_ACTION_TYPES,
@@ -28,6 +32,9 @@ export function connectHMR(options: { path: string; assetPrefix: string }) {
     if (source) source.close()
 
     function handleOnline() {
+      if (isTerminalLoggingEnabled) {
+        logQueue.onSocketReady(source)
+      }
       reconnections = 0
       window.console.log('[HMR] connected')
     }

packages/next/src/compiled/safe-stable-stringify/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Ruben Bridgewater
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/next/src/compiled/safe-stable-stringify/package.json

@@ -0,0 +1 @@
+{"name":"safe-stable-stringify","main":"index.js","author":"Ruben Bridgewater","license":"MIT"}

packages/next/src/next-devtools/shared/forward-logs-shared.ts

@@ -0,0 +1,114 @@
+export type LogMethod =
+  | 'log'
+  | 'info'
+  | 'debug'
+  | 'table'
+  | 'error'
+  | 'assert'
+  | 'dir'
+  | 'dirxml'
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'trace'
+  | 'warn'
+
+export type ConsoleEntry<T> = {
+  kind: 'console'
+  method: LogMethod
+  consoleMethodStack: string | null
+  args: Array<
+    | {
+        kind: 'arg'
+        data: T
+      }
+    | {
+        kind: 'formatted-error-arg'
+        prefix: string
+        stack: string
+      }
+  >
+}
+
+export type ConsoleErrorEntry<T> = {
+  kind: 'any-logged-error'
+  method: 'error'
+  consoleErrorStack: string
+  args: Array<
+    | {
+        kind: 'arg'
+        data: T
+        isRejectionMessage?: boolean
+      }
+    | {
+        kind: 'formatted-error-arg'
+        prefix: string
+        stack: string | null
+      }
+  >
+}
+
+export type FormattedErrorEntry = {
+  kind: 'formatted-error'
+  prefix: string
+  stack: string
+  method: 'error'
+}
+
+export type ClientLogEntry =
+  | ConsoleEntry<unknown>
+  | ConsoleErrorEntry<unknown>
+  | FormattedErrorEntry
+export type ServerLogEntry =
+  | ConsoleEntry<string>
+  | ConsoleErrorEntry<string>
+  | FormattedErrorEntry
+
+export const UNDEFINED_MARKER = '__next_tagged_undefined'
+
+// Based on https://github.com/facebook/react/blob/28dc0776be2e1370fe217549d32aee2519f0cf05/packages/react-server/src/ReactFlightServer.js#L248
+export function patchConsoleMethod<T extends keyof Console>(
+  methodName: T,
+  wrapper: (
+    methodName: T,
+    ...args: Console[T] extends (...args: infer P) => any ? P : never[]
+  ) => void
+): () => void {
+  const descriptor = Object.getOwnPropertyDescriptor(console, methodName)
+  if (
+    descriptor &&
+    (descriptor.configurable || descriptor.writable) &&
+    typeof descriptor.value === 'function'
+  ) {
+    const originalMethod = descriptor.value as Console[T] extends (
+      ...args: any[]
+    ) => any
+      ? Console[T]
+      : never
+    const originalName = Object.getOwnPropertyDescriptor(originalMethod, 'name')
+    const wrapperMethod = function (
+      this: typeof console,
+      ...args: Console[T] extends (...args: infer P) => any ? P : never[]
+    ) {
+      wrapper(methodName, ...args)
+
+      originalMethod.apply(this, args)
+    }
+    if (originalName) {
+      Object.defineProperty(wrapperMethod, 'name', originalName)
+    }
+    Object.defineProperty(console, methodName, {
+      value: wrapperMethod,
+    })
+
+    return () => {
+      Object.defineProperty(console, methodName, {
+        value: originalMethod,
+        writable: descriptor.writable,
+        configurable: descriptor.configurable,
+      })
+    }
+  }
+
+  return () => {}
+}

packages/next/src/next-devtools/userspace/app/app-dev-overlay-setup.ts

@@ -1,5 +1,13 @@
 import { patchConsoleError } from './errors/intercept-console-error'
 import { handleGlobalErrors } from './errors/use-error-handler'
+import {
+  initializeDebugLogForwarding,
+  isTerminalLoggingEnabled,
+} from './forward-logs'
 
 handleGlobalErrors()
 patchConsoleError()
+
+if (isTerminalLoggingEnabled) {
+  initializeDebugLogForwarding('app')
+}

packages/next/src/next-devtools/userspace/app/errors/intercept-console-error.ts

@@ -2,6 +2,7 @@ import isError from '../../../../lib/is-error'
 import { isNextRouterError } from '../../../../client/components/is-next-router-error'
 import { handleConsoleError } from './use-error-handler'
 import { parseConsoleArgs } from '../../../../client/lib/console'
+import { forwardErrorLog, isTerminalLoggingEnabled } from '../forward-logs'
 
 export const originConsoleError = globalThis.console.error
 
@@ -36,6 +37,9 @@ export function patchConsoleError() {
           args
         )
       }
+      if (isTerminalLoggingEnabled) {
+        forwardErrorLog(args)
+      }
 
       originConsoleError.apply(window.console, args)
     }

packages/next/src/next-devtools/userspace/app/errors/use-error-handler.ts

@@ -7,6 +7,11 @@ import {
 import isError from '../../../../lib/is-error'
 import { createConsoleError } from '../../../shared/console-error'
 import { coerceError, setOwnerStackIfAvailable } from './stitched-error'
+import {
+  forwardUnhandledError,
+  isTerminalLoggingEnabled,
+  logUnhandledRejection,
+} from '../forward-logs'
 
 const queueMicroTask =
   globalThis.queueMicrotask || ((cb: () => void) => Promise.resolve().then(cb))
@@ -94,8 +99,10 @@ function onUnhandledError(event: WindowEventMap['error']): void | boolean {
   if (thrownValue) {
     const error = coerceError(thrownValue)
     setOwnerStackIfAvailable(error)
-
     handleClientError(error)
+    if (isTerminalLoggingEnabled) {
+      forwardUnhandledError(error)
+    }
   }
 }
 
@@ -113,6 +120,10 @@ function onUnhandledRejection(ev: WindowEventMap['unhandledrejection']): void {
   for (const handler of rejectionHandlers) {
     handler(error)
   }
+
+  if (isTerminalLoggingEnabled) {
+    logUnhandledRejection(reason)
+  }
 }
 
 export function handleGlobalErrors() {

packages/next/src/next-devtools/userspace/app/errors/use-forward-console-log.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { isTerminalLoggingEnabled, logQueue } from '../forward-logs'
+import type { useWebsocket } from '../../../../client/dev/hot-reloader/app/use-websocket'
+
+export const useForwardConsoleLog = (
+  socketRef: ReturnType<typeof useWebsocket>
+) => {
+  useEffect(() => {
+    if (!isTerminalLoggingEnabled) {
+      return
+    }
+    const socket = socketRef.current
+    if (!socket) {
+      return
+    }
+
+    const onOpen = () => {
+      logQueue.onSocketReady(socket)
+    }
+    socket.addEventListener('open', onOpen)
+
+    return () => {
+      socket.removeEventListener('open', onOpen)
+    }
+  }, [socketRef])
+}