Read constructor name more carefully (#29954)

## Summary Sometimes `constructor` happens to be the name of an unrelated property, or we may be dealing with a `Proxy` that intercepts every read. Verify the constructor is a function before using its name, and reset the name anyway if it turns out not to be serializable. Fixes some cases of the devtools crashing and becoming inoperable upon attempting to inspect components whose props are Hookstate `State`s. ## How did you test this change? Installed a patched version of the extension and confirmed that it solves the problem. --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>
facebook · Jun 25, 2024 · 133ada7 · 133ada7
1 parent 708d8f8
commit 133ada7
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
@@ -84,7 +84,9 @@ function createDehydrated(
     preview_long: formatDataForPreview(data, true),
     preview_short: formatDataForPreview(data, false),
     name:
-      !data.constructor || data.constructor.name === 'Object'
+      typeof data.constructor !== 'function' ||
+      typeof data.constructor.name !== 'string' ||
+      data.constructor.name === 'Object'
         ? ''
         : data.constructor.name,
   };
@@ -240,7 +242,9 @@ export function dehydrate(
           preview_short: formatDataForPreview(data, false),
           preview_long: formatDataForPreview(data, true),
           name:
-            !data.constructor || data.constructor.name === 'Object'
+            typeof data.constructor !== 'function' ||
+            typeof data.constructor.name !== 'string' ||
+            data.constructor.name === 'Object'
               ? ''
               : data.constructor.name,
         };
@@ -332,7 +336,11 @@ export function dehydrate(
         readonly: true,
         preview_short: formatDataForPreview(data, false),
         preview_long: formatDataForPreview(data, true),
-        name: data.constructor.name,
+        name:
+          typeof data.constructor !== 'function' ||
+          typeof data.constructor.name !== 'string'
+            ? ''
+            : data.constructor.name,
       };
 
       getAllEnumerableKeys(data).forEach(key => {