Inspector fails to display objects that use getters

[sansumbrella]

The property inspector breaks when looking at an object that uses getters to access properties set on this in its constructor.

I would expect the inspector to either ignore getter-based properties of objects or to display them properly. Instead, attempting to expand an object with getters in the inspector throws TypeError: Cannot read property '0' of undefined, displaying none of the object's other properties.

If I remove the get keyword from the function definition, the inspector works as expected. However, that changes how the underlying program works, which is obviously undesirable.

To reproduce, run create-react-app and then paste the following into App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Breaker {
  constructor() {
    // Define a property in the constructor.
    this.property = ['The devtools will break when twirling down the "breaker" property in the state inspector.'];
  }

  get value() {
    // Use an attribute of that property in a getter.
    return this.property[0];
  }
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      breaker: new Breaker()
    };
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p>
          Accessing the getter works just fine inside the application (as well it should).
        </p>
        <p>
          { this.state.breaker.value }
        </p>
      </div>
    );
  }
}

export default App;

[mnpenner]

This might explain why I can't expand any properties. I'm not seeing any errors, but I can't expand any props or toggle any state.

[klode]

related to #775 and #569 ?

[flyon]

same here. an error is thrown because the evaluation of the getter method does not seem to use the actual instance but something with dehydrate & the types prototype? Eiter way, the instance is missing some properties that are used to eval the 'get' method thus causing an error. At least catching the error so that the other values can still be shown would be helpful, I currently can't debug any property on these objects.

[zinoviev]

PR is here for a long time, still waiting for review

[MichaelJLiu]

The problem is here:

react-devtools/agent/Bridge.js

Line 451 in 547916f

newProto[name] = dehydrate(val.__proto__[name], protoclean, [name]);

The call to val.__proto__[name] fails to pass val as this to the property getter.

Perhaps the code should be changed to check whether Object.getOwnPropertyDescriptor(val.__proto__, name) is defined, and if so, invoke descriptor.get.call(val).

[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