From 40b522c498a138d3ee5e7729e8e9f330feef88aa Mon Sep 17 00:00:00 2001
From: Yuval Dekel <thedekel@fb.com>
Date: Wed, 2 Jul 2014 12:45:49 -0700
Subject: [PATCH] Give context for owners of compenent instantiations with
 propType errors

See modification to the test-file: Basically we add a small hint at the end
of the error warning for propType errors to help identify which instantiation
of the component at hand is faulty.
---
 src/core/ReactCompositeComponent.js           | 15 ++++++++++-
 .../__tests__/ReactCompositeComponent-test.js | 25 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js
index 26c31d060b..d9693ee2bd 100644
--- a/src/core/ReactCompositeComponent.js
+++ b/src/core/ReactCompositeComponent.js
@@ -385,6 +385,15 @@ var RESERVED_SPEC_KEYS = {
   }
 };
 
+function getDeclarationErrorAddendum(component) {
+  var owner = component._owner || null;
+  if (owner && owner.constructor && owner.constructor.displayName) {
+    return ' Check the render method of `' + owner.constructor.displayName +
+      '`.';
+  }
+  return '';
+}
+
 function validateTypeDef(Constructor, typeDef, location) {
   for (var propName in typeDef) {
     if (typeDef.hasOwnProperty(propName)) {
@@ -967,7 +976,11 @@ var ReactCompositeComponentMixin = {
         var error =
           propTypes[propName](props, propName, componentName, location);
         if (error instanceof Error) {
-          warning(false, error.message);
+          // We may want to extend this logic for similar errors in
+          // renderComponent calls, so I'm abstracting it away into
+          // a function to minimize refactoring in the future
+          var addendum = getDeclarationErrorAddendum(this);
+          warning(false, error.message + addendum);
         }
       }
     }
diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js
index 4fe1053799..c0738e6ef3 100644
--- a/src/core/__tests__/ReactCompositeComponent-test.js
+++ b/src/core/__tests__/ReactCompositeComponent-test.js
@@ -110,6 +110,31 @@ describe('ReactCompositeComponent', function() {
     console.warn = warn;
   });
 
+  it('should give context for PropType errors in nested components.', () => {
+    // In this test, we're making sure that if a proptype error is found in a
+    // component, we give a smal hint as to which parent instantiated that
+    // component as per warnings about key-usage in ReactDescriptorValidator.
+    spyOn(console, 'warn');
+    var MyComp = React.createClass({
+      propTypes: {
+        color: ReactPropTypes.string
+      },
+      render: function() {
+        return <div>My color is {this.color}</div>;
+      }
+    });
+    var ParentComp = React.createClass({
+      render: function() {
+        return <MyComp color={123} />;
+      }
+    });
+    ReactTestUtils.renderIntoDocument(<ParentComp />);
+    expect(console.warn.calls[0].args[0]).toBe(
+      'Warning: Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`. Check the render method of `ParentComp`.'
+    );
+  });
+
   it('should support rendering to different child types over time', function() {
     var instance = <MorphingComponent />;
     instance = ReactTestUtils.renderIntoDocument(instance);