From 133ada72549b9aa01a0bc3df2b1c9bb341e861fd Mon Sep 17 00:00:00 2001 From: LoganDark Date: Tue, 25 Jun 2024 11:30:28 -0700 Subject: [PATCH] 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 --- packages/react-devtools-shared/src/hydration.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js index 6522076e7d..c5b78135e7 100644 --- 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 => {