Improve warnings.

facebook · Oct 14, 2015 · 999b70a · 999b70a
1 parent 8502374
commit 999b70a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -164,8 +164,9 @@ describe('ReactDOMComponent', function() {
  ReactDOM.render(<One inline={false} />, div);
  expect(console.error.calls.length).toBe(1);
  expect(console.error.argsForCall[0][0]).toBe(
- 'Warning: `One` passed a numeric string value for CSS property `fontSize` ' +
- 'which will be treated as a unitless number.'
+ 'Warning: a `div` tag (owner: `One`) was passed a numeric string value ' +
+ 'for CSS property `fontSize` (value: `1`) which will be treated ' +
+ 'as a unitless number in a future version of React.'
  );
 
  // Don't warn again for the same component
@@ -176,8 +177,9 @@ describe('ReactDOMComponent', function() {
  ReactDOM.render(<Two />, div);
  expect(console.error.calls.length).toBe(2);
  expect(console.error.argsForCall[1][0]).toBe(
- 'Warning: `Two` passed a numeric string value for CSS property `fontSize` ' +
- 'which will be treated as a unitless number.'
+ 'Warning: a `div` tag (owner: `Two`) was passed a numeric string value ' +
+ 'for CSS property `fontSize` (value: `1`) which will be treated ' +
+ 'as a unitless number in a future version of React.'
  );
 
  // Really don't warn again for the same component

diff --git a/src/renderers/dom/shared/dangerousStyleValue.js b/src/renderers/dom/shared/dangerousStyleValue.js
@@ -54,19 +54,28 @@ function dangerousStyleValue(name, value, component) {
  if (__DEV__) {
  if (component) {
  var owner = component._currentElement._owner;
- var componentName = owner ? owner.getName() : component._currentElement.type;
- if (!styleWarnings[componentName]) {
- styleWarnings[componentName] = {};
+ var ownerName = owner ? owner.getName() : null;
+ if (ownerName && !styleWarnings[ownerName]) {
+ styleWarnings[ownerName] = {};
  }
- var warnings = styleWarnings[componentName];
- if (!warnings[name]) {
- warnings[name] = true;
+ var warned = false;
+ if (ownerName) {
+ var warnings = styleWarnings[ownerName];
+ warned = warnings[name]
+ if (!warned) {
+ warnings[name] = true;
+ }
+ }
+ if (!warned) {
  warning(
  false,
- '`%s` passed a numeric string value for CSS property `%s` ' +
- 'which will be treated as a unitless number.',
- componentName,
- name
+ 'a `%s` tag (owner: `%s`) was passed a numeric string value ' +
+ 'for CSS property `%s` (value: `%s`) which will be treated ' +
+ 'as a unitless number in a future version of React.',
+ component._currentElement.type,
+ ownerName || 'unknown',
+ name,
+ value
  );
  }
  }