[Flight] Collect Debug Info from Rejections in Aborted Render (#33708)

This delays the abort by splitting the abort into a first step that just
flags a task as abort and tracks the time that we aborted. This first
step also invokes the `cacheSignal()` abort handler.

Then in a macrotask do we finish flushing the abort (or halt). This
ensures that any microtasks after the abort signal can finish flushing
which may emit rejections or fulfill (e.g. if you try/catch the abort or
if it was allSettled). These rejections are themselves signals for which
promise was blocked on what promise which forms a graph that we can use
for debug info. Notably this doesn't include any additional data in the
output since we don't include any data produced after the abort. It just
uses the additional execution to collect more debug info.

The abort itself might not have been spawned from I/O but it's still
interesting to mark Promises that aborted as interesting since they may
have been blocked on I/O. So we take the inner most Promise that
resolved after the end time (presumably due to the abort signal but also
could've just finished after but that's still after the abort).

Since the microtasks can spawn new Promises after the ones that reject
we ignore any of those that started after the abort.

Author: sebmarkbage

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

@@ -2876,7 +2876,9 @@ describe('ReactFlightDOM', () => {
       };
     });
 
-    controller.abort('boom');
+    await serverAct(() => {
+      controller.abort('boom');
+    });
     resolveGreeting();
     const {prelude} = await pendingResult;
 

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

@@ -2549,7 +2549,7 @@ describe('ReactFlightDOMBrowser', () => {
 
     controller.abort('boom');
     resolveGreeting();
-    const {prelude} = await pendingResult;
+    const {prelude} = await serverAct(() => pendingResult);
     expect(errors).toEqual([]);
 
     function ClientRoot({response}) {

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

@@ -1437,7 +1437,9 @@ describe('ReactFlightDOMEdge', () => {
       };
     });
 
-    controller.abort('boom');
+    await serverAct(() => {
+      controller.abort('boom');
+    });
     resolveGreeting();
     const {prelude} = await pendingResult;
 
@@ -1497,7 +1499,7 @@ describe('ReactFlightDOMEdge', () => {
     });
 
     controller.abort();
-    const {prelude} = await pendingResult;
+    const {prelude} = await serverAct(() => pendingResult);
 
     expect(errors).toEqual([]);
 

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

@@ -77,6 +77,17 @@ describe('ReactFlightDOMNode', () => {
     use = React.use;
   });
 
+  function filterStackFrame(filename, functionName) {
+    return (
+      filename !== '' &&
+      !filename.startsWith('node:') &&
+      !filename.includes('node_modules') &&
+      // Filter out our own internal source code since it'll typically be in node_modules
+      (!filename.includes('/packages/') || filename.includes('/__tests__/')) &&
+      !filename.includes('/build/')
+    );
+  }
+
   function normalizeCodeLocInfo(str) {
     return (
       str &&
@@ -560,7 +571,7 @@ describe('ReactFlightDOMNode', () => {
 
     controller.abort('boom');
     resolveGreeting();
-    const {prelude} = await pendingResult;
+    const {prelude} = await serverAct(() => pendingResult);
     expect(errors).toEqual([]);
 
     function ClientRoot({response}) {
@@ -711,4 +722,145 @@ describe('ReactFlightDOMNode', () => {
       expect(ownerStack).toBeNull();
     }
   });
+
+  // @gate enableHalt && enableAsyncDebugInfo
+  it('includes deeper location for aborted stacks', async () => {
+    async function getData() {
+      const signal = ReactServer.cacheSignal();
+      await new Promise((resolve, reject) => {
+        signal.addEventListener('abort', () => reject(signal.reason));
+      });
+    }
+
+    async function thisShouldNotBeInTheStack() {
+      await new Promise((resolve, reject) => {
+        resolve();
+      });
+    }
+
+    async function Component() {
+      try {
+        await getData();
+      } catch (x) {
+        await thisShouldNotBeInTheStack(); // This is issued after the rejection so should not be included.
+      }
+      return null;
+    }
+
+    function App() {
+      return ReactServer.createElement(
+        'html',
+        null,
+        ReactServer.createElement(
+          'body',
+          null,
+          ReactServer.createElement(
+            ReactServer.Suspense,
+            {fallback: 'Loading...'},
+            ReactServer.createElement(Component, null),
+          ),
+        ),
+      );
+    }
+
+    const errors = [];
+    const serverAbortController = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.unstable_prerender(
+          ReactServer.createElement(App, null),
+          webpackMap,
+          {
+            signal: serverAbortController.signal,
+            onError(error) {
+              errors.push(error);
+            },
+            filterStackFrame,
+          },
+        ),
+      };
+    });
+
+    await serverAct(
+      () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            serverAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const {prelude} = await pendingResult;
+
+    expect(errors).toEqual([]);
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const prerenderResponse = ReactServerDOMClient.createFromReadableStream(
+      await createBufferedUnclosingStream(prelude),
+      {
+        serverConsumerManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      },
+    );
+
+    let componentStack;
+    let ownerStack;
+
+    const clientAbortController = new AbortController();
+
+    const fizzPrerenderStreamResult = ReactDOMFizzStatic.prerender(
+      React.createElement(ClientRoot, {response: prerenderResponse}),
+      {
+        signal: clientAbortController.signal,
+        onError(error, errorInfo) {
+          componentStack = errorInfo.componentStack;
+          ownerStack = React.captureOwnerStack
+            ? React.captureOwnerStack()
+            : null;
+        },
+      },
+    );
+
+    await await serverAct(
+      async () =>
+        new Promise(resolve => {
+          setImmediate(() => {
+            clientAbortController.abort();
+            resolve();
+          });
+        }),
+    );
+
+    const fizzPrerenderStream = await fizzPrerenderStreamResult;
+    const prerenderHTML = await readWebResult(fizzPrerenderStream.prelude);
+
+    expect(prerenderHTML).toContain('Loading...');
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Component (at **)\n    in Suspense\n    in body\n    in html\n    in ClientRoot (at **)',
+      );
+    } else {
+      expect(normalizeCodeLocInfo(componentStack)).toBe(
+        '\n    in Suspense\n    in body\n    in html\n    in ClientRoot (at **)',
+      );
+    }
+
+    if (__DEV__) {
+      expect(normalizeCodeLocInfo(ownerStack)).toBe(
+        '\n    in getData (at **)' +
+          '\n    in Component (at **)' +
+          '\n    in App (at **)',
+      );
+    } else {
+      expect(ownerStack).toBeNull();
+    }
+  });
 });

packages/react-server/src/ReactFizzServer.js

@@ -1019,6 +1019,7 @@ function pushHaltedAwaitOnComponentStack(
             stack: bestStack.debugStack,
           };
           task.debugTask = (bestStack.debugTask: any);
+          break;
         }
       }
     }