refactor: separate forward browser logs utils (#84151)

Author: huozhi

packages/next/src/client/dev/hot-reloader/app/web-socket.ts

@@ -12,10 +12,7 @@ import {
   processMessage,
   type StaticIndicatorState,
 } from './hot-reloader-app'
-import {
-  isTerminalLoggingEnabled,
-  logQueue,
-} from '../../../../next-devtools/userspace/app/forward-logs'
+import { logQueue } from '../../../../next-devtools/userspace/app/forward-logs'
 import { InvariantError } from '../../../../shared/lib/invariant-error'
 import { WEB_SOCKET_MAX_RECONNECTIONS } from '../../../../lib/constants'
 
@@ -57,9 +54,7 @@ export function createWebSocket(
     newWebSocket.binaryType = 'arraybuffer'
 
     function handleOnline() {
-      if (isTerminalLoggingEnabled) {
-        logQueue.onSocketReady(newWebSocket)
-      }
+      logQueue.onSocketReady(newWebSocket)
 
       reconnections = 0
       window.console.log('[HMR] connected')

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

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

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

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

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

@@ -2,7 +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'
+import { forwardErrorLog } from '../forward-logs'
 
 export const originConsoleError = globalThis.console.error
 
@@ -37,9 +37,7 @@ export function patchConsoleError() {
           args
         )
       }
-      if (isTerminalLoggingEnabled) {
-        forwardErrorLog(args)
-      }
+      forwardErrorLog(args)
 
       originConsoleError.apply(window.console, args)
     }

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

@@ -7,11 +7,7 @@ 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'
+import { forwardUnhandledError, logUnhandledRejection } from '../forward-logs'
 
 const queueMicroTask =
   globalThis.queueMicrotask || ((cb: () => void) => Promise.resolve().then(cb))
@@ -100,9 +96,7 @@ function onUnhandledError(event: WindowEventMap['error']): void | boolean {
     const error = coerceError(thrownValue)
     setOwnerStackIfAvailable(error)
     handleClientError(error)
-    if (isTerminalLoggingEnabled) {
-      forwardUnhandledError(error)
-    }
+    forwardUnhandledError(error)
   }
 }
 
@@ -121,9 +115,7 @@ function onUnhandledRejection(ev: WindowEventMap['unhandledrejection']): void {
     handler(error)
   }
 
-  if (isTerminalLoggingEnabled) {
-    logUnhandledRejection(reason)
-  }
+  logUnhandledRejection(reason)
 }
 
 export function handleGlobalErrors() {

packages/next/src/next-devtools/userspace/app/forward-logs-utils.ts

@@ -0,0 +1,88 @@
+import { configure } from 'next/dist/compiled/safe-stable-stringify'
+import { getTerminalLoggingConfig } from './terminal-logging-config'
+import { UNDEFINED_MARKER } from '../../shared/forward-logs-shared'
+
+const terminalLoggingConfig = getTerminalLoggingConfig()
+
+const PROMISE_MARKER = 'Promise {}'
+const UNAVAILABLE_MARKER = '[Unable to view]'
+
+const maximumDepth =
+  typeof terminalLoggingConfig === 'object' && terminalLoggingConfig.depthLimit
+    ? terminalLoggingConfig.depthLimit
+    : 5
+const maximumBreadth =
+  typeof terminalLoggingConfig === 'object' && terminalLoggingConfig.edgeLimit
+    ? terminalLoggingConfig.edgeLimit
+    : 100
+
+const stringify = configure({
+  maximumDepth,
+  maximumBreadth,
+})
+
+/**
+ * allows us to:
+ * - revive the undefined log in the server as it would look in the browser
+ * - not read/attempt to serialize promises (next will console error if you do that, and will cause this program to infinitely recurse)
+ * - if we read a proxy that throws (no way to detect if something is a proxy), explain to the user we can't read this data
+ */
+export function preLogSerializationClone<T>(
+  value: T,
+  seen = new WeakMap()
+): any {
+  if (value === undefined) return UNDEFINED_MARKER
+  if (value === null || typeof value !== 'object') return value
+  if (seen.has(value as object)) return seen.get(value as object)
+
+  try {
+    Object.keys(value as object)
+  } catch {
+    return UNAVAILABLE_MARKER
+  }
+
+  try {
+    if (typeof (value as any).then === 'function') return PROMISE_MARKER
+  } catch {
+    return UNAVAILABLE_MARKER
+  }
+
+  if (Array.isArray(value)) {
+    const out: any[] = []
+    seen.set(value, out)
+    for (const item of value) {
+      try {
+        out.push(preLogSerializationClone(item, seen))
+      } catch {
+        out.push(UNAVAILABLE_MARKER)
+      }
+    }
+    return out
+  }
+
+  const proto = Object.getPrototypeOf(value)
+  if (proto === Object.prototype || proto === null) {
+    const out: Record<string, unknown> = {}
+    seen.set(value as object, out)
+    for (const key of Object.keys(value as object)) {
+      try {
+        out[key] = preLogSerializationClone((value as any)[key], seen)
+      } catch {
+        out[key] = UNAVAILABLE_MARKER
+      }
+    }
+    return out
+  }
+
+  return Object.prototype.toString.call(value)
+}
+
+// only safe if passed safeClone data
+export const logStringify = (data: unknown): string => {
+  try {
+    const result = stringify(data)
+    return result ?? `"${UNAVAILABLE_MARKER}"`
+  } catch {
+    return `"${UNAVAILABLE_MARKER}"`
+  }
+}

packages/next/src/next-devtools/userspace/app/forward-logs.test.ts

@@ -1,10 +1,4 @@
-import { UNDEFINED_MARKER } from '../../shared/forward-logs-shared'
-import {
-  preLogSerializationClone,
-  PROMISE_MARKER,
-  UNAVAILABLE_MARKER,
-  logStringify,
-} from './forward-logs'
+import { preLogSerializationClone, logStringify } from './forward-logs-utils'
 
 const safeStringify = (data: unknown) =>
   logStringify(preLogSerializationClone(data))
@@ -16,7 +10,9 @@ describe('forward-logs serialization', () => {
       expect(preLogSerializationClone('hello')).toBe('hello')
       expect(preLogSerializationClone(true)).toBe(true)
       expect(preLogSerializationClone(null)).toBe(null)
-      expect(preLogSerializationClone(undefined)).toBe(UNDEFINED_MARKER)
+      expect(preLogSerializationClone(undefined)).toBe(
+        '__next_tagged_undefined'
+      )
     })
 
     it('should handle circular references', () => {
@@ -29,19 +25,19 @@ describe('forward-logs serialization', () => {
 
     it('should handle promises', () => {
       const promise = Promise.resolve(42)
-      expect(preLogSerializationClone(promise)).toBe(PROMISE_MARKER)
+      expect(preLogSerializationClone(promise)).toBe('Promise {}')
     })
 
     it('should handle arrays', () => {
       const arr = [1, 'test', undefined, null]
       const cloned = preLogSerializationClone(arr)
-      expect(cloned).toEqual([1, 'test', UNDEFINED_MARKER, null])
+      expect(cloned).toEqual([1, 'test', '__next_tagged_undefined', null])
     })
 
     it('should handle plain objects', () => {
       const obj = { a: 1, b: undefined, c: 'test' }
       const cloned = preLogSerializationClone(obj)
-      expect(cloned).toEqual({ a: 1, b: UNDEFINED_MARKER, c: 'test' })
+      expect(cloned).toEqual({ a: 1, b: '__next_tagged_undefined', c: 'test' })
     })
 
     it('should handle objects with getters that throw', () => {
@@ -54,7 +50,7 @@ describe('forward-logs serialization', () => {
 
       const cloned = preLogSerializationClone(obj)
       expect(cloned.normalProp).toBe('works')
-      expect(cloned.throwingGetter).toBe(UNAVAILABLE_MARKER)
+      expect(cloned.throwingGetter).toBe('[Unable to view]')
     })
 
     it('should handle non-plain objects as toString', () => {
@@ -80,7 +76,7 @@ describe('forward-logs serialization', () => {
       const arr = [1, throwingProxy, 'normal']
       const cloned = preLogSerializationClone(arr)
 
-      expect(cloned).toEqual([1, UNAVAILABLE_MARKER, 'normal'])
+      expect(cloned).toEqual([1, '[Unable to view]', 'normal'])
     })
   })
 
@@ -89,7 +85,7 @@ describe('forward-logs serialization', () => {
       expect(safeStringify(42)).toBe('42')
       expect(safeStringify('hello')).toBe('"hello"')
       expect(safeStringify(null)).toBe('null')
-      expect(safeStringify(undefined)).toBe(`"${UNDEFINED_MARKER}"`)
+      expect(safeStringify(undefined)).toBe(`"__next_tagged_undefined"`)
     })
 
     it('should handle objects with circular references', () => {
@@ -108,7 +104,7 @@ describe('forward-logs serialization', () => {
       }
 
       const result = safeStringify(problematicData)
-      expect(result).toBe(`"${UNAVAILABLE_MARKER}"`)
+      expect(result).toBe(`"[Unable to view]"`)
     })
   })
 })