React-devtools: Display "..." on getters to defer their evaluation

[ddsol]

In Bridge.js there's an access to val.__proto__[name], which seems like it should be okay. However, it is possible to define a getter that expects a complete instance, rather than a empty prototype.

For instance:

var proto = {
  get upperName() { return this.name.toUpperCase()}
};

var instance = Object.create(proto);
instance.name = 'Foo';
console.log(instance.upperName); //=> FOO

console.log(instance.__proto__.upperName); //Throws: Cannot read property 'toUpperCase' of undefined

Bridge.js could

• Fetch the property get result from the original instance and put the value on the result upon an exception.
• defineProperty any getters on the __proto__ so they continue to refer to the same instance. Any readout could then throw (i.e. result.__proto__.upperName still throws), but referring tto result[name] would not throw.
• Fetch the property get result from the original instance and put the value on the __proto__ instead upon an exception.
• Just show an error as the property value.

It seems to me the value should show somewhere, rather than an error displayed. In any case, as it stands now, it breaks the extension. The error can only be found in the console.

Also, property getters could throw for reasons other than an instance/proto issue. It's probably a good idea to catch errors thrown and display the error in the UI, rather than aborting the code flow of the extension. It could be as simple as storing the error as a string on the property or just calling dehydrate(err) on the caught error.

[orangy]

I'm having the same issue with kotlin.js. List defines size property with custom getter. It expects full instance, not just prototype. Now it crashes when trying to inspect it when part of the props.

Crashes on this line:
newProto[name] = dehydrate(val.__proto__[name], protoclean, [name]);

[jaredly]

We could probably use getOwnPropertyDescriptor to detect things that have getters & dehydrate them specially (chrome devtools does this, rendering the value as ... until you click it & force evaluation)

[ddsol]

Eval on request is technically superior since getters can have side effects.

[ianstormtaylor]

Running into this in slate as well with getters defined.

[gaperton]

PR #469 fixes this issue as well.

[gaearon]

Happy to accept a standalone fix for this!

[gaearon]

We could probably use getOwnPropertyDescriptor to detect things that have getters & dehydrate them specially (chrome devtools does this, rendering the value as ... until you click it & force evaluation)

This is what we should do.

It would also allow us to unrevert https://github.com/facebook/react-devtools/pull/517 again, and thus fix https://github.com/facebook/react-devtools/issues/288.

[zinoviev]

Thinking about work on this. Want to clarify how it should be done:

• In dehydrate check if object member is property with getOwnPropertyDescriptor
• Introduce new meta type like 'property'
• Render UI '...' for these objects
• Eval value in response for user action

Not sure how implement last point, so tips will be useful.

[gaearon]

Not sure how implement last point, so tips will be useful.

I'm not sure either—I think you should give it a try and see what works 😛 You'll want to have access to the getter and the target object so that you can call the getter when necessary. What you described sounds reasonable to me.

[gaearon]

@zinoviev Just to be clear, are you still planning to implement this?

[zinoviev]

@gaearon Yep, already started

[gaearon]

Awesome, thanks!

[zinoviev]

Take a look at PR plz https://github.com/facebook/react-devtools/pull/569

[gaearon]

Niiiiice. I will next week! If I don’t please ping me again.

[RuBAN-GT]

Good day everyone! Did you fix this problem? When I try to call object with getters I can't get their values and get errors for them if they are calling other getters ;(

[zinoviev]

@RuBAN-GT Yep, still waiting for merge

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools