Add console errors for potential nested infinite loop before throwing

Gather production data in a `enableInfiniteLoopDetection` experiment around existing potential infinite loops.

We disabled `enableInfiniteLoopDetection` with facebook#31088 as it was introducing new crashes that were hard to debug, especially with sibling prewarming.

One issue with the previous rollout is that we were introducing new crashes for components that may have settled after the 50 pass limit, but before a real crash or infinite loop. This happened more frequently after enabling sibling prewarming which in some cases increased render counts that may have already been close to the limit.

This change enables a console error where we used to throw (at 50 nested renders) while continuing to throw an error if that is hit 10 times (500 total nested renders being the new limit for throwing).

This is a temporary mechanism to allow us to collect more data about potential crashes in production, without introducing new crashes ourselves. The goal will be to design a smarter mechanism, maybe not counting prewarming passes for example, and/or adjusting the final limit to make it easier to enable this on existing apps.

Author: jackpope

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

@@ -1796,13 +1796,16 @@ describe('ReactUpdates', () => {
       return;
     }
     let setState;
-    function App() {
-      const [, _setState] = React.useState(0);
+    function App({eventuallySettle = false}) {
+      const [state, _setState] = React.useState(0);
       setState = _setState;
+      if (eventuallySettle) {
+        return state < 55 ? <Child /> : null;
+      }
       return <Child />;
     }
 
-    function Child(step) {
+    function Child() {
       // This will cause an infinite update loop, and a warning in dev.
       setState(n => n + 1);
       return null;
@@ -1819,6 +1822,18 @@ describe('ReactUpdates', () => {
         'To locate the bad setState() call inside `Child`, ' +
         'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
         '    in App (at **)',
+      'Potential infinite loop detected. This can happen when a component ' +
+        'repeatedly calls setState in render. React limits the number of nested ' +
+        'updates to prevent infinite loops.',
+    ]);
+
+    await act(() =>
+      ReactDOM.flushSync(() => root.render(<App eventuallySettle={true} />)),
+    );
+    assertConsoleErrorDev([
+      'Potential infinite loop detected. This can happen when a component ' +
+        'repeatedly calls setState in render. React limits the number of nested ' +
+        'updates to prevent infinite loops.',
     ]);
   });
 
@@ -1827,13 +1842,16 @@ describe('ReactUpdates', () => {
       return;
     }
     let setState;
-    function App() {
-      const [, _setState] = React.useState(0);
+    function App({eventuallySettle = false}) {
+      const [state, _setState] = React.useState(0);
       setState = _setState;
+      if (eventuallySettle) {
+        return state < 80 ? <Child /> : null;
+      }
       return <Child />;
     }
 
-    function Child(step) {
+    function Child() {
       // This will cause an infinite update loop, and a warning in dev.
       setState(n => n + 1);
       return null;
@@ -1853,6 +1871,18 @@ describe('ReactUpdates', () => {
         'To locate the bad setState() call inside `Child`, ' +
         'follow the stack trace as described in https://react.dev/link/setstate-in-render\n' +
         '    in App (at **)',
+      'Potential infinite loop detected. This can happen when a component ' +
+        'repeatedly calls setState in render. React limits the number of nested ' +
+        'updates to prevent infinite loops.',
+    ]);
+
+    await act(() => {
+      React.startTransition(() => root.render(<App eventuallySettle={true} />));
+    });
+    assertConsoleErrorDev([
+      'Potential infinite loop detected. This can happen when a component ' +
+        'repeatedly calls setState in render. React limits the number of nested ' +
+        'updates to prevent infinite loops.',
     ]);
   });
 

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -683,7 +683,9 @@ let pendingSuspendedCommitReason: SuspendedCommitReason = IMMEDIATE_COMMIT; // P
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
+const NESTED_UPDATE_LIMIT_MAX_HITS = 10;
 let nestedUpdateCount: number = 0;
+let nestedUpdateCountWarningThresholdHits: number = 0;
 let rootWithNestedUpdates: FiberRoot | null = null;
 let isFlushingPassiveEffects = false;
 let didScheduleUpdateDuringPassiveEffects = false;
@@ -4532,23 +4534,47 @@ export function throwIfInfiniteUpdateLoopDetected() {
 
     if (enableInfiniteRenderLoopDetection) {
       if (executionContext & RenderContext && workInProgressRoot !== null) {
-        // We're in the render phase. Disable the concurrent error recovery
-        // mechanism to ensure that the error we're about to throw gets handled.
-        // We need it to trigger the nearest error boundary so that the infinite
-        // update loop is broken.
-        workInProgressRoot.errorRecoveryDisabledLanes = mergeLanes(
-          workInProgressRoot.errorRecoveryDisabledLanes,
-          workInProgressRootRenderLanes,
-        );
+        // For the enableInfiniteRenderLoopDetection experiment, we use a console
+        // error to warn of potential infinite loops while allowing more passes
+        // in an attempt to let the rendering settle.
+        // If NESTED_UPDATE_LIMIT * NESTED_UPDATE_LIMIT_MAX_HITS is reached,
+        // we throw an error to break the infinite loop.
+        // We expect we can simplify this in the future to throw on one render limit.
+        nestedUpdateCountWarningThresholdHits++;
+        if (
+          nestedUpdateCountWarningThresholdHits >= NESTED_UPDATE_LIMIT_MAX_HITS
+        ) {
+          // We're in the render phase. Disable the concurrent error recovery
+          // mechanism to ensure that the error we're about to throw gets handled.
+          // We need it to trigger the nearest error boundary so that the infinite
+          // update loop is broken.
+          workInProgressRoot.errorRecoveryDisabledLanes = mergeLanes(
+            workInProgressRoot.errorRecoveryDisabledLanes,
+            workInProgressRootRenderLanes,
+          );
+        } else if (nestedUpdateCountWarningThresholdHits === 1) {
+          // This is the first time we hit the limit, so we log a warning.
+          console['error'](
+            'Potential infinite loop detected. This can happen when a component ' +
+              'repeatedly calls setState in render. React limits the number of nested ' +
+              'updates to prevent infinite loops.',
+          );
+        }
       }
     }
-
-    throw new Error(
-      'Maximum update depth exceeded. This can happen when a component ' +
-        'repeatedly calls setState inside componentWillUpdate or ' +
-        'componentDidUpdate. React limits the number of nested updates to ' +
-        'prevent infinite loops.',
-    );
+    if (
+      !enableInfiniteRenderLoopDetection ||
+      nestedUpdateCountWarningThresholdHits === 0 ||
+      nestedUpdateCountWarningThresholdHits >= NESTED_UPDATE_LIMIT_MAX_HITS
+    ) {
+      nestedUpdateCountWarningThresholdHits = 0;
+      throw new Error(
+        'Maximum update depth exceeded. This can happen when a component ' +
+          'repeatedly calls setState inside componentWillUpdate or ' +
+          'componentDidUpdate. React limits the number of nested updates to ' +
+          'prevent infinite loops.',
+      );
+    }
   }
 
   if (__DEV__) {