I'm looking for a methodical approach to track down which component is causing the "Uncaught Invariant Violation" errors in an unfamiliar codebase. Specifically when running a karma test suite that does not output stack-traces. The most luck I had was adding <code>console.log(JSON.stringify(element))</code>to the <code>render</code> functions e.g. <code>ReactShallowRenderer.prototype.render</code>, which works okay. Is there a better way to do this?

I used Exception breakpoints on chrome, turn on the checkmark. Then use the CallStack to trace back the component throwing the error. https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#exceptions

How to methodically debug "Uncaught Invariant Violation" errors in react

Tags:

reactjs

I'm looking for a methodical approach to track down which component is causing the "Uncaught Invariant Violation" errors in an unfamiliar codebase. Specifically when running a karma test suite that does not output stack-traces.

The most luck I had was adding console.log(JSON.stringify(element))to the render functions e.g. ReactShallowRenderer.prototype.render, which works okay. Is there a better way to do this?