Add property key names + type of value to fragment warning
This provides useful context in the logs to help us filter out things like {__html:...}.
Sebastian Markbage committed
Aug 7, 2015 at 20:00 UTC
754ee176d09b55aec66faee82e557e0863f41c43
2 files changed
+17
-5
src/addons/ReactFragment.js
+11
-5
@@ -83,13 +83,17 @@ if (__DEV__) {
83
84
var issuedWarnings = {};
85
86
- var didWarnForFragment = function(fragment) {
87
- // We use the keys and the type of the value as a heuristic to dedupe the
88
- // warning to avoid spamming too much.
86
+ var getFragmentKeyString = function(fragment) {
87
var fragmentCacheKey = '';
88
for (var key in fragment) {
89
fragmentCacheKey += key + ':' + (typeof fragment[key]) + ',';
90
}
91
+ return fragmentCacheKey;
92
+ };
93
+
94
+ var didWarnForFragment = function(fragmentCacheKey) {
95
+ // We use the keys and the type of the value as a heuristic to dedupe the
96
+ // warning to avoid spamming too much.
97
var alreadyWarnedOnce = !!issuedWarnings[fragmentCacheKey];
98
issuedWarnings[fragmentCacheKey] = true;
99
return alreadyWarnedOnce;
@@ -143,11 +147,13 @@ var ReactFragment = {
147
if (__DEV__) {
148
if (canWarnForReactFragment) {
149
if (!fragment[fragmentKey]) {
150
+ var fragmentKeys = getFragmentKeyString(fragment);
151
warning(
147
- didWarnForFragment(fragment),
152
+ didWarnForFragment(fragmentKeys),
153
'Any use of a keyed object should be wrapped in ' +
154
'React.addons.createFragment(object) before being passed as a ' +
150
- 'child.'
155
+ 'child. {%s}',
156
+ fragmentKeys
157
);
158
return fragment;
159
}
src/addons/__tests__/ReactFragment-test.js
+6
@@ -32,6 +32,9 @@ describe('ReactFragment', function() {
32
expect(console.error.calls[0].args[0]).toContain(
33
'Any use of a keyed object'
34
);
35
+ expect(console.error.calls[0].args[0]).toContain(
36
+ '{x:object,y:object,}'
37
+ );
38
// Only warn once for the same set of children
39
var sameChildren = {
40
x: <span />,
@@ -56,6 +59,9 @@ describe('ReactFragment', function() {
59
expect(console.error.calls[0].args[0]).toContain(
60
'Any use of a keyed object'
61
);
62
+ expect(console.error.calls[0].args[0]).toContain(
63
+ '{x:object,y:object,z:object,}'
64
+ );
65
});
66
67
it('should warn if a plain object even if it is in an owner', function() {