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

Question

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?

Answer 1

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