Add component stack info to key validation warnings

src/addons/transitions/ReactTransitionChildMapping.js

@@ -25,6 +25,9 @@ var ReactTransitionChildMapping = {
     if (!children) {
       return children;
     }
+    // TODO: `flattenChildren` now takes an extra `selfDebugID` argument
+    // for looking up the component stack in dev build.
+    // Need to figure out a way to get the `_debugID` here.
     return flattenChildren(children);
   },
 

src/isomorphic/classic/element/ReactElementValidator.js

@@ -48,11 +48,25 @@ var ownerHasKeyUseWarning = {};
 
 var loggedTypeFailures = {};
 
+function getCurrentComponentErrorInfo(parentType) {
+  var info = getDeclarationErrorAddendum();
+
+  if (!info) {
+    var parentName = typeof parentType === 'string' ?
+      parentType : parentType.displayName || parentType.name;
+    if (parentName) {
+      info = ` Check the top-level render call using <${parentName}>.`;
+    }
+  }
+  return info;
+}
+
 /**
  * Warn if the element doesn't have an explicit key assigned to it.
  * This element is in an array. The array could grow and shrink or be
  * reordered. All children that haven't already been validated are required to
- * have a "key" property assigned to it.
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
  *
  * @internal
  * @param {ReactElement} element Element that requires a key.
@@ -64,67 +78,36 @@ function validateExplicitKey(element, parentType) {
   }
   element._store.validated = true;
 
-  var addenda = getAddendaForKeyUse('uniqueKey', element, parentType);
-  if (addenda === null) {
-    // we already showed the warning
-    return;
-  }
-  warning(
-    false,
-    'Each child in an array or iterator should have a unique "key" prop.' +
-    '%s%s%s',
-    addenda.parentOrOwner || '',
-    addenda.childOwner || '',
-    addenda.url || ''
+  var memoizer = ownerHasKeyUseWarning.uniqueKey || (
+    ownerHasKeyUseWarning.uniqueKey = {}
   );
-}
-
-/**
- * Shared warning and monitoring code for the key warnings.
- *
- * @internal
- * @param {string} messageType A key used for de-duping warnings.
- * @param {ReactElement} element Component that requires a key.
- * @param {*} parentType element's parent's type.
- * @returns {?object} A set of addenda to use in the warning message, or null
- * if the warning has already been shown before (and shouldn't be shown again).
- */
-function getAddendaForKeyUse(messageType, element, parentType) {
-  var addendum = getDeclarationErrorAddendum();
-  if (!addendum) {
-    var parentName = typeof parentType === 'string' ?
-      parentType : parentType.displayName || parentType.name;
-    if (parentName) {
-      addendum = ` Check the top-level render call using <${parentName}>.`;
-    }
-  }
 
-  var memoizer = ownerHasKeyUseWarning[messageType] || (
-    ownerHasKeyUseWarning[messageType] = {}
-  );
-  if (memoizer[addendum]) {
-    return null;
+  var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+  if (memoizer[currentComponentErrorInfo]) {
+    return;
   }
-  memoizer[addendum] = true;
-
-  var addenda = {
-    parentOrOwner: addendum,
-    url: ' See https://fb.me/react-warning-keys for more information.',
-    childOwner: null,
-  };
+  memoizer[currentComponentErrorInfo] = true;
 
   // Usually the current owner is the offender, but if it accepts children as a
   // property, it may be the creator of the child that's responsible for
   // assigning it a key.
+  var childOwner = '';
   if (element &&
       element._owner &&
       element._owner !== ReactCurrentOwner.current) {
     // Give the component that originally created this child.
-    addenda.childOwner =
+    childOwner =
       ` It was passed a child from ${element._owner.getName()}.`;
   }
 
-  return addenda;
+  warning(
+    false,
+    'Each child in an array or iterator should have a unique "key" prop.' +
+    '%s%s See https://fb.me/react-warning-keys for more information.%s',
+    currentComponentErrorInfo,
+    childOwner,
+    ReactComponentTreeDevtool.getCurrentStackAddendum(element)
+  );
 }
 
 /**

src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js

@@ -19,6 +19,10 @@ var ReactDOM;
 var ReactTestUtils;
 
 describe('ReactElementValidator', function() {
+  function normalizeCodeLocInfo(str) {
+    return str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
   var ComponentClass;
 
   beforeEach(function() {
@@ -95,9 +99,10 @@ describe('ReactElementValidator', function() {
     ReactTestUtils.renderIntoDocument(<Anonymous>{divs}</Anonymous>);
 
     expect(console.error.argsForCall.length).toBe(1);
-    expect(console.error.argsForCall[0][0]).toBe(
+    expect(normalizeCodeLocInfo(console.error.argsForCall[0][0])).toBe(
       'Warning: Each child in an array or iterator should have a unique ' +
-      '"key" prop. See https://fb.me/react-warning-keys for more information.'
+      '"key" prop. See https://fb.me/react-warning-keys for more information.\n' +
+      '    in div (at **)'
     );
   });
 
@@ -111,10 +116,46 @@ describe('ReactElementValidator', function() {
     ReactTestUtils.renderIntoDocument(<div>{divs}</div>);
 
     expect(console.error.argsForCall.length).toBe(1);
-    expect(console.error.argsForCall[0][0]).toBe(
+    expect(normalizeCodeLocInfo(console.error.argsForCall[0][0])).toBe(
       'Warning: Each child in an array or iterator should have a unique ' +
       '"key" prop. Check the top-level render call using <div>. See ' +
-      'https://fb.me/react-warning-keys for more information.'
+      'https://fb.me/react-warning-keys for more information.\n' +
+      '    in div (at **)'
+    );
+  });
+
+  it('warns for keys with component stack info', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render: function() {
+        return <div>{[<div />, <div />]}</div>;
+      },
+    });
+
+    var Parent = React.createClass({
+      render: function() {
+        return React.cloneElement(this.props.child);
+      },
+    });
+
+    var GrandParent = React.createClass({
+      render: function() {
+        return <Parent child={<Component />} />;
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(<GrandParent />);
+
+    expect(console.error.argsForCall.length).toBe(1);
+    expect(normalizeCodeLocInfo(console.error.argsForCall[0][0])).toBe(
+      'Warning: Each child in an array or iterator should have a unique ' +
+      '"key" prop. Check the render method of `Component`. See ' +
+      'https://fb.me/react-warning-keys for more information.\n' +
+      '    in div (at **)\n' +
+      '    in Component (at **)\n' +
+      '    in Parent (at **)\n' +
+      '    in GrandParent (at **)'
     );
   });
 

src/renderers/shared/devtools/ReactComponentTreeDevtool.js

@@ -48,6 +48,28 @@ function purgeDeep(id) {
   }
 }
 
+function describeComponentFrame(name, source, ownerName) {
+  return '\n    in ' + name + (
+    source ?
+      ' (at ' + source.fileName.replace(/^.*[\\\/]/, '') + ':' +
+      source.lineNumber + ')' :
+    ownerName ?
+      ' (created by ' + ownerName + ')' :
+      ''
+  );
+}
+
+function describeID(id) {
+  var name = ReactComponentTreeDevtool.getDisplayName(id);
+  var element = ReactComponentTreeDevtool.getElement(id);
+  var ownerID = ReactComponentTreeDevtool.getOwnerID(id);
+  var ownerName;
+  if (ownerID) {
+    ownerName = ReactComponentTreeDevtool.getDisplayName(ownerID);
+  }
+  return describeComponentFrame(name, element._source, ownerName);
+}
+
 var ReactComponentTreeDevtool = {
   onSetDisplayName(id, displayName) {
     updateTree(id, item => item.displayName = displayName);
@@ -154,28 +176,6 @@ var ReactComponentTreeDevtool = {
   },
 
   getCurrentStackAddendum(topElement) {
-    function describeComponentFrame(name, source, ownerName) {
-      return '\n    in ' + name + (
-        source ?
-          ' (at ' + source.fileName.replace(/^.*[\\\/]/, '') + ':' +
-          source.lineNumber + ')' :
-        ownerName ?
-          ' (created by ' + ownerName + ')' :
-          ''
-      );
-    }
-
-    function describeID(id) {
-      var name = ReactComponentTreeDevtool.getDisplayName(id);
-      var element = ReactComponentTreeDevtool.getElement(id);
-      var ownerID = ReactComponentTreeDevtool.getOwnerID(id);
-      var ownerName;
-      if (ownerID) {
-        ownerName = ReactComponentTreeDevtool.getDisplayName(ownerID);
-      }
-      return describeComponentFrame(name, element._source, ownerName);
-    }
-
     var info = '';
     if (topElement) {
       var type = topElement.type;
@@ -192,11 +192,17 @@ var ReactComponentTreeDevtool = {
 
     var currentOwner = ReactCurrentOwner.current;
     var id = currentOwner && currentOwner._debugID;
+
+    info += ReactComponentTreeDevtool.getStackAddendumByID(id);
+    return info;
+  },
+
+  getStackAddendumByID(id) {
+    var info = '';
     while (id) {
       info += describeID(id);
       id = ReactComponentTreeDevtool.getParentID(id);
     }
-
     return info;
   },
 

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

@@ -13,22 +13,24 @@
 
 var ReactReconciler = require('ReactReconciler');
 
+var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
 var instantiateReactComponent = require('instantiateReactComponent');
 var KeyEscapeUtils = require('KeyEscapeUtils');
 var shouldUpdateReactComponent = require('shouldUpdateReactComponent');
 var traverseAllChildren = require('traverseAllChildren');
 var warning = require('warning');
 
-function instantiateChild(childInstances, child, name) {
+function instantiateChild(childInstances, child, name, selfDebugID) {
   // We found a component instance.
   var keyUnique = (childInstances[name] === undefined);
   if (__DEV__) {
     warning(
       keyUnique,
       'flattenChildren(...): Encountered two children with the same key, ' +
       '`%s`. Child keys must be unique; when two children share a key, only ' +
-      'the first child will be used.',
-      KeyEscapeUtils.unescape(name)
+      'the first child will be used.%s',
+      KeyEscapeUtils.unescape(name),
+      ReactComponentTreeDevtool.getStackAddendumByID(selfDebugID)
     );
   }
   if (child != null && keyUnique) {
@@ -50,12 +52,31 @@ var ReactChildReconciler = {
    * @return {?object} A set of child instances.
    * @internal
    */
-  instantiateChildren: function(nestedChildNodes, transaction, context) {
+  instantiateChildren: function(
+    nestedChildNodes,
+    transaction,
+    context,
+    selfDebugID // __DEV__ only
+  ) {
     if (nestedChildNodes == null) {
       return null;
     }
     var childInstances = {};
-    traverseAllChildren(nestedChildNodes, instantiateChild, childInstances);
+
+    if (__DEV__) {
+      traverseAllChildren(
+        nestedChildNodes,
+        (childInsts, child, name) => instantiateChild(
+          childInsts,
+          child,
+          name,
+          selfDebugID
+        ),
+        childInstances
+      );
+    } else {
+      traverseAllChildren(nestedChildNodes, instantiateChild, childInstances);
+    }
     return childInstances;
   },
 

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

@@ -178,7 +178,7 @@ var ReactMultiChild = {
           try {
             ReactCurrentOwner.current = this._currentElement._owner;
             return ReactChildReconciler.instantiateChildren(
-              nestedChildren, transaction, context
+              nestedChildren, transaction, context, this._debugID
             );
           } finally {
             ReactCurrentOwner.current = null;
@@ -202,7 +202,7 @@ var ReactMultiChild = {
         if (this._currentElement) {
           try {
             ReactCurrentOwner.current = this._currentElement._owner;
-            nextChildren = flattenChildren(nextNestedChildrenElements);
+            nextChildren = flattenChildren(nextNestedChildrenElements, this._debugID);
           } finally {
             ReactCurrentOwner.current = null;
           }