From ddc8807a978ced8183822f81a0587b60f23d6a26 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 24 Oct 2024 15:22:31 +0200
Subject: [PATCH] Fully enable custom error callbacks for app router (#71794)

---
 packages/next/src/client/app-index.tsx | 29 ++++++++++++--------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
index cdd6cf0422c23..a7852cd4244e0 100644
--- a/packages/next/src/client/app-index.tsx
+++ b/packages/next/src/client/app-index.tsx
@@ -217,6 +217,12 @@ function Root({ children }: React.PropsWithChildren<{}>) {
   return children
 }
 
+const reactRootOptions = {
+  onRecoverableError,
+  onCaughtError,
+  onUncaughtError,
+} satisfies ReactDOMClient.RootOptions
+
 export function hydrate() {
   const reactEl = (
     <StrictModeIfEnabled>
@@ -231,19 +237,6 @@ export function hydrate() {
   const rootLayoutMissingTags = window.__next_root_layout_missing_tags
   const hasMissingTags = !!rootLayoutMissingTags?.length
 
-  const errorCallbacks =
-    typeof (React as any).captureOwnerStack === 'function' &&
-    process.env.NODE_ENV !== 'production'
-      ? {
-          onCaughtError,
-          onUncaughtError,
-        }
-      : undefined
-
-  const options = {
-    onRecoverableError,
-    ...errorCallbacks,
-  } satisfies ReactDOMClient.RootOptions
   const isError =
     document.documentElement.id === '__next_error__' || hasMissingTags
 
@@ -252,14 +245,18 @@ export function hydrate() {
       const createDevOverlayElement =
         require('./components/react-dev-overlay/client-entry').createDevOverlayElement
       const errorTree = createDevOverlayElement(reactEl)
-      ReactDOMClient.createRoot(appElement as any, options).render(errorTree)
+      ReactDOMClient.createRoot(appElement as any, reactRootOptions).render(
+        errorTree
+      )
     } else {
-      ReactDOMClient.createRoot(appElement as any, options).render(reactEl)
+      ReactDOMClient.createRoot(appElement as any, reactRootOptions).render(
+        reactEl
+      )
     }
   } else {
     React.startTransition(() =>
       (ReactDOMClient as any).hydrateRoot(appElement, reactEl, {
-        ...options,
+        ...reactRootOptions,
         formState: initialFormStateData,
       })
     )