Add an infinite loop guard around sync work loop

We already have an infinite loop guard that detects unguarded updates,
like if you repeatedly call `setState` in an effect — the nth+1 update
will trigger an error. However, a limitation is that it depends on the
error causing the component to be unmounted. This is usually the case
but there are ways to break this expectation with undefined behavior,
like if you call `setState` during the render phase on an different
component (which is a bad pattern that is always accompanied by a
warning). Aside from product bugs, if there were a bug in React, it
might also cause something like this. Whether the bug happens because
of app code or internal React code, we should do our best to avoid
infinite loops because they are so hard to debug; even if it's a fatal
bug and the UI can't recover, we at least need to free up the main
thread so that it's more likely for the error to be reported.

So this adds a second infinite loop guard around the synchronous
work loop. This won't cover all possible loops, such as ones triggered
during a concurrent render, but it should cover the most egregious ones.

Author: acdlite

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

@@ -1638,8 +1638,9 @@ describe('ReactUpdates', () => {
     const root = ReactDOMClient.createRoot(container);
 
     expect(() => {
-      // TODO: Add more specific error message once this is fixed
-      expect(() => ReactDOM.flushSync(() => root.render(<App />))).toThrow();
+      expect(() => ReactDOM.flushSync(() => root.render(<App />))).toThrow(
+        'Maximum update depth exceeded',
+      );
     }).toErrorDev(
       'Warning: Cannot update a component (`App`) while rendering a different component (`Child`)',
     );

packages/react-reconciler/src/ReactFiberRootScheduler.js

@@ -168,10 +168,39 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy: boolean) {
 
   // There may or may not be synchronous work scheduled. Let's check.
   let didPerformSomeWork;
+  let nestedUpdatePasses = 0;
   let errors: Array<mixed> | null = null;
   isFlushingWork = true;
   do {
     didPerformSomeWork = false;
+
+    // This outer loop re-runs if performing sync work on a root spawns
+    // additional sync work. If it happens too many times, it's very likely
+    // caused by some sort of infinite update loop. We already have a loop guard
+    // in place that will trigger an error on the n+1th update, but it's
+    // possible for that error to get swallowed if the setState is called from
+    // an unexpected place, like during the render phase. So as an added
+    // precaution, we also use a guard here.
+    //
+    // This limit is slightly larger than the one that throws inside setState,
+    // because that one is preferable because it includes a componens stack.
+    if (++nestedUpdatePasses > 60) {
+      // This is a fatal error, so we'll unschedule all the roots.
+      firstScheduledRoot = lastScheduledRoot = null;
+      const infiniteUpdateError = 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 (errors === null) {
+        errors = [infiniteUpdateError];
+      } else {
+        errors.push(infiniteUpdateError);
+      }
+      break;
+    }
+
     let root = firstScheduledRoot;
     while (root !== null) {
       if (onlyLegacy && root.tag !== LegacyRoot) {

scripts/jest/matchers/toWarnDev.js

@@ -69,12 +69,16 @@ const createMatcherFor = (consoleMethod, matcherName) =>
         (message.includes('\n    in ') || message.includes('\n    at '));
 
       const consoleSpy = (format, ...args) => {
-        // Ignore uncaught errors reported by jsdom
-        // and React addendums because they're too noisy.
         if (
-          !logAllErrors &&
-          consoleMethod === 'error' &&
-          shouldIgnoreConsoleError(format, args)
+          // Ignore uncaught errors reported by jsdom
+          // and React addendums because they're too noisy.
+          (!logAllErrors &&
+            consoleMethod === 'error' &&
+            shouldIgnoreConsoleError(format, args)) ||
+          // Ignore error objects passed to console.error, which we sometimes
+          // use as a fallback behavior, like when reportError
+          // isn't available.
+          typeof format !== 'string'
         ) {
           return;
         }