refactor: reorganize patch console (#70374)

vercel · Sep 24, 2024 · 624449f · 624449f
1 parent aceeaea
commit 624449f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
@@ -1,6 +1,9 @@
 // imports polyfill from `@next/polyfill-module` after build.
 import '../build/polyfills/polyfill-module'
+
+import './components/globals/patch-console'
 import './components/globals/handle-global-errors'
+
 import ReactDOMClient from 'react-dom/client'
 import React, { use } from 'react'
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -12,30 +15,11 @@ import {
   type AppRouterActionQueue,
   createMutableActionQueue,
 } from '../shared/lib/router/action-queue'
-import { isNextRouterError } from './components/is-next-router-error'
-import { handleClientError } from './components/react-dev-overlay/internal/helpers/use-error-handler'
 import AppRouter from './components/app-router'
 import type { InitialRSCPayload } from '../server/app-render/types'
 import { createInitialRouterState } from './components/router-reducer/create-initial-router-state'
 import { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'
 
-const origConsoleError = window.console.error
-window.console.error = (...args) => {
-  // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
-  const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
-  if (!isNextRouterError(error)) {
-    if (process.env.NODE_ENV !== 'production') {
-      const { storeHydrationErrorStateFromConsoleArgs } =
-        require('./components/react-dev-overlay/internal/helpers/hydration-error-info') as typeof import('./components/react-dev-overlay/internal/helpers/hydration-error-info')
-
-      storeHydrationErrorStateFromConsoleArgs(...args)
-      handleClientError(error)
-    }
-
-    origConsoleError.apply(window.console, args)
-  }
-}
-
 /// <reference types="react-dom/experimental" />
 
 const appElement: HTMLElement | Document | null = document

diff --git a/packages/next/src/client/components/globals/intercept-console-error.ts b/packages/next/src/client/components/globals/intercept-console-error.ts
@@ -0,0 +1,28 @@
+import { isNextRouterError } from '../is-next-router-error'
+import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler'
+
+// Patch console.error to collect information about hydration errors
+export function patchConsoleError() {
+  // Ensure it's only patched once
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const originConsoleError = window.console.error
+  window.console.error = (...args) => {
+    // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
+    const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
+
+    if (!isNextRouterError(error)) {
+      if (process.env.NODE_ENV !== 'production') {
+        const { storeHydrationErrorStateFromConsoleArgs } =
+          require('../react-dev-overlay/internal/helpers/hydration-error-info') as typeof import('../react-dev-overlay/internal/helpers/hydration-error-info')
+
+        storeHydrationErrorStateFromConsoleArgs(...args)
+        handleClientError(error)
+      }
+
+      originConsoleError.apply(window.console, args)
+    }
+  }
+}
diff --git a/packages/next/src/client/components/globals/patch-console.ts b/packages/next/src/client/components/globals/patch-console.ts
@@ -0,0 +1,3 @@
+import { patchConsoleError } from './intercept-console-error'
+
+patchConsoleError()