Add component stack to invalid-object-child error

https://twitter.com/EsaMatti/status/835952325525188608 (28 likes!)

Author: sophiebits

src/isomorphic/children/traverseAllChildren.js

@@ -12,13 +12,18 @@
 'use strict';
 
 var REACT_ELEMENT_TYPE = require('ReactElementSymbol');
-var ReactCurrentOwner = require('ReactCurrentOwner');
 
 var getIteratorFn = require('getIteratorFn');
 var invariant = require('fbjs/lib/invariant');
 var KeyEscapeUtils = require('KeyEscapeUtils');
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {
+    getCurrentStackAddendum,
+  } = require('ReactComponentTreeHook');
+}
+
 var SEPARATOR = '.';
 var SUBSEPARATOR = ':';
 
@@ -114,21 +119,12 @@ function traverseAllChildrenImpl(
       if (__DEV__) {
         // Warn about using Maps as children
         if (iteratorFn === children.entries) {
-          let mapsAsChildrenAddendum = '';
-          if (ReactCurrentOwner.current) {
-            var mapsAsChildrenOwnerName = ReactCurrentOwner.current.getName();
-            if (mapsAsChildrenOwnerName) {
-              mapsAsChildrenAddendum = '\n\nCheck the render method of `' +
-                mapsAsChildrenOwnerName +
-                '`.';
-            }
-          }
           warning(
             didWarnAboutMaps,
             'Using Maps as children is unsupported and will likely yield ' +
               'unexpected results. Convert it to a sequence/iterable of keyed ' +
               'ReactElements instead.%s',
-            mapsAsChildrenAddendum,
+            getCurrentStackAddendum(),
           );
           didWarnAboutMaps = true;
         }
@@ -151,13 +147,7 @@ function traverseAllChildrenImpl(
       var addendum = '';
       if (__DEV__) {
         addendum = ' If you meant to render a collection of children, use an array ' +
-          'instead.';
-        if (ReactCurrentOwner.current) {
-          var name = ReactCurrentOwner.current.getName();
-          if (name) {
-            addendum += '\n\nCheck the render method of `' + name + '`.';
-          }
-        }
+          'instead.' + getCurrentStackAddendum();
       }
       var childrenString = '' + children;
       invariant(

src/renderers/__tests__/ReactComponent-test.js

@@ -17,6 +17,10 @@ var ReactDOMFeatureFlags;
 var ReactTestUtils;
 
 describe('ReactComponent', () => {
+  function normalizeCodeLocInfo(str) {
+    return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
   beforeEach(() => {
     React = require('react');
     ReactDOM = require('react-dom');
@@ -389,10 +393,19 @@ describe('ReactComponent', () => {
     };
     var element = <div>{[children]}</div>;
     var container = document.createElement('div');
-    expect(() => ReactDOM.render(element, container)).toThrowError(
+    var ex;
+    try {
+      ReactDOM.render(element, container);
+    } catch (e) {
+      ex = e;
+    }
+    expect(ex).toBeDefined();
+    expect(normalizeCodeLocInfo(ex.message)).toBe(
       'Objects are not valid as a React child (found: object with keys ' +
-        '{x, y, z}). If you meant to render a collection of children, use an ' +
-        'array instead.',
+        '{x, y, z}). If you meant to render a collection of children, use ' +
+        'an array instead.' +
+        // Fiber gives a slightly better stack with the nearest host components
+        (ReactDOMFeatureFlags.useFiber ? '\n    in div (at **)' : ''),
     );
   });
 
@@ -408,10 +421,20 @@ describe('ReactComponent', () => {
       }
     }
     var container = document.createElement('div');
-    expect(() => ReactDOM.render(<Foo />, container)).toThrowError(
+    var ex;
+    try {
+      ReactDOM.render(<Foo />, container);
+    } catch (e) {
+      ex = e;
+    }
+    expect(ex).toBeDefined();
+    expect(normalizeCodeLocInfo(ex.message)).toBe(
       'Objects are not valid as a React child (found: object with keys ' +
-        '{a, b, c}). If you meant to render a collection of children, use an ' +
-        'array instead.\n\nCheck the render method of `Foo`.',
+        '{a, b, c}). If you meant to render a collection of children, use ' +
+        'an array instead.\n' +
+        // Fiber gives a slightly better stack with the nearest host components
+        (ReactDOMFeatureFlags.useFiber ? '    in div (at **)\n' : '') +
+        '    in Foo (at **)',
     );
   });
 });

src/renderers/__tests__/ReactMultiChild-test.js

@@ -274,10 +274,15 @@ describe('ReactMultiChild', () => {
     var container = document.createElement('div');
     ReactDOM.render(<Parent />, container);
     expectDev(console.error.calls.count()).toBe(1);
-    expectDev(console.error.calls.argsFor(0)[0]).toBe(
+    expectDev(
+      normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
+    ).toBe(
       'Warning: Using Maps as children is unsupported and will likely yield ' +
         'unexpected results. Convert it to a sequence/iterable of keyed ' +
-        'ReactElements instead.\n\nCheck the render method of `Parent`.',
+        'ReactElements instead.\n' +
+        // Fiber gives a slightly better stack with the nearest host components
+        (ReactDOMFeatureFlags.useFiber ? '    in div (at **)\n' : '') +
+        '    in Parent (at **)'
     );
   });
 

src/renderers/shared/fiber/ReactChildFiber.js

@@ -36,11 +36,9 @@ var emptyObject = require('fbjs/lib/emptyObject');
 var getIteratorFn = require('getIteratorFn');
 var invariant = require('fbjs/lib/invariant');
 var ReactFeatureFlags = require('ReactFeatureFlags');
-var {ReactCurrentOwner} = require('ReactGlobalSharedState');
 
 if (__DEV__) {
   var {getCurrentFiberStackAddendum} = require('ReactDebugCurrentFiber');
-  var getComponentName = require('getComponentName');
   var warning = require('fbjs/lib/warning');
   var didWarnAboutMaps = false;
 }
@@ -127,14 +125,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
     let addendum = '';
     if (__DEV__) {
       addendum = ' If you meant to render a collection of children, use an array ' +
-        'instead.';
-      const owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
-      if (owner && typeof owner.tag === 'number') {
-        const name = getComponentName((owner: any));
-        if (name) {
-          addendum += '\n\nCheck the render method of `' + name + '`.';
-        }
-      }
+        'instead.' + getCurrentFiberStackAddendum();
     }
     invariant(
       false,
@@ -813,22 +804,12 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
       if (typeof newChildrenIterable.entries === 'function') {
         const possibleMap = (newChildrenIterable: any);
         if (possibleMap.entries === iteratorFn) {
-          let mapsAsChildrenAddendum = '';
-          const owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
-          if (owner && typeof owner.tag === 'number') {
-            const mapsAsChildrenOwnerName = getComponentName((owner: any));
-            if (mapsAsChildrenOwnerName) {
-              mapsAsChildrenAddendum = '\n\nCheck the render method of `' +
-                mapsAsChildrenOwnerName +
-                '`.';
-            }
-          }
           warning(
             didWarnAboutMaps,
             'Using Maps as children is unsupported and will likely yield ' +
               'unexpected results. Convert it to a sequence/iterable of keyed ' +
               'ReactElements instead.%s',
-            mapsAsChildrenAddendum,
+            getCurrentFiberStackAddendum()
           );
           didWarnAboutMaps = true;
         }

src/renderers/shared/stack/reconciler/traverseStackChildren.js

@@ -12,13 +12,18 @@
 'use strict';
 
 var REACT_ELEMENT_TYPE = require('ReactElementSymbol');
-var {ReactCurrentOwner} = require('ReactGlobalSharedState');
 
 var getIteratorFn = require('getIteratorFn');
 var invariant = require('fbjs/lib/invariant');
 var KeyEscapeUtils = require('KeyEscapeUtils');
 var warning = require('fbjs/lib/warning');
 
+if (__DEV__) {
+  var {
+    getCurrentStackAddendum,
+  } = require('ReactGlobalSharedState').ReactComponentTreeHook;
+}
+
 var SEPARATOR = '.';
 var SUBSEPARATOR = ':';
 
@@ -114,21 +119,12 @@ function traverseStackChildrenImpl(
       if (__DEV__) {
         // Warn about using Maps as children
         if (iteratorFn === children.entries) {
-          let mapsAsChildrenAddendum = '';
-          if (ReactCurrentOwner.current) {
-            var mapsAsChildrenOwnerName = ReactCurrentOwner.current.getName();
-            if (mapsAsChildrenOwnerName) {
-              mapsAsChildrenAddendum = '\n\nCheck the render method of `' +
-                mapsAsChildrenOwnerName +
-                '`.';
-            }
-          }
           warning(
             didWarnAboutMaps,
             'Using Maps as children is unsupported and will likely yield ' +
               'unexpected results. Convert it to a sequence/iterable of keyed ' +
               'ReactElements instead.%s',
-            mapsAsChildrenAddendum,
+            getCurrentStackAddendum(),
           );
           didWarnAboutMaps = true;
         }
@@ -151,13 +147,7 @@ function traverseStackChildrenImpl(
       var addendum = '';
       if (__DEV__) {
         addendum = ' If you meant to render a collection of children, use an array ' +
-          'instead.';
-        if (ReactCurrentOwner.current) {
-          var name = ReactCurrentOwner.current.getName();
-          if (name) {
-            addendum += '\n\nCheck the render method of `' + name + '`.';
-          }
-        }
+          'instead.' + getCurrentStackAddendum();
       }
       var childrenString = '' + children;
       invariant(