[Fizz] Reset error component stack and fix error messages

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -981,4 +981,149 @@ describe('ReactDOMFizzStaticBrowser', () => {
 
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
+
+  // @gate enablePostpone
+  it('errors if the replay does not line up', async () => {
+    let prerendering = true;
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function Wrapper({children}) {
+      return children;
+    }
+
+    const lazySpan = React.lazy(async () => {
+      await 0;
+      return {default: <span />};
+    });
+
+    function App() {
+      const children = (
+        <Suspense fallback="Loading...">
+          <Postpone />
+        </Suspense>
+      );
+      return (
+        <>
+          <div>{prerendering ? <Wrapper>{children}</Wrapper> : children}</div>
+          <div>
+            {prerendering ? (
+              <Suspense fallback="Loading...">
+                <div>
+                  <Postpone />
+                </div>
+              </Suspense>
+            ) : (
+              lazySpan
+            )}
+          </div>
+        </>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div>Loading...</div>,
+      <div>Loading...</div>,
+    ]);
+
+    prerendering = false;
+
+    const errors = [];
+    const resumed = await ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    expect(errors).toEqual([
+      'Expected the resume to render <Wrapper> in this slot but instead it rendered <Suspense>. ' +
+        "The tree doesn't match so React will fallback to client rendering.",
+      'Expected the resume to render <Suspense> in this slot but instead it rendered <span>. ' +
+        "The tree doesn't match so React will fallback to client rendering.",
+    ]);
+
+    // TODO: Test the component stack but we don't expose it to the server yet.
+
+    await readIntoContainer(resumed);
+
+    // Client rendered
+    expect(getVisibleChildren(container)).toEqual([
+      <div>Loading...</div>,
+      <div>Loading...</div>,
+    ]);
+  });
+
+  // @gate enablePostpone
+  it('can abort the resume', async () => {
+    let prerendering = true;
+    const infinitePromise = new Promise(() => {});
+    function Postpone() {
+      if (prerendering) {
+        React.unstable_postpone();
+      }
+      return 'Hello';
+    }
+
+    function App() {
+      if (!prerendering) {
+        React.use(infinitePromise);
+      }
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Postpone />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const prerendered = await ReactDOMFizzStatic.prerender(<App />);
+    expect(prerendered.postponed).not.toBe(null);
+
+    await readIntoContainer(prerendered.prelude);
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    prerendering = false;
+
+    const controller = new AbortController();
+
+    const errors = [];
+
+    const resumedPromise = ReactDOMFizzServer.resume(
+      <App />,
+      JSON.parse(JSON.stringify(prerendered.postponed)),
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x);
+        },
+      },
+    );
+
+    controller.abort('abort');
+
+    const resumed = await resumedPromise;
+    await resumed.allReady;
+
+    expect(errors).toEqual(['abort']);
+
+    await readIntoContainer(resumed);
+
+    // Client rendered
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+  });
 });

packages/react-server/src/ReactFizzServer.js

@@ -1110,7 +1110,6 @@ function replaySuspenseBoundary(
   // on preparing fallbacks if we don't have any more main content to task on.
   request.pingedTasks.push(suspendedFallbackTask);
 
-  // TODO: Should this be in the finally?
   popComponentStackInDEV(task);
 }
 
@@ -1953,17 +1952,19 @@ function replayElement(
     if (keyOrIndex !== node[1]) {
       continue;
     }
-    // Let's double check that the component name matches as a precaution.
-    if (name !== null && name !== node[0]) {
-      throw new Error(
-        'Expected to see a component of type "' +
-          name +
-          '" in this slot. ' +
-          "The tree doesn't match so React will fallback to client rendering.",
-      );
-    }
     if (node.length === 4) {
       // Matched a replayable path.
+      // Let's double check that the component name matches as a precaution.
+      if (name !== null && name !== node[0]) {
+        throw new Error(
+          'Expected the resume to render <' +
+            (node[0]: any) +
+            '> in this slot but instead it rendered <' +
+            name +
+            '>. ' +
+            "The tree doesn't match so React will fallback to client rendering.",
+        );
+      }
       const childNodes = node[2];
       const childSlots = node[3];
       task.replay = {nodes: childNodes, slots: childSlots, pendingTasks: 1};
@@ -2009,8 +2010,13 @@ function replayElement(
     } else {
       // Let's double check that the component type matches.
       if (type !== REACT_SUSPENSE_TYPE) {
+        const expectedType = 'Suspense';
         throw new Error(
-          'Expected to see a Suspense boundary in this slot. ' +
+          'Expected the resume to render <' +
+            expectedType +
+            '> in this slot but instead it rendered <' +
+            (getComponentNameFromType(type) || 'Unknown') +
+            '>. ' +
             "The tree doesn't match so React will fallback to client rendering.",
         );
       }
@@ -2378,6 +2384,7 @@ function replayFragment(
       // in the original prerender. What's unable to complete is the child
       // replay nodes which might be Suspense boundaries which are able to
       // absorb the error and we can still continue with siblings.
+      // This is an error, stash the component stack if it is null.
       erroredReplay(request, task.blockedBoundary, x, childNodes, childSlots);
     } finally {
       task.replay.pendingTasks--;
@@ -2849,6 +2856,7 @@ function renderNode(
           if (__DEV__) {
             task.componentStack = previousComponentStack;
           }
+          lastBoundaryErrorComponentStackDev = null;
           return;
         }
       }
@@ -2930,6 +2938,7 @@ function erroredTask(
     errorDigest = logRecoverableError(request, error);
   }
   if (boundary === null) {
+    lastBoundaryErrorComponentStackDev = null;
     fatalError(request, error);
   } else {
     boundary.pendingTasks--;
@@ -2949,6 +2958,8 @@ function erroredTask(
         // We reuse the same queue for errors.
         request.clientRenderedBoundaries.push(boundary);
       }
+    } else {
+      lastBoundaryErrorComponentStackDev = null;
     }
   }
 
@@ -3077,14 +3088,14 @@ function abortTask(task: Task, request: Request, error: mixed): void {
   }
 
   if (boundary === null) {
-    request.allPendingTasks--;
     if (request.status !== CLOSING && request.status !== CLOSED) {
       const replay: null | ReplaySet = task.replay;
       if (replay === null) {
         // We didn't complete the root so we have nothing to show. We can close
         // the request;
         logRecoverableError(request, error);
         fatalError(request, error);
+        return;
       } else {
         // If the shell aborts during a replay, that's not a fatal error. Instead
         // we should be able to recover by client rendering all the root boundaries in
@@ -3101,6 +3112,12 @@ function abortTask(task: Task, request: Request, error: mixed): void {
             errorDigest,
           );
         }
+        request.pendingRootTasks--;
+        if (request.pendingRootTasks === 0) {
+          request.onShellError = noop;
+          const onShellReady = request.onShellReady;
+          onShellReady();
+        }
       }
     }
   } else {
@@ -3137,12 +3154,12 @@ function abortTask(task: Task, request: Request, error: mixed): void {
       abortTask(fallbackTask, request, error),
     );
     boundary.fallbackAbortableTasks.clear();
+  }
 
-    request.allPendingTasks--;
-    if (request.allPendingTasks === 0) {
-      const onAllReady = request.onAllReady;
-      onAllReady();
-    }
+  request.allPendingTasks--;
+  if (request.allPendingTasks === 0) {
+    const onAllReady = request.onAllReady;
+    onAllReady();
   }
 }
 
@@ -3365,6 +3382,7 @@ function retryRenderTask(
         logPostpone(request, postponeInstance.message);
         trackPostpone(request, trackedPostpones, task, segment);
         finishedTask(request, task.blockedBoundary, segment);
+        lastBoundaryErrorComponentStackDev = null;
         return;
       }
     }
@@ -3452,6 +3470,12 @@ function retryReplayTask(request: Request, task: ReplayTask): void {
       task.replay.nodes,
       task.replay.slots,
     );
+    request.pendingRootTasks--;
+    if (request.pendingRootTasks === 0) {
+      request.onShellError = noop;
+      const onShellReady = request.onShellReady;
+      onShellReady();
+    }
     request.allPendingTasks--;
     if (request.allPendingTasks === 0) {
       const onAllReady = request.onAllReady;

scripts/error-codes/codes.json

@@ -474,8 +474,8 @@
   "486": "It should not be possible to postpone at the root. This is a bug in React.",
   "487": "We should not have any resumable nodes in the shell. This is a bug in React.",
   "488": "Couldn't find all resumable slots by key/index during replaying. The tree doesn't match so React will fallback to client rendering.",
-  "489": "Expected to see a component of type \"%s\" in this slot. The tree doesn't match so React will fallback to client rendering.",
-  "490": "Expected to see a Suspense boundary in this slot. The tree doesn't match so React will fallback to client rendering.",
+  "489": "Expected the resume to render <%s> in this slot but instead it rendered <%s>. The tree doesn't match so React will fallback to client rendering.",
+  "490": "Expected the resume to render <%s> in this slot but instead it rendered <%s>. The tree doesn't match so React will fallback to client rendering.",
   "491": "It should not be possible to postpone both at the root of an element as well as a slot below. This is a bug in React.",
   "492": "The \"react\" package in this environment is not configured correctly. The \"react-server\" condition must be enabled in any environment that runs React Server Components.",
   "493": "To taint a value, a lifetime must be defined by passing an object that holds the value.",