[Fizz] Implement debugInfo (#30174)

Stacked on #30170. This lets us track Server Component parent stacks in Fizz which also lets us track the correct owner stack for lazy. In Fiber we're careful not to make any DEV only fibers but since the ReactFizzComponentStack data structures just exist for debug meta data anyway we can just expand on that.
facebook · Jul 2, 2024 · cfb8945 · cfb8945
1 parent 309e146
commit cfb8945
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 80 deletions.
diff --git a/packages/react-html/src/__tests__/ReactHTMLServer-test.js b/packages/react-html/src/__tests__/ReactHTMLServer-test.js
@@ -244,17 +244,19 @@ if (!__EXPERIMENTAL__) {
       expect(caughtErrors.length).toBe(1);
       expect(caughtErrors[0].error).toBe(thrownError);
       expect(normalizeCodeLocInfo(caughtErrors[0].parentStack)).toBe(
-        // TODO: Because Fizz doesn't yet implement debugInfo for parent stacks
-        // it doesn't have the Server Components in the parent stacks.
-        '\n    in Lazy (at **)' +
-          '\n    in div (at **)' +
-          '\n    in div (at **)',
+        __DEV__
+          ? '\n    in Baz (at **)' +
+              '\n    in div (at **)' +
+              '\n    in Bar (at **)' +
+              '\n    in Foo (at **)' +
+              '\n    in div (at **)'
+          : '\n    in Lazy (at **)' +
+              '\n    in div (at **)' +
+              '\n    in div (at **)',
       );
       expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
         __DEV__ && gate(flags => flags.enableOwnerStacks)
-          ? // TODO: Because Fizz doesn't yet implement debugInfo for parent stacks
-            // it doesn't have the Server Components in the parent stacks.
-            '\n    in Lazy (at **)'
+          ? '\n    in Bar (at **)' + '\n    in Foo (at **)'
           : null,
       );
     });

diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js
@@ -185,11 +185,11 @@ export function getOwnerStackByFiberInDev(
         // another code path anyway. I.e. this is likely NOT a V8 based browser.
         // This will cause some of the stack to have different formatting.
         // TODO: Normalize server component stacks to the client formatting.
-        if (owner.stack !== '') {
-          info += '\n' + owner.stack;
+        const ownerStack: string = owner.stack;
+        owner = owner.owner;
+        if (owner && ownerStack !== '') {
+          info += '\n' + ownerStack;
         }
-        const componentInfo: ReactComponentInfo = (owner: any);
-        owner = componentInfo.owner;
       } else {
         break;
       }

diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js
@@ -41,10 +41,19 @@ type ClassComponentStackNode = {
   owner?: null | ReactComponentInfo | ComponentStackNode, // DEV only
   stack?: null | string | Error, // DEV only
 };
+type ServerComponentStackNode = {
+  // DEV only
+  tag: 3,
+  parent: null | ComponentStackNode,
+  type: string, // name + env
+  owner?: null | ReactComponentInfo | ComponentStackNode, // DEV only
+  stack?: null | string | Error, // DEV only
+};
 export type ComponentStackNode =
   | BuiltInComponentStackNode
   | FunctionComponentStackNode
-  | ClassComponentStackNode;
+  | ClassComponentStackNode
+  | ServerComponentStackNode;
 
 export function getStackByComponentStackNode(
   componentStack: ComponentStackNode,
@@ -63,6 +72,11 @@ export function getStackByComponentStackNode(
         case 2:
           info += describeClassComponentFrame(node.type);
           break;
+        case 3:
+          if (__DEV__) {
+            info += describeBuiltInComponentFrame(node.type);
+            break;
+          }
       }
       // $FlowFixMe[incompatible-type] we bail out when we get a null
       node = node.parent;
@@ -110,6 +124,11 @@ export function getOwnerStackByComponentStackNodeInDev(
           );
         }
         break;
+      case 3:
+        if (!componentStack.owner) {
+          info += describeBuiltInComponentFrame(componentStack.type);
+        }
+        break;
     }
 
     let owner: void | null | ComponentStackNode | ReactComponentInfo =
@@ -137,11 +156,11 @@ export function getOwnerStackByComponentStackNodeInDev(
         }
       } else if (typeof owner.stack === 'string') {
         // Server Component
-        if (owner.stack !== '') {
-          info += '\n' + owner.stack;
+        const ownerStack: string = owner.stack;
+        owner = owner.owner;
+        if (owner && ownerStack !== '') {
+          info += '\n' + ownerStack;
         }
-        const componentInfo: ReactComponentInfo = (owner: any);
-        owner = componentInfo.owner;
       } else {
         break;
       }