[Flight] Only use debug component info for parent stacks

Author: eps1lon

packages/react-client/src/ReactFlightClient.js

@@ -1794,13 +1794,21 @@ function transferReferencedDebugInfo(
         existingDebugInfo.push.apply(existingDebugInfo, referencedDebugInfo);
       }
     }
-    // We also add it to the initializing chunk since the resolution of that promise is
-    // also blocked by these. By adding it to both we can track it even if the array/element
+    // We also add the debug info to the initializing chunk since the resolution of that promise is
+    // also blocked by the referenced debug info. By adding it to both we can track it even if the array/element
     // is extracted, or if the root is rendered as is.
     if (parentChunk !== null) {
       const parentDebugInfo = parentChunk._debugInfo;
-      // $FlowFixMe[method-unbinding]
-      parentDebugInfo.push.apply(parentDebugInfo, referencedDebugInfo);
+      for (let i = 0; i < referencedDebugInfo.length; ++i) {
+        const debugInfoEntry = referencedDebugInfo[i];
+        if (debugInfoEntry.name != null) {
+          (debugInfoEntry: ReactComponentInfo);
+          // We're not transferring Component info since we use Component info
+          // in Debug info to fill in gaps between Fibers for the parent stack.
+        } else {
+          parentDebugInfo.push(debugInfoEntry);
+        }
+      }
     }
   }
 }

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -2957,6 +2957,12 @@ describe('ReactFlight', () => {
                   transport: expect.arrayContaining([]),
                 },
               },
+              {
+                time: 16,
+              },
+              {
+                time: 16,
+              },
               {time: 17},
             ]
           : undefined,
@@ -2976,6 +2982,12 @@ describe('ReactFlight', () => {
                   children: {},
                 },
               },
+              {
+                time: 19,
+              },
+              {
+                time: 19,
+              },
               {time: 19},
             ]
           : undefined,
@@ -3822,6 +3834,7 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<div>not using props</div>);
   });
 
+  // @gate !__DEV__ || enableComponentPerformanceTrack
   it('produces correct parent stacks', async () => {
     function Container() {
       return ReactServer.createElement('div', null);
@@ -3849,71 +3862,76 @@ describe('ReactFlight', () => {
       expect(root.type).toBe('main');
       if (__DEV__) {
         const div = root.props.children;
-        expect(getDebugInfo(div)).toMatchInlineSnapshot(`
-          [
-            {
-              "time": 14,
-            },
-            {
-              "env": "Server",
-              "key": null,
-              "name": "ContainerParent",
-              "owner": {
-                "env": "Server",
-                "key": null,
-                "name": "App",
-                "props": {},
-                "stack": "    in Object.<anonymous> (at **)",
-              },
-              "props": {},
-              "stack": "    in App (at **)",
-            },
-            {
-              "time": 15,
+        expect(getDebugInfo(div)).toEqual([
+          {
+            time: 14,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'ContainerParent',
+            owner: {
+              env: 'Server',
+              key: null,
+              name: 'App',
+              props: {},
+              stack: '    in Object.<anonymous> (at **)',
             },
-            {
-              "env": "Server",
-              "key": null,
-              "name": "Container",
-              "owner": {
-                "env": "Server",
-                "key": null,
-                "name": "ContainerParent",
-                "owner": {
-                  "env": "Server",
-                  "key": null,
-                  "name": "App",
-                  "props": {},
-                  "stack": "    in Object.<anonymous> (at **)",
-                },
-                "props": {},
-                "stack": "    in App (at **)",
+            props: {},
+            stack: '    in App (at **)',
+          },
+          {
+            time: 15,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'Container',
+            owner: {
+              env: 'Server',
+              key: null,
+              name: 'ContainerParent',
+              owner: {
+                env: 'Server',
+                key: null,
+                name: 'App',
+                props: {},
+                stack: '    in Object.<anonymous> (at **)',
               },
-              "props": {},
-              "stack": "    in ContainerParent (at **)",
-            },
-            {
-              "time": 16,
-            },
-          ]
-        `);
-        expect(getDebugInfo(root)).toMatchInlineSnapshot(`
-          [
-            {
-              "time": 12,
-            },
-            {
-              "env": "Server",
-              "key": null,
-              "name": "App",
-              "props": {},
-              "stack": "    in Object.<anonymous> (at **)",
+              props: {},
+              stack: '    in App (at **)',
             },
-            {
-              "time": 13,
-            },
-          ]
-        `);
+            props: {},
+            stack: '    in ContainerParent (at **)',
+          },
+          {
+            time: 16,
+          },
+        ]);
+        expect(getDebugInfo(root)).toEqual([
+          {
+            time: 12,
+          },
+          {
+            env: 'Server',
+            key: null,
+            name: 'App',
+            props: {},
+            stack: '    in Object.<anonymous> (at **)',
+          },
+          {
+            time: 13,
+          },
+          {
+            time: 14,
+          },
+          {
+            time: 15,
+          },
+          {
+            time: 16,
+          },
+        ]);
       } else {
         expect(root._debugInfo).toBe(undefined);
         expect(root._owner).toBe(undefined);