Include server component names in the componentStack in DEV (#28415)

I'm a bit ambivalent about this one because it's not the main strategy that I plan on pursuing. I plan on replacing most DEV-only specific stacks like `console.error` stacks with a new take on owner stacks and native stacks. The future owner stacks may or may not be exposed to error boundaries in DEV but if they are they'd be a new errorInfo property since they're owner based and not available in prod. The use case in `console.error` mostly goes away in the future so this PR is mainly for error boundaries. It doesn't hurt to have it in there while I'm working on the better stacks though. The `componentStack` property exposed to error boundaries is more like production behavior similar to `new Error().stack` (which even in DEV won't ever expose owner stacks because `console.createTask` doesn't affect these). I'm not sure it's worth adding server components in DEV (this PR) because then you have forked behavior between dev and prod. However, since even in the future there won't be any other place to get the *parent* stack, maybe this can be useful information even if it's only dev. We could expose a third property on errorInfo that's DEV only and parent stack but including server components. That doesn't seem worth it over just having the stack differ in dev and prod. I don't plan on adding line/column number to these particular stacks. A follow up could be to add this to Fizz prerender too but only in DEV. DiffTrain build for [8fb0233](8fb0233)
facebook · Feb 23, 2024 · 6535b04 · 6535b04
1 parent edd8fbe
commit 6535b04
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 21 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-66c8346401d271588e4c400921c5dab5478fc623
+8fb0233a845974b4b1049e54b6c25dc54d6dd173
diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-523eda18";
+exports.version = "18.3.0-www-classic-59a8d1a0";
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-classic-2f254d96";
+    var ReactVersion = "18.3.0-www-classic-f7f3772e";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -5200,6 +5200,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -5504,7 +5509,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-modern-388a31ab";
+    var ReactVersion = "18.3.0-www-modern-b6af9ab5";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -4965,6 +4965,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -5269,7 +5274,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -3433,6 +3433,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -3737,7 +3742,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -35940,7 +35960,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-classic-ba863f98";
+    var ReactVersion = "18.3.0-www-classic-afaf7494";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -3023,6 +3023,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -3327,7 +3332,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -35776,7 +35796,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-fbeafe0c";
+    var ReactVersion = "18.3.0-www-modern-537964e0";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -17457,7 +17457,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1863 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-388a31ab",
+  version: "18.3.0-www-modern-b6af9ab5",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17502,7 +17502,7 @@ var devToolsConfig$jscomp$inline_1863 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-388a31ab"
+  reconcilerVersion: "18.3.0-www-modern-b6af9ab5"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -17760,7 +17760,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-modern-388a31ab";
+exports.version = "18.3.0-www-modern-b6af9ab5";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -3570,6 +3570,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -3874,7 +3879,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -36564,7 +36584,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-classic-523eda18";
+    var ReactVersion = "18.3.0-www-classic-59a8d1a0";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -3160,6 +3160,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -3464,7 +3469,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -36400,7 +36420,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-d6778e7a";
+    var ReactVersion = "18.3.0-www-modern-e0cecec0";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js
@@ -4130,6 +4130,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -4434,7 +4439,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -26077,7 +26097,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-classic-671761c6";
+    var ReactVersion = "18.3.0-www-classic-1fba16eb";
 
     // Might add PROFILE later.
 

diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -4130,6 +4130,11 @@ if (__DEV__) {
         return "\n" + prefix + name;
       }
     }
+    function describeDebugInfoFrame(name, env) {
+      return describeBuiltInComponentFrame(
+        name + (env ? " (" + env + ")" : "")
+      );
+    }
     var reentry = false;
     var componentFrameCache;
 
@@ -4434,7 +4439,22 @@ if (__DEV__) {
         var node = workInProgress;
 
         do {
-          info += describeFiber(node); // $FlowFixMe[incompatible-type] we bail out when we get a null
+          info += describeFiber(node);
+
+          if (true) {
+            // Add any Server Component stack frames in reverse order.
+            var debugInfo = node._debugInfo;
+
+            if (debugInfo) {
+              for (var i = debugInfo.length - 1; i >= 0; i--) {
+                var entry = debugInfo[i];
+
+                if (typeof entry.name === "string") {
+                  info += describeDebugInfoFrame(entry.name, entry.env);
+                }
+              }
+            }
+          } // $FlowFixMe[incompatible-type] we bail out when we get a null
 
           node = node.return;
         } while (node);
@@ -26077,7 +26097,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-5cf311c2";
+    var ReactVersion = "18.3.0-www-modern-6250da60";
 
     // Might add PROFILE later.