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>
LoganDark committed
Jun 25, 2024 at 11:30 UTC
133ada72549b9aa01a0bc3df2b1c9bb341e861fd
1 file changed
+11
-3
packages/react-devtools-shared/src/hydration.js
+11
-3
@@ -84,7 +84,9 @@ function createDehydrated(
84
preview_long: formatDataForPreview(data, true),
85
preview_short: formatDataForPreview(data, false),
86
name:
87
- !data.constructor || data.constructor.name === 'Object'
87
+ typeof data.constructor !== 'function' ||
88
+ typeof data.constructor.name !== 'string' ||
89
+ data.constructor.name === 'Object'
90
? ''
91
: data.constructor.name,
92
};
@@ -240,7 +242,9 @@ export function dehydrate(
242
preview_short: formatDataForPreview(data, false),
243
preview_long: formatDataForPreview(data, true),
244
name:
243
- !data.constructor || data.constructor.name === 'Object'
245
+ typeof data.constructor !== 'function' ||
246
+ typeof data.constructor.name !== 'string' ||
247
+ data.constructor.name === 'Object'
248
? ''
249
: data.constructor.name,
250
};
@@ -332,7 +336,11 @@ export function dehydrate(
336
readonly: true,
337
preview_short: formatDataForPreview(data, false),
338
preview_long: formatDataForPreview(data, true),
335
- name: data.constructor.name,
339
+ name:
340
+ typeof data.constructor !== 'function' ||
341
+ typeof data.constructor.name !== 'string'
342
+ ? ''
343
+ : data.constructor.name,
344
};
345
346
getAllEnumerableKeys(data).forEach(key => {