Add unknown location information to component stacks

facebook · Jul 7, 2024 · 7cb1999 · 7cb1999
1 parent 1b0132c
commit 7cb1999
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js b/packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
@@ -475,7 +475,7 @@ describe('ReactDOM HostSingleton', () => {
     expect(hydrationErrors).toEqual([
       [
         "Hydration failed because the server rendered HTML didn't match the client.",
-        'at div',
+        'at div (<anonymous>)',
       ],
     ]);
     expect(persistentElements).toEqual([

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
@@ -924,7 +924,7 @@ function pushServerComponentStack(
       let name = componentInfo.name;
       const env = componentInfo.env;
       if (env) {
-        name += ' (' + env + ')';
+        name += ' [' + env + ']';
       }
       task.componentStack = {
         tag: 3,

diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
@@ -24,6 +24,7 @@ import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 let prefix;
+let suffix;
 export function describeBuiltInComponentFrame(name: string): string {
   if (enableComponentStackLocations) {
     if (prefix === undefined) {
@@ -33,17 +34,26 @@ export function describeBuiltInComponentFrame(name: string): string {
       } catch (x) {
         const match = x.stack.trim().match(/\n( *(at )?)/);
         prefix = (match && match[1]) || '';
+        suffix =
+          x.stack.indexOf('\n    at') > -1
+            ? // V8
+              ' (<anonymous>)'
+            : // JSC/Spidermonkey
+            x.stack.indexOf('@') > -1
+            ? '@unknown:0:0'
+            : // Other
+              '';
       }
     }
     // We use the prefix to ensure our stacks line up with native stack frames.
-    return '\n' + prefix + name;
+    return '\n' + prefix + name + suffix;
   } else {
     return describeComponentFrame(name);
   }
 }
 
 export function describeDebugInfoFrame(name: string, env: ?string): string {
-  return describeBuiltInComponentFrame(name + (env ? ' (' + env + ')' : ''));
+  return describeBuiltInComponentFrame(name + (env ? ' [' + env + ']' : ''));
 }
 
 let reentry = false;