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

@@ -72,10 +72,11 @@ function validateExplicitKey(element, parentType) {
   warning(
     false,
     'Each child in an array or iterator should have a unique "key" prop.' +
-    '%s%s%s',
+    '%s%s%s%s',
     addenda.parentOrOwner || '',
     addenda.childOwner || '',
-    addenda.url || ''
+    addenda.url || '',
+    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/isomorphic/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;
           }

src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+// NOTE: We're explicitly not using JSX here. This is intended to test
+// the current stack addendum without having source location added by babel.
+
+'use strict';
+
+var React;
+var ReactTestUtils;
+
+describe('ReactChildReconciler', function() {
+  function normalizeCodeLocInfo(str) {
+    return str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
+  beforeEach(function() {
+    jest.resetModuleRegistry();
+
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it('warns for duplicated keys', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render() {
+        return <div>{[<div key="1" />, <div key="1" />]}</div>;
+      },
+    });
+
+    ReactTestUtils.renderIntoDocument(<Component />);
+
+    expect(console.error.argsForCall.length).toBe(1);
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Child keys must be unique; when two children share a key, only the first child will be used.'
+    );
+  });
+
+  it('warns for duplicated keys with component stack info', function() {
+    spyOn(console, 'error');
+
+    var Component = React.createClass({
+      render: function() {
+        return <div>{[<div key="1" />, <div key="1" />]}</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: flattenChildren(...): ' +
+      'Encountered two children with the same key, `1`. ' +
+      'Child keys must be unique; when two children share a key, ' +
+      'only the first child will be used.\n' +
+      '    in div (at **)\n' +
+      '    in Component (at **)\n' +
+      '    in Parent (at **)\n' +
+      '    in GrandParent (at **)'
+    );
+  });
+});