Ensure the temporary corruption of internal state goes unnoticed

Author: eps1lon

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

@@ -809,6 +809,7 @@ describe('ReactFlightDOMNode', () => {
         resolvePendingPromise = value => {
           p2.status = 'fulfilled';
           p2.value = value;
+          resolve(value);
         };
       });
       const p3 = new Promise(() => {});
@@ -888,11 +889,11 @@ describe('ReactFlightDOMNode', () => {
       },
     );
 
+    resolvePendingPromise('custom-instrum-resolve');
     await serverAct(
       async () =>
         new Promise(resolve => {
           setImmediate(() => {
-            resolvePendingPromise();
             clientAbortController.abort();
             resolve();
           });
@@ -908,7 +909,9 @@ describe('ReactFlightDOMNode', () => {
       expect(normalizeCodeLocInfo(componentStack)).toBe(
         '\n' +
           '    in SharedComponent (at **)\n' +
-          '    in ServerComponent\n' +
+          '    in ServerComponent' +
+          (gate(flags => flags.enableAsyncDebugInfo) ? ' (at **)' : '') +
+          '\n' +
           '    in Suspense\n' +
           '    in body\n' +
           '    in html\n' +
@@ -930,11 +933,13 @@ describe('ReactFlightDOMNode', () => {
       expect(ignoreListStack(ownerStack)).toBe(
         // eslint-disable-next-line react-internal/safe-string-coercion
         '' +
+          // The concrete location may change as this test is updated.
+          // Just make sure they still point at React.use(p2)
           (gate(flags => flags.enableAsyncDebugInfo)
             ? '\n    at SharedComponent (./ReactFlightDOMNode-test.js:794:7)'
             : '') +
-          '\n    at ServerComponent (file://./ReactFlightDOMNode-test.js:815:26)' +
-          '\n    at App (file://./ReactFlightDOMNode-test.js:832:25)',
+          '\n    at ServerComponent (file://./ReactFlightDOMNode-test.js:816:26)' +
+          '\n    at App (file://./ReactFlightDOMNode-test.js:833:25)',
       );
     } else {
       expect(ownerStack).toBeNull();
@@ -1525,12 +1530,12 @@ describe('ReactFlightDOMNode', () => {
           '\n' +
             '    in Dynamic' +
             (gate(flags => flags.enableAsyncDebugInfo)
-              ? ' (file://ReactFlightDOMNode-test.js:1395:27)\n'
+              ? ' (file://ReactFlightDOMNode-test.js:1400:27)\n'
               : '\n') +
             '    in body\n' +
             '    in html\n' +
-            '    in App (file://ReactFlightDOMNode-test.js:1412:25)\n' +
-            '    in ClientRoot (ReactFlightDOMNode-test.js:1487:16)',
+            '    in App (file://ReactFlightDOMNode-test.js:1417:25)\n' +
+            '    in ClientRoot (ReactFlightDOMNode-test.js:1492:16)',
         );
       } else {
         expect(
@@ -1539,7 +1544,7 @@ describe('ReactFlightDOMNode', () => {
           '\n' +
             '    in body\n' +
             '    in html\n' +
-            '    in ClientRoot (ReactFlightDOMNode-test.js:1487:16)',
+            '    in ClientRoot (ReactFlightDOMNode-test.js:1492:16)',
         );
       }
 
@@ -1549,16 +1554,16 @@ describe('ReactFlightDOMNode', () => {
             normalizeCodeLocInfo(ownerStack, {preserveLocation: true}),
           ).toBe(
             '\n' +
-              '    in Dynamic (file://ReactFlightDOMNode-test.js:1395:27)\n' +
-              '    in App (file://ReactFlightDOMNode-test.js:1412:25)',
+              '    in Dynamic (file://ReactFlightDOMNode-test.js:1400:27)\n' +
+              '    in App (file://ReactFlightDOMNode-test.js:1417:25)',
           );
         } else {
           expect(
             normalizeCodeLocInfo(ownerStack, {preserveLocation: true}),
           ).toBe(
             '' +
               '\n' +
-              '    in App (file://ReactFlightDOMNode-test.js:1412:25)',
+              '    in App (file://ReactFlightDOMNode-test.js:1417:25)',
           );
         }
       } else {

packages/react-server/src/ReactFizzThenable.js

@@ -255,12 +255,19 @@ export function ensureSuspendableThenableStateDEV(
 ): () => void {
   if (__DEV__) {
     const lastThenable = thenableState[thenableState.length - 1];
+    // Reset the last thenable back to pending.
     switch (lastThenable.status) {
       case 'fulfilled':
         const previousThenableValue = lastThenable.value;
+        const previousThenableThen = lastThenable.then;
         delete lastThenable.value;
         delete (lastThenable: any).status;
+        // We'll call .then again if we resuspend. Since we potentially corrupted
+        // the internal state of unknown classes, we need to diffuse the potential
+        // crash by replacing the .then method with a noop.
+        lastThenable.then = noop;
         return () => {
+          lastThenable.then = previousThenableThen.bind(lastThenable);
           lastThenable.value = previousThenableValue;
           lastThenable.status = 'fulfilled';
         };