Fully enable custom error callbacks for app router (#71794)

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,
       })
     )