Why are react-dom error messages so cryptic?

[binarykitchen]

When react-dom v15.5.4 throws an error during jest tests using test-utils, error messages can be so cryptic. Makes it harder for us developers to understand the problem. For example this one:

    TypeError: Cannot read property '__reactInternalInstance$snz0ajvq2ztcsor' of undefined

      at getClosestInstanceFromNode (node_modules/react-dom/lib/ReactDOMComponentTree.js:113:11)
      at Object.getInstanceFromNode (node_modules/react-dom/lib/ReactDOMComponentTree.js:147:14)
      at Object.change (node_modules/react-dom/lib/ReactTestUtils.js:336:74)
      at Object.<anonymous> (src/modules/views/form/__jest__/CancelSubmitButtons.es:34:34)
      at process._tickCallback (node.js:369:9)

Can't you put something more "readable" in __reactInternalInstance$snz0ajvq2ztcsor instead? Like what it's parent node is, what its tag name is etc. Would be extremely useful.

Using this test code btw:

  it('onCancel is fired', (done) => {
    const component = TestUtils.renderIntoDocument(
      <CancelSubmitButton
        disableCancel={false}
        onCancel={e => {
          expect(e.target.innerHTML).toEqual('Cancel')
          done()
        }}
      />
    )

    TestUtils.Simulate.click(component.refs.cancel, {target: {innerHTML: 'Cancel'}})
  })

[gaearon]

When you see a message like this it usually means there was an earlier error message that your code swallowed in a try / catch so it never gets surfaced. At this point React is in a corrupted state, and error messages become cryptic. We are fixing this in React 16, where errors just unmount the tree instead of keeping it around in a broken state.

It is hard to say more without a complete reproducing example. It could be a bug in React, but the last ~15 times this was reported, it turned out to be that the app code was swallowing the real exception. So I’d be happy to look into it but only if you can extract the code that I can run and reproduce this.

[gaearon]

I’m closing because there was no more information provided. If you check "Pause on Caught Exceptions" in Chrome debugger you will likely find the original error causing this.

[binarykitchen]

@gaearon it is happening during console-based unit tests. cannot apply that browser option "pause on caught exceptions" here.

[gaearon]

You can try using the Node inspect functionality so that it attaches to Chrome DevTools.

[binarykitchen]

hmmm, that's new to me @gaearon ... is there an example/article how to do that best?

[gaearon]

What test runner are you using? There's this: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27. It won't work with Jest though I think because of a Node bug.

[binarykitchen]

yeah, using jest here. what's the node bug so that i can follow it.

[gaearon]

nodejs/node#7593

But if you reliably have this issue I would expect you to be able to reproduce by rendering the same component in the browser.

[gaearon]

You can also write a standalone Node script that does the same thing your test does, and then debug that.