Mobx: Compatibility with Chrome React Devtools

[mvestergaard]

I'm not sure whether this has been asked before, but there seems to be a compatibility conflict with the react devtools for chrome.
Whenever you try to expand the value of an observable in the dev tools, it throws this error:

In this case it pointed here:

function createArrayGetter(index) {
    return function () {
        var impl = this.$mobx;
        if (impl && index < impl.values.length) {
            impl.atom.reportObserved();
            return impl.values[index];
        }
        console.warn("[mobx.array] Attempt to read an array index (" + index + ") that is out of bounds (" + impl.values.length + "). Please check length first. Out of bound indices will not be tracked by MobX");
        return undefined;
    };
}

But i think it depends on what type of observable it is.
It seems it cannot find the this.$mobx property.

[andykog]

@mvestergaard, this is more like the function is being called with wrong context. Can you reproduce it in https://github.com/mobxjs/mobx-react-todomvc ? (if you click dependency tree and hover anything, DevTool will have hoverBoxes (array) in its state. If no, could you provide some way to reproduce it?

[mvestergaard]

Yep, it happens for that todo app too.

When you try to expand the todos property in the right column

[andykog]

This breaks react-devtool:

function F() { this.v = []; }

Object.defineProperty(F.prototype, "a", {
  get: function () { return this.v.length; }
});

ReactDOM.render(
  <div testProp={new F()} />,
  document.body
);

But this doesn't:

function F() { this.v = []; }

F.prototype = {}; // <- the fix

Object.defineProperty(F.prototype, "a", {
  get: function () { return this.v.length; }
});

ReactDOM.render(
  <div testProp={new F()} />,
  document.body
);

Veeeery strange…

[mvestergaard]

¯\_(ツ)_/¯

[mweststrate]

@andykog wow. But that at least sounds fixable. I think firefox btw handles this correctly.

[andykog]

Oh, something terrible is going here https://github.com/facebook/react-devtools/blob/2b72f2b53db28284e84fdfeff23610b7e11421a9/agent/Bridge.js#L376-L391
(val is ObservableArray)
I don't think, I'm able to fix this

[andykog]

We can add something like if (this.__proto__ === StubArray.prototype) { return undefined; } in item and length getters, but you won't see array items this way, so this makes no sence

[mweststrate]

K, sounds like we can close it for now :'( ?

[acronoah]

This is a big PITA with mobx and react's otherwise great devtools. I get strange performance degradation with Mobx and chrome dev tools (CPU shoots up to 400%, my guess is its mobx objects being traced by the debugger).

[andykog]

@acronoah, I don't think that's very common situation. Could you share your javascript cpu profile (the .cpuprofile file)? Are you using some kind of mobx devtools?