invokeGuardedCallback should work when nested

Added a guard in the global error event listener to prevent nested
errors from being captured higher up the stack.

Also found a bug where the DEV version of invokeGuardedCallback would
infinite loop if there were nested invocations with the same name. Fixed
by appending the depth to the fake event name. (I'm actually not sure
why this is necessary.)

Author: acdlite

scripts/fiber/tests-passing.txt

@@ -1670,6 +1670,8 @@ src/renderers/shared/utils/__tests__/ReactErrorUtils-test.js
 * should call the callback with the provided context
 * should return a caught error
 * should return null if no error is thrown
+* can nest with same debug name
+* does not return nested errors
 * should use invokeGuardedCallbackProd in production
 
 src/renderers/shared/utils/__tests__/accumulateInto-test.js

src/renderers/shared/utils/ReactErrorUtils.js

@@ -97,10 +97,7 @@ if (__DEV__) {
       typeof document.createEvent === 'function') {
 
     const fakeNode = document.createElement('react');
-    let fakeEventError = null;
-    const onFakeEventError = function(event) {
-      fakeEventError = event.error;
-    };
+    let depth = 0;
 
     ReactErrorUtils.invokeGuardedCallback = function(
       name,
@@ -113,21 +110,29 @@ if (__DEV__) {
       e,
       f
     ) {
+      depth++;
+      const thisDepth = depth;
       const funcArgs = Array.prototype.slice.call(arguments, 3);
       const boundFunc = function() {
         func.apply(context, funcArgs);
       };
-      const evtType = 'react-' + (name ? name : 'invokeguardedcallback');
+      let fakeEventError = null;
+      const onFakeEventError = function(event) {
+        // Don't capture nested errors
+        if (depth === thisDepth) {
+          fakeEventError = event.error;
+        }
+      };
+      const evtType = `react-${name ? name : 'invokeguardedcallback'}-${depth}`;
       window.addEventListener('error', onFakeEventError);
       fakeNode.addEventListener(evtType, boundFunc, false);
       const evt = document.createEvent('Event');
       evt.initEvent(evtType, false, false);
       fakeNode.dispatchEvent(evt);
       fakeNode.removeEventListener(evtType, boundFunc, false);
       window.removeEventListener('error', onFakeEventError);
-      const returnVal = fakeEventError;
-      fakeEventError = null;
-      return returnVal;
+      depth--;
+      return fakeEventError;
     };
   }
 }

src/renderers/shared/utils/__tests__/ReactErrorUtils-test.js

@@ -89,6 +89,34 @@ describe('ReactErrorUtils', () => {
       expect(returnValue).toBe(null);
     });
 
+    it('can nest with same debug name', () => {
+      const err1 = new Error();
+      let err2;
+      const err3 = new Error();
+      const err4 = ReactErrorUtils.invokeGuardedCallback('foo', function() {
+        err2 = ReactErrorUtils.invokeGuardedCallback('foo', function() {
+          throw err1;
+        }, null);
+        throw err3;
+      }, null);
+
+      expect(err2).toBe(err1);
+      expect(err4).toBe(err3);
+    });
+
+    it('does not return nested errors', () => {
+      const err1 = new Error();
+      let err2;
+      const err3 = ReactErrorUtils.invokeGuardedCallback('foo', function() {
+        err2 = ReactErrorUtils.invokeGuardedCallback('foo', function() {
+          throw err1;
+        }, null);
+      }, null);
+
+      expect(err3).toBe(null); // Returns null because inner error was already captured
+      expect(err2).toBe(err1);
+    });
+
     it('should use invokeGuardedCallbackProd in production', () => {
       expect(ReactErrorUtils.invokeGuardedCallback).not.toEqual(
         ReactErrorUtils.invokeGuardedCallbackProd