[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.

Author: sebmarkbage

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

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;
       }

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;
       }