Improve `findComponentRoot` Error Message

Instead of simply logging the React ID of the `ancestorNode` when `findComponentRoot` fails, use a `try ... finally` to `console.error` the `ancestorNode`. This allows modern web inspectors to actually log a reference to the node (which may not have a React ID). This means when people run into the problem, they will not have to execute: require('ReactID').getNode(<copy+paste>); NOTE: Admittedly, this will not log anything in IE8. That's fine, since IE8 has shitty console logging anyway.

CommitSyncScript committed Jun 28, 2013 at 16:33 UTC 738de8cfa846936ae754ccfda607e4fb41c2170b

2 files changed +10 -8

src/core/ReactInstanceHandles.js

+7 -4

@@ -296,12 +296,15 @@ var ReactInstanceHandles = {

296 }

297 child = child.nextSibling;

298 }

299 + global.console && console.error && console.error(

300 + 'Error while invoking `findComponentRoot` with the following ' +

301 + 'ancestor node:',

302 + ancestorNode

303 + );

304 invariant(

305 false,

301 - 'findComponentRoot: Unable to find element by React ID, `%s`. This ' +

302 - 'indicates that someone (or the browser) has mutated the DOM tree in ' +

303 - 'an unexpected way. Try inspecting the child nodes of the element with ' +

304 - 'React ID, `%s`.',

306 + 'findComponentRoot(..., %s): Unable to find element. This probably ' +

307 + 'means the DOM was unexpectedly mutated (e.g. by the browser).',

308 id,

309 ReactID.getID(ancestorNode)

310 );

src/core/__tests__/ReactInstanceHandles-test.js

+3 -4

@@ -139,10 +139,9 @@ describe('ReactInstanceHandles', function() {

139 ReactID.getID(childNodeB)

140 );

141 }).toThrow(

142 - 'Invariant Violation: findComponentRoot: Unable to find element by ' +

143 - 'React ID, `.react[0].1:0`. This indicates that someone (or the ' +

144 - 'browser) has mutated the DOM tree in an unexpected way. Try ' +

145 - 'inspecting the child nodes of the element with React ID, `.react[0]`.'

142 + 'Invariant Violation: findComponentRoot(..., .react[0].1:0): Unable ' +

143 + 'to find element. This probably means the DOM was unexpectedly ' +

144 + 'mutated (e.g. by the browser).'

145 );

146 });

147 });