add test for duplicate IO info

Author: lubieowoce

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -1880,6 +1880,224 @@ describe('ReactFlightDOMNode', () => {
       );
     });
 
+    // @gate __DEV__
+    it('can preserve debug info when decoding and re-encoding a stream with two components blocked on the same IO', async () => {
+      let resolveDynamicData;
+
+      // Used in two components, so dedupe with React.cache so we resolve them both
+      const getDynamicData = ReactServer.cache(function getDynamicData() {
+        return new Promise(resolve => {
+          resolveDynamicData = resolve;
+        });
+      });
+
+      async function Dynamic1() {
+        const data = await getDynamicData();
+        return ReactServer.createElement('p', null, data);
+      }
+      async function Dynamic2() {
+        const data = await getDynamicData();
+        return ReactServer.createElement('p', null, data);
+      }
+
+      function App() {
+        return ReactServer.createElement(
+          'html',
+          null,
+          ReactServer.createElement(
+            'body',
+            null,
+            ReactServer.createElement(
+              ReactServer.Suspense,
+              {fallback: 'Loading...'},
+              // TODO: having a wrapper <section> here seems load-bearing.
+              // ReactServer.createElement(ReactServer.createElement(Dynamic)),
+              ReactServer.createElement(
+                'section',
+                null,
+                ReactServer.createElement(Dynamic1),
+              ),
+            ),
+            ReactServer.createElement(
+              ReactServer.Suspense,
+              {fallback: 'Loading...'},
+              // TODO: having a wrapper <section> here seems load-bearing.
+              // ReactServer.createElement(ReactServer.createElement(Dynamic)),
+              ReactServer.createElement(
+                'section',
+                null,
+                ReactServer.createElement(Dynamic2),
+              ),
+            ),
+          ),
+        );
+      }
+
+      const resolveDynamic = () => {
+        resolveDynamicData('Hi Janka');
+      };
+
+      // 1. Render <App />, dividing the output into static and dynamic content.
+
+      let startTime = -1;
+      let isStatic = true;
+      const chunks1 = {
+        static: [],
+        dynamic: [],
+      };
+
+      await new Promise(resolve => {
+        setTimeout(async () => {
+          startTime = performance.now() + performance.timeOrigin;
+          const stream = ReactServerDOMServer.renderToPipeableStream(
+            ReactServer.createElement(App),
+            webpackMap,
+            {
+              filterStackFrame,
+              startTime,
+              environmentName() {
+                return isStatic ? 'Prerender' : 'Server';
+              },
+            },
+          );
+
+          const passThrough = new Stream.PassThrough(streamOptions);
+
+          passThrough.on('data', chunk => {
+            if (isStatic) {
+              chunks1.static.push(chunk);
+            } else {
+              chunks1.dynamic.push(chunk);
+            }
+          });
+          passThrough.on('end', resolve);
+
+          stream.pipe(passThrough);
+        });
+        setTimeout(() => {
+          isStatic = false;
+          resolveDynamic();
+        });
+      });
+
+      //===============================================
+      // 2. Decode the stream from the previous step and render it again.
+      // This should preserve existing debug info.
+
+      const serverConsumerManifest = {
+        moduleMap: null,
+        moduleLoading: null,
+      };
+
+      const {chunks: chunks2, staticEndTime: reencodeStaticEndTime} =
+        await reencodeFlightStream(
+          chunks1.static,
+          chunks1.dynamic,
+          startTime,
+          serverConsumerManifest,
+        );
+
+      //===============================================
+      // 3. SSR the stream from the previous step and abort it after the static stage
+      // (which should trigger `onError` for each "hole" that hasn't resolved yet)
+
+      function ClientRoot({response}) {
+        return use(response);
+      }
+
+      let ssrStream;
+      const errorLocations: Array<{
+        componentStack: string,
+        ownerStack: string | null,
+      }> = [];
+
+      await new Promise(async (resolve, reject) => {
+        const renderController = new AbortController();
+
+        const serverStream = createReadableWithLateRelease(
+          chunks2.static,
+          chunks2.dynamic,
+          renderController.signal,
+        );
+
+        const decodedPromise = ReactServerDOMClient.createFromNodeStream(
+          serverStream,
+          serverConsumerManifest,
+          {
+            endTime: reencodeStaticEndTime,
+          },
+        );
+
+        setTimeout(() => {
+          ssrStream = ReactDOMServer.renderToPipeableStream(
+            React.createElement(ClientRoot, {response: decodedPromise}),
+            {
+              onError(err, errorInfo) {
+                const componentStack = errorInfo.componentStack;
+                const ownerStack = React.captureOwnerStack
+                  ? React.captureOwnerStack()
+                  : null;
+                errorLocations.push({componentStack, ownerStack});
+                return null;
+              },
+            },
+          );
+
+          renderController.signal.addEventListener(
+            'abort',
+            () => {
+              const {reason} = renderController.signal;
+              ssrStream.abort(reason);
+            },
+            {
+              once: true,
+            },
+          );
+        });
+
+        setTimeout(() => {
+          renderController.abort(new Error('ssr-abort'));
+          resolve();
+        });
+      });
+
+      const result = await readResult(ssrStream);
+
+      expect(errorLocations).toHaveLength(2);
+      expect(normalizeCodeLocInfo(errorLocations[0].componentStack)).toBe(
+        '\n' +
+          '    in Dynamic1 (at **)\n' +
+          '    in section\n' +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+      expect(normalizeCodeLocInfo(errorLocations[0].ownerStack)).toBe(
+        '\n' + '    in Dynamic1 (at **)\n' + '    in App (at **)',
+      );
+
+      expect(normalizeCodeLocInfo(errorLocations[1].componentStack)).toBe(
+        '\n' +
+          '    in Dynamic2 (at **)\n' +
+          '    in section\n' +
+          '    in Suspense\n' +
+          '    in body\n' +
+          '    in html\n' +
+          '    in App (at **)\n' +
+          '    in ClientRoot (at **)',
+      );
+      expect(normalizeCodeLocInfo(errorLocations[1].ownerStack)).toBe(
+        '\n' + '    in Dynamic2 (at **)\n' + '    in App (at **)',
+      );
+
+      expect(result).toContain(
+        'Switched to client rendering because the server rendering aborted due to:\n\n' +
+          'ssr-abort',
+      );
+    });
+
     // @gate __DEV__
     it('can preserve debug info for promises when decoding and re-encoding a stream', async () => {
       function ClientComponent({promise}) {