From e34e1df2f9da7f1c466710e06a9fe43e409339d0 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 12 May 2022 15:57:20 -0700
Subject: [PATCH] support encoding errors in html stream and escape user input

This commit adds another way to get errors to the suspense instance by encoding them as dataset properties of a template element at the head of the boundary. Previously if there was an error before the boundary flushed there was no way to stream the error to the client because there would never be a client render instruction.

Additionally the error is sent in 3 parts

1) error hash - this is always sent (dev or prod) if one is provided
2) error message - Dev only
3) error component stack - Dev only, this now captures the stack at the point of error

Another item addressed in this commit is the escaping of potentially unsafe data. all error components are escaped as test for browers when written into the html and as javascript strings when written into a client render instruction.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 440 +++++++++++++++---
 .../ReactDOMFizzServerBrowser-test.js         |  22 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  30 +-
 .../src/client/ReactDOMHostConfig.js          |  25 +-
 .../src/server/ReactDOMFizzServerNode.js      |   2 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 119 ++++-
 .../ReactDOMServerLegacyFormatConfig.js       |   4 +
 .../server/ReactNativeServerFormatConfig.js   |   8 +-
 .../src/ReactFiberBeginWork.new.js            |  26 +-
 .../src/ReactFiberBeginWork.old.js            |  26 +-
 .../ReactFiberHostConfigWithNoHydration.js    |   2 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |   4 +-
 .../ReactDOMServerFB-test.internal.js         |   7 +-
 packages/react-server/src/ReactFizzServer.js  | 124 ++++-
 14 files changed, 705 insertions(+), 134 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index e519d92691ead..1710161227302 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -90,32 +90,46 @@ describe('ReactDOMFizzServer', () => {
   });
 
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
+    const mappedErrows = errorsArr.map(error => {
+      if (error.componentStack) {
+        return [
+          error.message,
+          error.hash,
+          normalizeCodeLocInfo(error.componentStack),
+        ];
+      } else if (error.hash) {
+        return [error.message, error.hash];
+      }
+      return error.message;
+    });
     if (__DEV__) {
-      expect(errorsArr.map(error => normalizeCodeLocInfo(error))).toEqual(
-        toBeDevArr.map(error => {
-          if (typeof error === 'string' || error instanceof String) {
-            return error;
-          }
-          let str = JSON.stringify(error).replace(/\\n/g, '\n');
-          // this gets stripped away by normalizeCodeLocInfo...
-          // Kind of hacky but lets strip it away here too just so they match...
-          // easier than fixing the regex to account for this edge case
-          if (str.endsWith('at **)"}')) {
-            str = str.replace(/at \*\*\)\"}$/, 'at **)');
-          }
-          return str;
-        }),
+      expect(mappedErrows).toEqual(
+        toBeDevArr,
+        // .map(([errorMessage, errorHash, errorComponentStack]) => {
+        //   if (typeof error === 'string' || error instanceof String) {
+        //     return error;
+        //   }
+        //   let str = JSON.stringify(error).replace(/\\n/g, '\n');
+        //   // this gets stripped away by normalizeCodeLocInfo...
+        //   // Kind of hacky but lets strip it away here too just so they match...
+        //   // easier than fixing the regex to account for this edge case
+        //   if (str.endsWith('at **)"}')) {
+        //     str = str.replace(/at \*\*\)\"}$/, 'at **)');
+        //   }
+        //   return str;
+        // }),
       );
     } else {
-      expect(errorsArr).toEqual(toBeProdArr);
+      expect(mappedErrows).toEqual(toBeProdArr);
     }
   }
 
-  function componentStack(components) {
-    return components
-      .map(component => `\n    in ${component} (at **)`)
-      .join('');
-  }
+  // @TODO we will use this in a followup change once we start exposing componentStacks from server errors
+  // function componentStack(components) {
+  //   return components
+  //     .map(component => `\n    in ${component} (at **)`)
+  //     .join('');
+  // }
 
   async function act(callback) {
     await callback();
@@ -436,8 +450,6 @@ describe('ReactDOMFizzServer', () => {
       });
     });
 
-    const loggedErrors = [];
-
     function App({isClient}) {
       return (
         <div>
@@ -455,20 +467,26 @@ describe('ReactDOMFizzServer', () => {
       // Attempt to hydrate the content.
       ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
         onRecoverableError(error) {
-          errors.push(error.message);
+          errors.push(error);
         },
       });
     };
 
+    const theError = new Error('Test');
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'Hash of (' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
         {
           bootstrapScriptContent: '__INIT__();',
-          onError(x) {
-            loggedErrors.push(x);
-            return 'Hash';
-          },
+          onError,
         },
       );
       pipe(writable);
@@ -483,7 +501,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     await act(async () => {
       rejectComponent(theError);
     });
@@ -497,13 +514,10 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
+      [theError.message],
       [
-        {
-          error: theError.message,
-          componentStack: componentStack(['Lazy', 'Suspense', 'div', 'App']),
-        },
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
       ],
-      ['Hash'],
     );
 
     // The client rendered HTML is now in place.
@@ -552,7 +566,14 @@ describe('ReactDOMFizzServer', () => {
       });
     });
 
+    const theError = new Error('Test');
     const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash of (' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
 
     function App({isClient}) {
       return (
@@ -569,10 +590,7 @@ describe('ReactDOMFizzServer', () => {
         <App isClient={false} />,
 
         {
-          onError(x) {
-            loggedErrors.push(x);
-            return 'hash';
-          },
+          onError,
         },
       );
       pipe(writable);
@@ -583,7 +601,7 @@ describe('ReactDOMFizzServer', () => {
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        errors.push(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -593,7 +611,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     await act(async () => {
       rejectElement(theError);
     });
@@ -608,18 +625,157 @@ describe('ReactDOMFizzServer', () => {
 
     expectErrors(
       errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    // expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  // @gate experimental
+  it('Errors in boundaries should be sent to the client and reported on client render - Error before flushing', async () => {
+    function Indirection({level, children}) {
+      if (level > 0) {
+        return <Indirection level={level - 1}>{children}</Indirection>;
+      }
+      return children;
+    }
+
+    const theError = new Error('uh oh');
+
+    function Erroring({isClient}) {
+      if (isClient) {
+        return 'Hello World';
+      }
+      throw theError;
+    }
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<span>loading...</span>}>
+            <Erroring isClient={isClient} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash(' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App />,
+
+        {
+          onError,
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([theError]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error);
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
+
+    expectErrors(
+      errors,
+      [theError.message],
       [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
+  });
+
+  // @gate experimental
+  it('Errors in boundaries should be sent to the client and reported on client render - Error after flushing', async () => {
+    let rejectComponent;
+    const LazyComponent = React.lazy(() => {
+      return new Promise((resolve, reject) => {
+        rejectComponent = reject;
+      });
+    });
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? <Text text="Hello" /> : <LazyComponent text="Hello" />}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    const theError = new Error('uh oh');
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash(' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App />,
+
         {
-          error: theError.message,
-          componentStack: componentStack(['div', 'App']),
+          onError,
         },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error);
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(async () => {
+      rejectComponent(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    expect(Scheduler).toFlushAndYield([]);
+
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
       ],
-      ['hash'],
     );
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
-
     expect(loggedErrors).toEqual([theError]);
   });
 
@@ -891,9 +1047,15 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    const loggedErrors = [];
+    function onError(error) {
+      loggedErrors.push(error);
+      return `Hash of (${error.message})`;
+    }
+
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      controls = ReactDOMFizzServer.renderToPipeableStream(<App />, {onError});
       controls.pipe(writable);
     });
 
@@ -903,7 +1065,7 @@ describe('ReactDOMFizzServer', () => {
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
-        errors.push(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -921,7 +1083,9 @@ describe('ReactDOMFizzServer', () => {
     expectErrors(
       errors,
       ['This Suspense boundary was aborted by the server'],
-      ['This Suspense boundary was aborted by the server'],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
     );
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
@@ -1580,17 +1744,22 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    const theError = new Error('Test');
     const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return `hash of (${x.message})`;
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
     let controls;
     await act(async () => {
       controls = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
 
         {
-          onError(x) {
-            loggedErrors.push(x);
-            return 'error hash';
-          },
+          onError,
         },
       );
       controls.pipe(writable);
@@ -1602,7 +1771,7 @@ describe('ReactDOMFizzServer', () => {
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        errors.push(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -1612,7 +1781,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     // Error the content, but we don't have a fallback yet.
     await act(async () => {
       rejectText('Hello', theError);
@@ -1636,20 +1804,10 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
+      [theError.message],
       [
-        {
-          error: theError.message,
-          componentStack: componentStack([
-            'AsyncText',
-            'h1',
-            'Suspense',
-            'div',
-            'Suspense',
-            'App',
-          ]),
-        },
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
       ],
-      ['error hash'],
     );
 
     // The client rendered HTML is now in place.
@@ -2856,6 +3014,160 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  describe('error escaping', () => {
+    //@gate experimental
+    it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
+      window.__outlet = {};
+
+      const dangerousErrorString =
+        '"></template></div><script>window.__outlet.message="from error"</script><div><template data-foo="';
+
+      function Erroring() {
+        throw new Error(dangerousErrorString);
+      }
+
+      // We can't test newline in component stacks because the stack always takes just one line and we end up
+      // dropping the first part including the \n character
+      Erroring.displayName =
+        'DangerousName' +
+        dangerousErrorString.replace(
+          'message="from error"',
+          'stack="from_stack"',
+        );
+
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Erroring />
+            </Suspense>
+          </div>
+        );
+      }
+
+      function onError(x) {
+        return `dangerous hash ${x.message.replace(
+          'message="from error"',
+          'hash="from hash"',
+        )}`;
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+      expect(window.__outlet).toEqual({});
+    });
+    //@gate experimental
+    it('escapes error hash, message, and component stack values in clientRenderInstruction (javascript escaping)', async () => {
+      window.__outlet = {};
+
+      const dangerousErrorString =
+        '");window.__outlet.message="from error";</script><script>(() => {})("';
+
+      let rejectComponent;
+      const SuspensyErroring = React.lazy(() => {
+        return new Promise((resolve, reject) => {
+          rejectComponent = reject;
+        });
+      });
+
+      // We can't test newline in component stacks because the stack always takes just one line and we end up
+      // dropping the first part including the \n character
+      SuspensyErroring.displayName =
+        'DangerousName' +
+        dangerousErrorString.replace(
+          'message="from error"',
+          'stack="from_stack"',
+        );
+
+      function App() {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <SuspensyErroring />
+            </Suspense>
+          </div>
+        );
+      }
+
+      function onError(x) {
+        return `dangerous hash ${x.message.replace(
+          'message="from error"',
+          'hash="from hash"',
+        )}`;
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      await act(() => {
+        rejectComponent(new Error(dangerousErrorString));
+      });
+      expect(window.__outlet).toEqual({});
+    });
+    //@gate experimental
+    it('escapes such that attributes cannot be masked', async () => {
+      const dangerousErrorString = '" data-msg="bad message" data-foo="';
+      const theError = new Error(dangerousErrorString);
+
+      function Erroring({isClient}) {
+        if (isClient) return 'Hello';
+        throw theError;
+      }
+
+      function App({isClient}) {
+        return (
+          <div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Erroring isClient={isClient} />
+            </Suspense>
+          </div>
+        );
+      }
+
+      const loggedErrors = [];
+      function onError(x) {
+        loggedErrors.push(x);
+        return x.message.replace('bad message', 'bad hash');
+      }
+      // const expectedHash = onError(theError);
+      // loggedErrors.length = 0;
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      expect(loggedErrors).toEqual([theError]);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error) {
+          errors.push(error);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+
+      // If escaping were not done we would get a message that says "bad hash"
+      expectErrors(
+        errors,
+        [theError.message],
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        ],
+      );
+    });
+  });
+
   describe('bootstrapScriptContent escaping', () => {
     // @gate experimental
     it('the "S" in "</?[Ss]cript" strings are replaced with unicode escaped lowercase s or S depending on case, preserving case sensitivity of nearby characters', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 792b9611f29f2..3aacf68cc3b26 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -193,6 +193,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
     const controller = new AbortController();
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
@@ -200,13 +201,22 @@ describe('ReactDOMFizzServer', () => {
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      {signal: controller.signal},
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
     );
 
     controller.abort();
 
     const result = await readResult(stream);
     expect(result).toContain('Loading');
+
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
   });
 
   // @gate experimental
@@ -223,12 +233,18 @@ describe('ReactDOMFizzServer', () => {
       rendered = true;
       return 'Done';
     }
+    const errors = [];
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Wait /> />
         </Suspense>
       </div>,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
     );
 
     stream.allReady.then(() => (isComplete = true));
@@ -239,6 +255,10 @@ describe('ReactDOMFizzServer', () => {
     const reader = stream.getReader();
     reader.cancel();
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
+
     hasLoaded = true;
     resolve();
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index c1844d7ef78bf..cb5ec892bd2c8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -211,7 +211,7 @@ describe('ReactDOMFizzServer', () => {
 
       {
         onError(x) {
-          reportedErrors.push(x);
+          reportedErrors.push(x.message);
         },
         onShellError(x) {
           reportedShellErrors.push(x);
@@ -224,7 +224,10 @@ describe('ReactDOMFizzServer', () => {
 
     expect(output.error).toBe(theError);
     expect(output.result).toBe('');
-    expect(reportedErrors).toEqual([theError]);
+    expect(reportedErrors).toEqual([
+      theError.message,
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(reportedShellErrors).toEqual([theError]);
   });
 
@@ -289,6 +292,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     let isCompleteCalls = 0;
+    const errors = [];
     const {writable, output, completed} = getTestWritable();
     const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -298,6 +302,9 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isCompleteCalls++;
         },
@@ -314,6 +321,9 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
@@ -322,6 +332,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to complete by abort when the fallback is also suspended', async () => {
     let isCompleteCalls = 0;
+    const errors = [];
     const {writable, output, completed} = getTestWritable();
     const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -333,6 +344,9 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isCompleteCalls++;
         },
@@ -349,6 +363,11 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      // There are two boundaries that abort
+      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
@@ -552,6 +571,7 @@ describe('ReactDOMFizzServer', () => {
       rendered = true;
       return 'Done';
     }
+    const errors = [];
     const {writable, completed} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -560,6 +580,9 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>
       </div>,
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isComplete = true;
         },
@@ -579,6 +602,9 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
   });
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4743ddb9909d1..fb7d4e66e91f3 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -729,10 +729,29 @@ export function isSuspenseInstancePending(instance: SuspenseInstance) {
 export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
   return instance.data === SUSPENSE_FALLBACK_START_DATA;
 }
-export function getSuspenseInstanceFallbackError(
+export function getSuspenseInstanceFallbackErrorDetails(
   instance: SuspenseInstance,
-): string {
-  return (instance: any).data2;
+) {
+  const nextSibling = instance.nextSibling;
+  let errorMessage /*, errorComponentStack, errorHash*/;
+  if (
+    nextSibling &&
+    nextSibling.nodeType === ELEMENT_NODE &&
+    nextSibling.nodeName.toLowerCase() === 'template'
+  ) {
+    const msg = ((nextSibling: any): HTMLTemplateElement).dataset.msg;
+    if (msg !== null) errorMessage = msg;
+
+    // @TODO read and return hash and componentStack once we know how we are goign to
+    // expose this extra errorInfo to onRecoverableError
+
+    // const hash = ((nextSibling: any): HTMLTemplateElement).dataset.hash;
+    // if (hash !== null) errorHash = hash;
+
+    // const stack = ((nextSibling: any): HTMLTemplateElement).dataset.stack;
+    // if (stack !== null) errorComponentStack = stack;
+  }
+  return {errorMessage /*, errorComponentStack, errorHash*/};
 }
 
 export function registerSuspenseInstanceRetry(
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index cb4afd5b5845e..c5318c2024aa2 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -43,7 +43,7 @@ type Options = {|
   onShellReady?: () => void,
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
-  onError?: (error: mixed) => string,
+  onError?: (error: mixed) => ?string,
 |};
 
 type PipeableStream = {|
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 6ce346669dba2..7e489d3e12492 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1503,6 +1503,19 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
 );
 const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
+const clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk(
+  '<template data-hash="',
+);
+const clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(
+  '" data-msg="',
+);
+const clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(
+  '" data-stack="',
+);
+const clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk(
+  '"></template>',
+);
+
 export function pushStartCompletedSuspenseBoundary(
   target: Array<Chunk | PrecomputedChunk>,
 ) {
@@ -1540,8 +1553,43 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  errorHash: ?string,
+  errorMesssage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
-  return writeChunkAndReturn(destination, startClientRenderedSuspenseBoundary);
+  let result;
+  result = writeChunkAndReturn(
+    destination,
+    startClientRenderedSuspenseBoundary,
+  );
+  if (errorHash) {
+    writeChunk(destination, clientRenderedSuspenseBoundaryError1);
+    writeChunk(destination, stringToChunk(escapeTextForBrowser(errorHash)));
+    // In prod errorMessage will usually be nullish but there is one case where
+    // it is used (currently when the server aborts the task) so we leave it ungated.
+    if (errorMesssage) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMesssage)),
+      );
+    }
+    if (__DEV__) {
+      // Component stacks are currently only captured in dev
+      if (errorComponentStack) {
+        writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
+        writeChunk(
+          destination,
+          stringToChunk(escapeTextForBrowser(errorComponentStack)),
+        );
+      }
+    }
+    result = writeChunkAndReturn(
+      destination,
+      clientRenderedSuspenseBoundaryError2,
+    );
+  }
+  return result;
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
@@ -1701,7 +1749,7 @@ export function writeEndSegment(
 // const SUSPENSE_PENDING_START_DATA = '$?';
 // const SUSPENSE_FALLBACK_START_DATA = '$!';
 //
-// function clientRenderBoundary(suspenseBoundaryID, errorMsg) {
+// function clientRenderBoundary(suspenseBoundaryID, errorHash, errorMsg, errorComponentStack) {
 //   // Find the fallback's first element.
 //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   if (!suspenseIdNode) {
@@ -1713,7 +1761,11 @@ export function writeEndSegment(
 //   const suspenseNode = suspenseIdNode.previousSibling;
 //   // Tag it to be client rendered.
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
-//   suspenseNode.data2 = errorMsg;
+//   // assign error metadata to first sibling
+//   let dataset = suspenseIdNode.dataset;
+//   if (errorHash) dataset.hash = errorHash;
+//   if (errorMsg) dataset.msg = errorMsg;
+//   if (errorComponentStack) dataset.stack = errorComponentStack;
 //   // Tell React to retry it if the parent already hydrated.
 //   if (suspenseNode._reactRetry) {
 //     suspenseNode._reactRetry();
@@ -1801,7 +1853,7 @@ const completeSegmentFunction =
 const completeBoundaryFunction =
   'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
 const clientRenderFunction =
-  'function $RX(a,b){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a.data2=b,a._reactRetry&&a._reactRetry()}';
+  'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.hash=c),d&&(a.msg=d),e&&(a.stack=e),b._reactRetry&&b._reactRetry())}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
   completeSegmentFunction + ';$RS("',
@@ -1871,17 +1923,20 @@ export function writeCompletedBoundaryInstruction(
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
-  clientRenderFunction + ";$RX('",
+  clientRenderFunction + ';$RX("',
 );
-const clientRenderScript1Partial = stringToPrecomputedChunk("$RX('");
-const clientRenderScript2 = stringToPrecomputedChunk("')</script>");
-const clientRenderErrorScript1 = stringToPrecomputedChunk("','");
+const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+const clientRenderScript1A = stringToPrecomputedChunk('"');
+const clientRenderScript2 = stringToPrecomputedChunk(')</script>');
+const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
-  error: ?string,
+  errorHash: ?string,
+  errorMessage?: string,
+  errorComponentStack?: string,
 ): boolean {
   writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentClientRenderFunction) {
@@ -1900,9 +1955,49 @@ export function writeClientRenderBoundaryInstruction(
   }
 
   writeChunk(destination, boundaryID);
-  if (error) {
-    writeChunk(destination, clientRenderErrorScript1);
-    writeChunk(destination, stringToChunk(error));
+  writeChunk(destination, clientRenderScript1A);
+  if (errorHash || errorMessage || errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorHash || '')),
+    );
+  }
+  if (errorMessage || errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
+    );
+  }
+  if (errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
+    );
   }
   return writeChunkAndReturn(destination, clientRenderScript2);
 }
+
+const regexForJSStringsInScripts = /[<\u2028\u2029]/g;
+function escapeJSStringsForInstructionScripts(input: string): string {
+  const escaped = JSON.stringify(input);
+  return escaped.replace(regexForJSStringsInScripts, match => {
+    switch (match) {
+      // santizing breaking out of strings and script tags
+      case '<':
+        return '\\u003c';
+      case '\u2028':
+        return '\\u2028';
+      case '\u2029':
+        return '\\u2029';
+      default: {
+        // eslint-disable-next-line react-internal/prod-error-codes
+        throw new Error(
+          'escapeJSStringsForInstructionScripts encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React',
+        );
+      }
+    }
+  });
+}
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index c3d09f481fb62..3878f2acc10cc 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -127,6 +127,10 @@ export function writeStartCompletedSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  // flushing these error arguments are not currently supported in this legacy streaming format.
+  errorHash: ?string,
+  errorMessage?: string,
+  errorComponentStack?: string,
 ): boolean {
   if (responseState.generateStaticMarkup) {
     // A client rendered boundary is done and doesn't need a representation in the HTML
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 2e681922ee8d5..0fcf492e8ae97 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -214,6 +214,10 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  // TODO: encode error for native
+  errorHash: ?string,
+  errorMessage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   return writeChunkAndReturn(destination, SUSPENSE_CLIENT_RENDER);
 }
@@ -285,7 +289,9 @@ export function writeClientRenderBoundaryInstruction(
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
   // TODO: encode error for native
-  error: ?string,
+  errorHash: ?string,
+  errorMessage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
   return writeChunkAndReturn(destination, formatID(boundaryID));
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 14486f94fac11..b755be2cf50ad 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -157,7 +157,7 @@ import {
   shouldSetTextContent,
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
-  getSuspenseInstanceFallbackError,
+  getSuspenseInstanceFallbackErrorDetails,
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
@@ -2662,22 +2662,22 @@ function updateDehydratedSuspenseComponent(
     // This boundary is in a permanent fallback state. In this case, we'll never
     // get an update and we'll never be able to hydrate the final content. Let's just try the
     // client side render instead.
-    const errorMsg = getSuspenseInstanceFallbackError(suspenseInstance);
+    const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
+      suspenseInstance,
+    );
+    const error = errorMessage
+      ? // eslint-disable-next-line react-internal/prod-error-codes
+        new Error(errorMessage)
+      : new Error(
+          'The server could not finish this Suspense boundary, likely ' +
+            'due to an error during server rendering. Switched to ' +
+            'client rendering.',
+        );
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
       renderLanes,
-      // TODO: The server should serialize the error message so we can log it
-      // here on the client. Or, in production, a hash/id that corresponds to
-      // the error.
-      errorMsg
-        ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(errorMsg)
-        : new Error(
-            'The server could not finish this Suspense boundary, likely ' +
-              'due to an error during server rendering. Switched to ' +
-              'client rendering.',
-          ),
+      error,
     );
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 66acdea682020..2c2777df30380 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -157,7 +157,7 @@ import {
   shouldSetTextContent,
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
-  getSuspenseInstanceFallbackError,
+  getSuspenseInstanceFallbackErrorDetails,
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
@@ -2662,22 +2662,22 @@ function updateDehydratedSuspenseComponent(
     // This boundary is in a permanent fallback state. In this case, we'll never
     // get an update and we'll never be able to hydrate the final content. Let's just try the
     // client side render instead.
-    const errorMsg = getSuspenseInstanceFallbackError(suspenseInstance);
+    const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
+      suspenseInstance,
+    );
+    const error = errorMessage
+      ? // eslint-disable-next-line react-internal/prod-error-codes
+        new Error(errorMessage)
+      : new Error(
+          'The server could not finish this Suspense boundary, likely ' +
+            'due to an error during server rendering. Switched to ' +
+            'client rendering.',
+        );
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
       renderLanes,
-      // TODO: The server should serialize the error message so we can log it
-      // here on the client. Or, in production, a hash/id that corresponds to
-      // the error.
-      errorMsg
-        ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(errorMsg)
-        : new Error(
-            'The server could not finish this Suspense boundary, likely ' +
-              'due to an error during server rendering. Switched to ' +
-              'client rendering.',
-          ),
+      error,
     );
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index fcbb582546f9d..f61c0eb7789e7 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -26,7 +26,7 @@ export const canHydrateTextInstance = shim;
 export const canHydrateSuspenseInstance = shim;
 export const isSuspenseInstancePending = shim;
 export const isSuspenseInstanceFallback = shim;
-export const getSuspenseInstanceFallbackError = shim;
+export const getSuspenseInstanceFallbackErrorDetails = shim;
 export const registerSuspenseInstanceRetry = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 11d8c7fa6f685..8ef999f432fb1 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -136,8 +136,8 @@ export const isSuspenseInstancePending =
   $$$hostConfig.isSuspenseInstancePending;
 export const isSuspenseInstanceFallback =
   $$$hostConfig.isSuspenseInstanceFallback;
-export const getSuspenseInstanceFallbackError =
-  $$$hostConfig.getSuspenseInstanceFallbackError;
+export const getSuspenseInstanceFallbackErrorDetails =
+  $$$hostConfig.getSuspenseInstanceFallbackErrorDetails;
 export const registerSuspenseInstanceRetry =
   $$$hostConfig.registerSuspenseInstanceRetry;
 export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 7444ae6f90934..1550ca0d3cfa7 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -171,6 +171,7 @@ describe('ReactDOMServerFB', () => {
   });
 
   it('should be able to complete by aborting even if the promise never resolves', () => {
+    const errors = [];
     const stream = ReactDOMServer.renderToStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
@@ -179,7 +180,7 @@ describe('ReactDOMServerFB', () => {
       </div>,
       {
         onError(x) {
-          console.error(x);
+          errors.push(x.message);
         },
       },
     );
@@ -191,5 +192,9 @@ describe('ReactDOMServerFB', () => {
 
     const remaining = readResult(stream);
     expect(remaining).toEqual('');
+
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
   });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 07e693bc5d510..53519ec897353 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -130,8 +130,9 @@ type LegacyContext = {
 type SuspenseBoundary = {
   id: SuspenseBoundaryID,
   rootSegmentID: number,
-  error: ?string, // the error string if it errors
-  errorComponentStack?: string, // the component stack for the error in DEV
+  errorHash: ?string, // the error hash if it errors
+  errorMessage?: string, // the error string if it errors
+  errorComponentStack?: string, // the error component stack if it errors
   forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
   pendingTasks: number, // when it reaches zero we can show this boundary's content
@@ -310,7 +311,7 @@ function createSuspenseBoundary(
     completedSegments: [],
     byteSize: 0,
     fallbackAbortableTasks,
-    error: null,
+    errorHash: null,
   };
 }
 
@@ -416,19 +417,44 @@ function popComponentStackInDEV(task: Task): void {
   }
 }
 
+// stash the component stack of an unwinding error until it is processed
+let lastBoundaryErrorComponentStackDev: ?string = null;
+
+function captureBoundaryErrorDetailsDev(
+  boundary: SuspenseBoundary,
+  error: mixed,
+) {
+  if (__DEV__) {
+    let errorMessage;
+    if (typeof error === 'string') {
+      errorMessage = error;
+    } else if (error && typeof error.message === 'string') {
+      errorMessage = error.message;
+    } else {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      errorMessage = String(error);
+    }
+
+    const errorComponentStack =
+      lastBoundaryErrorComponentStackDev || getCurrentStackInDEV();
+    lastBoundaryErrorComponentStackDev = null;
+
+    boundary.errorMessage = errorMessage;
+    boundary.errorComponentStack = errorComponentStack;
+  }
+}
+
 function logRecoverableError(request: Request, error: any): ?string {
   // If this callback errors, we intentionally let that error bubble up to become a fatal error
   // so that someone fixes the error reporting instead of hiding it.
-  const onError = request.onError;
-  let errorMsg = onError(error);
-  if (__DEV__) {
-    const msg = error && error.message ? error.message : error;
-    errorMsg = JSON.stringify({
-      error: msg,
-      componentStack: getCurrentStackInDEV(),
-    });
+  const errorHash = request.onError(error);
+  if (errorHash != null && typeof errorHash !== 'string') {
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      `onError returned something with a type other than "string". onError should return a string and may return null or undefined but must not return anything else. It received something of type "${typeof errorHash}" instead`,
+    );
   }
-  return errorMsg;
+  return errorHash;
 }
 
 function fatalError(request: Request, error: mixed): void {
@@ -512,7 +538,10 @@ function renderSuspenseBoundary(
   } catch (error) {
     contentRootSegment.status = ERRORED;
     newBoundary.forceClientRender = true;
-    newBoundary.error = logRecoverableError(request, error);
+    newBoundary.errorHash = logRecoverableError(request, error);
+    if (__DEV__) {
+      captureBoundaryErrorDetailsDev(newBoundary, error);
+    }
 
     // We don't need to decrement any task numbers because we didn't spawn any new task.
     // We don't need to schedule any task because we know the parent has written yet.
@@ -1147,9 +1176,37 @@ function validateIterable(iterable, iteratorFn: Function): void {
   }
 }
 
+let renderNodeDestructive = renderNodeDestructiveImpl;
+if (__DEV__) {
+  // In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
+  // a component stack at the right place in the tree. We don't do this in renderNode
+  // becuase it is not called at every layer of the tree and we may lose frames
+  renderNodeDestructive = (
+    request: Request,
+    task: Task,
+    node: ReactNodeList,
+  ): void => {
+    try {
+      return renderNodeDestructiveImpl(request, task, node);
+    } catch (x) {
+      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+        // This is a Wakable, noop
+      } else {
+        // This is an error, stash the component stack if it is null.
+        lastBoundaryErrorComponentStackDev =
+          lastBoundaryErrorComponentStackDev !== null
+            ? lastBoundaryErrorComponentStackDev
+            : getCurrentStackInDEV();
+      }
+      // rethrow so normal suspense logic can handle thrown value accordingly
+      throw x;
+    }
+  };
+}
+
 // This function by it self renders a node and consumes the task by mutating it
 // to update the current execution state.
-function renderNodeDestructive(
+function renderNodeDestructiveImpl(
   request: Request,
   task: Task,
   node: ReactNodeList,
@@ -1179,7 +1236,21 @@ function renderNodeDestructive(
         const lazyNode: LazyComponentType<any, any> = (node: any);
         const payload = lazyNode._payload;
         const init = lazyNode._init;
-        const resolvedNode = init(payload);
+        let resolvedNode;
+        if (__DEV__) {
+          // If a lazy element throws a componentStack frame will be popped but since
+          // it is an element and not a component it never added a frame. We
+          // add a fake frame here in case we throw and then remove it if we didn't
+          // @TODO decide if this frame showing up in dev component stacks is good
+          // Currently if a lazy element rejects the component stack will include this
+          // special frame. My current intuition is this is good and will aid in identifying
+          // where errors are happening.
+          pushBuiltInComponentStackInDEV(task, '~lazy-element~');
+          resolvedNode = init(payload);
+          popComponentStackInDEV(task);
+        } else {
+          resolvedNode = init(payload);
+        }
         renderNodeDestructive(request, task, resolvedNode);
         return;
       }
@@ -1363,14 +1434,17 @@ function erroredTask(
   error: mixed,
 ) {
   // Report the error to a global handler.
-  const errorMsg = logRecoverableError(request, error);
+  const errorHash = logRecoverableError(request, error);
   if (boundary === null) {
     fatalError(request, error);
   } else {
     boundary.pendingTasks--;
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
-      boundary.error = errorMsg;
+      boundary.errorHash = errorHash;
+      if (__DEV__) {
+        captureBoundaryErrorDetailsDev(boundary, error);
+      }
 
       // Regardless of what happens next, this boundary won't be displayed,
       // so we can flush it, if the parent already flushed.
@@ -1425,7 +1499,13 @@ function abortTask(task: Task): void {
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
-      boundary.error = 'This Suspense boundary was aborted by the server';
+      const error = new Error(
+        'This Suspense boundary was aborted by the server',
+      );
+      boundary.errorHash = request.onError(error);
+      if (__DEV__) {
+        captureBoundaryErrorDetailsDev(boundary, error);
+      }
       if (boundary.parentFlushed) {
         request.clientRenderedBoundaries.push(boundary);
       }
@@ -1695,8 +1775,10 @@ function flushSegment(
     writeStartClientRenderedSuspenseBoundary(
       destination,
       request.responseState,
+      boundary.errorHash,
+      boundary.errorMessage,
+      boundary.errorComponentStack,
     );
-
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
@@ -1776,7 +1858,9 @@ function flushClientRenderedBoundary(
     destination,
     request.responseState,
     boundary.id,
-    boundary.error,
+    boundary.errorHash,
+    boundary.errorMessage,
+    boundary.errorComponentStack,
   );
 }