From c17ab931e2068ad1b30ea3265b4ad0a0f15928ce Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Oct 2024 12:28:12 +0200
Subject: [PATCH 1/4] auto enable in experimental build

---
 .../src/build/webpack/plugins/define-env-plugin.ts  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
index 20ad88f8f6f14..9ece98cd3701c 100644
--- a/packages/next/src/build/webpack/plugins/define-env-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -143,6 +143,10 @@ export function getDefineEnv({
   const nextPublicEnv = getNextPublicEnvironmentVariables()
   const nextConfigEnv = getNextConfigEnv(config)
 
+  const isPPREnabled = checkIsAppPPREnabled(config.experimental.ppr)
+  const isDynamicIOEnabled = !!config.experimental.dynamicIO
+  const isOwnerStackEnabled = Boolean(config.experimental.reactOwnerStack)
+
   const defineEnv: DefineEnv = {
     // internal field to identify the plugin config
     __NEXT_DEFINE_ENV: true,
@@ -183,11 +187,10 @@ export function getDefineEnv({
     'process.env.__NEXT_APP_ISR_INDICATOR': Boolean(
       config.devIndicators.appIsrStatus
     ),
-    'process.env.__NEXT_PPR': checkIsAppPPREnabled(config.experimental.ppr),
-    'process.env.__NEXT_DYNAMIC_IO': !!config.experimental.dynamicIO,
-    'process.env.__NEXT_REACT_OWNER_STACK': Boolean(
-      config.experimental.reactOwnerStack
-    ),
+    'process.env.__NEXT_PPR': isPPREnabled,
+    'process.env.__NEXT_DYNAMIC_IO': isDynamicIOEnabled,
+    'process.env.__NEXT_REACT_OWNER_STACK':
+      isPPREnabled || isDynamicIOEnabled || isOwnerStackEnabled,
     'process.env.__NEXT_AFTER': config.experimental.after ?? false,
     'process.env.NEXT_DEPLOYMENT_ID': config.deploymentId || false,
     'process.env.__NEXT_FETCH_CACHE_KEY_PREFIX': fetchCacheKeyPrefix ?? '',

From afc0d794856a6b05294fb358316075eec778d117 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Oct 2024 23:46:19 +0200
Subject: [PATCH 2/4] fix empty file source

---
 .../internal/container/RuntimeError/CallStackFrame.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx
index 26054376594d6..7a3f4e5c09075 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/CallStackFrame.tsx
@@ -28,6 +28,13 @@ export const CallStackFrame: React.FC<{
   // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
   const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '')
 
+  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
+  // we'll skip rendering the frame in this case.
+  const fileSource = getFrameSource(f)
+  if (!fileSource) {
+    return null
+  }
+
   return (
     <div data-nextjs-call-stack-frame>
       <h3 data-nextjs-frame-expanded={Boolean(frame.expanded)}>
@@ -40,7 +47,7 @@ export const CallStackFrame: React.FC<{
         onClick={open}
         title={hasSource ? 'Click to open in your editor' : undefined}
       >
-        <span>{getFrameSource(f)}</span>
+        <span>{fileSource}</span>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"

From 586acb78326c712fed8d29421e453ecaf7fe8948 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 24 Oct 2024 00:04:08 +0200
Subject: [PATCH 3/4] update ppr stack

---
 .../capture-console-error.test.ts             | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/test/development/app-dir/capture-console-error/capture-console-error.test.ts b/test/development/app-dir/capture-console-error/capture-console-error.test.ts
index ac634e18ba287..1a28ff576f039 100644
--- a/test/development/app-dir/capture-console-error/capture-console-error.test.ts
+++ b/test/development/app-dir/capture-console-error/capture-console-error.test.ts
@@ -8,6 +8,8 @@ import {
   waitForAndOpenRuntimeError,
 } from 'next-test-utils'
 
+const isReactExperimental = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
+
 async function getRedboxResult(browser: any) {
   const description = await getRedboxDescription(browser)
   const callStacks = await getRedboxCallStack(browser)
@@ -44,6 +46,24 @@ describe('app-dir - capture-console-error', () => {
           "description": "trigger an console <error>",
           "source": "app/browser/event/page.js (7:17) @ onClick
 
+           5 |     <button
+           6 |       onClick={() => {
+        >  7 |         console.error('trigger an console <%s>', 'error')
+             |                 ^
+           8 |       }}
+           9 |     >
+          10 |       click to error",
+        }
+      `)
+    } else if (isReactExperimental) {
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "callStacks": "button
+        app/browser/event/page.js (5:6)",
+          "count": 1,
+          "description": "trigger an console <error>",
+          "source": "app/browser/event/page.js (7:17) @ error
+
            5 |     <button
            6 |       onClick={() => {
         >  7 |         console.error('trigger an console <%s>', 'error')

From 5a953b6f3788d43cbf270d29d5392747556b8999 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 24 Oct 2024 00:50:53 +0200
Subject: [PATCH 4/4] checking api if available

---
 .../next/src/build/webpack/plugins/define-env-plugin.ts     | 3 ---
 packages/next/src/client/app-index.tsx                      | 5 ++---
 .../react-dev-overlay/internal/helpers/stitched-error.ts    | 6 ++----
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
index 9ece98cd3701c..7146be5500dfd 100644
--- a/packages/next/src/build/webpack/plugins/define-env-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -145,7 +145,6 @@ export function getDefineEnv({
 
   const isPPREnabled = checkIsAppPPREnabled(config.experimental.ppr)
   const isDynamicIOEnabled = !!config.experimental.dynamicIO
-  const isOwnerStackEnabled = Boolean(config.experimental.reactOwnerStack)
 
   const defineEnv: DefineEnv = {
     // internal field to identify the plugin config
@@ -189,8 +188,6 @@ export function getDefineEnv({
     ),
     'process.env.__NEXT_PPR': isPPREnabled,
     'process.env.__NEXT_DYNAMIC_IO': isDynamicIOEnabled,
-    'process.env.__NEXT_REACT_OWNER_STACK':
-      isPPREnabled || isDynamicIOEnabled || isOwnerStackEnabled,
     'process.env.__NEXT_AFTER': config.experimental.after ?? false,
     'process.env.NEXT_DEPLOYMENT_ID': config.deploymentId || false,
     'process.env.__NEXT_FETCH_CACHE_KEY_PREFIX': fetchCacheKeyPrefix ?? '',
diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
index c39d36c01316a..cdd6cf0422c23 100644
--- a/packages/next/src/client/app-index.tsx
+++ b/packages/next/src/client/app-index.tsx
@@ -27,8 +27,6 @@ import { MissingSlotContext } from '../shared/lib/app-router-context.shared-runt
 
 /// <reference types="react-dom/experimental" />
 
-const isReactOwnerStackEnabled = !!process.env.__NEXT_REACT_OWNER_STACK
-
 const appElement: HTMLElement | Document | null = document
 
 const encoder = new TextEncoder()
@@ -234,7 +232,8 @@ export function hydrate() {
   const hasMissingTags = !!rootLayoutMissingTags?.length
 
   const errorCallbacks =
-    isReactOwnerStackEnabled && process.env.NODE_ENV !== 'production'
+    typeof (React as any).captureOwnerStack === 'function' &&
+    process.env.NODE_ENV !== 'production'
       ? {
           onCaughtError,
           onUncaughtError,
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts
index d52677cce2097..bc64a43769846 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts
+++ b/packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts
@@ -1,15 +1,13 @@
 import React from 'react'
 import isError from '../../../../../lib/is-error'
 
-const captureOwnerStack = (React as any).captureOwnerStack || (() => '')
-
 const REACT_ERROR_STACK_BOTTOM_FRAME = 'react-stack-bottom-frame'
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(
   `(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\@)`
 )
 
 export function getReactStitchedError<T = unknown>(err: T): Error | T {
-  if (!process.env.__NEXT_REACT_OWNER_STACK) {
+  if (typeof (React as any).captureOwnerStack !== 'function') {
     return err
   }
 
@@ -31,7 +29,7 @@ export function getReactStitchedError<T = unknown>(err: T): Error | T {
   newError.stack = newStack
 
   // Avoid duplicate overriding stack frames
-  const ownerStack = captureOwnerStack()
+  const ownerStack = (React as any).captureOwnerStack()
   if (ownerStack && newStack.endsWith(ownerStack) === false) {
     newStack += ownerStack
     // Override stack