fix value formatting of proxies of class instances

[LoganDark]

For Hookstate Proxies of class instances, data.constructor.name returns Proxy({}), so use Object.getPrototypeOf(data).constructor.name instead, which works correctly from my testing.

Summary

React DevTools immediately bricks itself if you inspect any component that has a prop that is a Hookstate that wraps a class instance ... because these are proxies where data.constructor.name returns some un-cloneable object, but Object.getPrototypeOf(data) doesn't return Object (it returns the prototype of the class inside).

How did you test this change?

This part of the code has no associated tests at all.

Technically, packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js exists, but I tried yarn test and these tests aren't even executed anymore. I can't figure it out, so whatever.

If you run this code:

    class Class {}
    const instance = new Class();

    const instanceProxy = new Proxy(instance, {
      get(target, key, receiver) {
        if (key === 'constructor') {
          return { name: new Proxy({}, {}) };
        }

        return Reflect.get(target, key, receiver);
      },
    });

then instanceProxy.constructor.name returns some proxy that cannot be cloned, but Object.getPrototypeOf(instanceProxy).constructor.name returns the correct value.

This PR fixes the devtools to use Object.getPrototypeOf(instanceProxy).constructor.name.

I modified my local copy of devtools to use this method and it fixed the bricking that I experienced.

Related #29954

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2024 2:11am

[anandfresh]

LGTM

[hoxyq]

I would rather change it to something like this:

let resolvedConstructorName = data.constructor.name;
if (typeof resolvedConstructorName === 'string') {
  return resolvedConstructorName;
}

resolvedConstructorName =  Object.getPrototypeOf(data).constructor.name;
if (typeof resolvedConstructorName === 'string') {
  return resolvedConstructorName;
}

try {
  return truncateForDisplay(String(data));
} catch (error) {
  return 'unserializable';
}

What do you think?

[LoganDark]

I have a feeling that other stuff should be inside the try block as well, but otherwise, that looks good to me :) Do you have push access to my branch ("Allow edits by maintainers" is checked) or would you like me to commit this?

[hoxyq]

Could you please push it? You can also wrap everything in try block, yeah