Add a wrapper error around recovered concurrent errors

facebook · Apr 3, 2024 · be80438 · be80438
1 parent dc9bd13
commit be80438
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3297,7 +3297,8 @@ describe('ReactDOMFizzServer', () => {
       'B',
 
       // Log the error
-      'onRecoverableError: Oops!',
+      'onRecoverableError: There was an error during concurrent rendering but React was able to recover by instead synchronously rendering the entire root.',
+      'Cause: Oops!',
     ]);
 
     // UI looks normal

diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js
@@ -600,8 +600,12 @@ function throwException(
     // Otherwise, fall through to the error path.
   }
 
-  const errorInfo = createCapturedValueAtFiber(value, sourceFiber);
-  queueConcurrentError(errorInfo);
+  const wrapperError = new Error(
+    'There was an error during concurrent rendering but React was able to recover by ' +
+      'instead synchronously rendering the entire root.',
+    {cause: value},
+  );
+  queueConcurrentError(createCapturedValueAtFiber(wrapperError, sourceFiber));
   renderDidError();
 
   // We didn't find a boundary that could handle this type of exception. Start
@@ -614,6 +618,7 @@ function throwException(
     return true;
   }
 
+  const errorInfo = createCapturedValueAtFiber(value, sourceFiber);
   let workInProgress: Fiber = returnFiber;
   do {
     switch (workInProgress.tag) {