跟踪React.js中的错误原因

Question

I have an error coming up in React.js that only occurs under very specific circumstances.

When I create the error, an error prints to the JS console in Chrome, but it's not particularly semantic.

What are the best practices, tips, and tricks that you use for tracking down the offending line or function in a React.js context?

The value at line 61 doesn't seem to make a lot of sense due to the 10247 prefix – is this truly referring to line 61 or is this just junk due to a botched source map or something?

Unhandled rejection TypeError: Cannot set property 'value' of undefined
    at http://localhost:4000/js/analytics.js:10247:61
    at Array.forEach (native)
    at http://localhost:4000/js/analytics.js:10246:16
    at Array.forEach (native)
    at updatePoints (http://localhost:4000/js/analytics.js:10245:29)
    at module.exports.createClass.classData.componentWillReceiveProps (http://localhost:4000/js/analytics.js:10195:9)
    at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42736:14)
    at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
    at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
    at Object.89.ReactReconciler.receiveComponent (http://localhost:4000/js/vendor.js:50301:22)
    at Object.__REACT_INSPECTOR_RUNTIME__0_13_1.React.ReactReconciler.receiveComponent (<anonymous>:118:43)
    at 43.ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:4000/js/vendor.js:42865:23)
    at 43.ReactCompositeComponentMixin._performComponentUpdate (http://localhost:4000/js/vendor.js:42843:10)
    at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42759:12)
    at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
    at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)

Thanks in advance for your help!

Answer 1

Yupe, split your code into individual files and try using browserify (or webpack) with the debug flag set to true in order to map your big file with a sourcemap and ease the debugging in Chrome and friends.

Check my current stack here:

https://github.com/coma/domno?files=1

Answer 2

It turned out that it was an issue with Reconciliation in React.js.

React essentially uses heuristics to decide what to re-render on updates, and the react-chartjs library wasn't playing well with that.

More information can be found here: https://facebook.github.io/react/docs/reconciliation.html

The fix I used was essentially to clear the state data that is passed into chart and force an update, thus making React re-render the whole element:

this.state.countries = {
  labels: []
}

this.forceUpdate()