DevTools bug fix: Proxied methods should be safely dehydrated for display

Author: pfongkye

packages/react-devtools-extensions/src/backend.js

@@ -72,7 +72,7 @@ function setup(hook) {
   initBackend(hook, agent, window);
 
   // Let the frontend know that the backend has attached listeners and is ready for messages.
-  // This covers the case of of syncing saved values after reloading/navigating while DevTools remain open.
+  // This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
   bridge.send('extensionBackendInitialized');
 
   // Setup React Native style editor if a renderer like react-native-web has injected it.

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -541,6 +541,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
     "object_of_objects": {
       "inner": {}
     },
+    "proxy": {},
     "react_element": {},
     "regexp": {},
     "set": {

packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js

@@ -549,6 +549,14 @@ describe('InspectedElementContext', () => {
     }
     const instance = new Class();
 
+    const proxyInstance = new Proxy(() => {}, {
+      get: function(_, name) {
+        return function() {
+          return null;
+        };
+      },
+    });
+
     const container = document.createElement('div');
     await utils.actAsync(() =>
       ReactDOM.render(
@@ -567,6 +575,7 @@ describe('InspectedElementContext', () => {
           map={mapShallow}
           map_of_maps={mapOfMaps}
           object_of_objects={objectOfObjects}
+          proxy={proxyInstance}
           react_element={<span />}
           regexp={/abc/giu}
           set={setShallow}
@@ -619,6 +628,7 @@ describe('InspectedElementContext', () => {
       map,
       map_of_maps,
       object_of_objects,
+      proxy,
       react_element,
       regexp,
       set,
@@ -722,6 +732,12 @@ describe('InspectedElementContext', () => {
     );
     expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
 
+    expect(proxy[meta.inspectable]).toBe(false);
+    expect(proxy[meta.name]).toBe('function');
+    expect(proxy[meta.type]).toBe('function');
+    expect(proxy[meta.preview_long]).toBe('ƒ () {}');
+    expect(proxy[meta.preview_short]).toBe('ƒ () {}');
+
     expect(react_element[meta.inspectable]).toBe(false);
     expect(react_element[meta.name]).toBe('span');
     expect(react_element[meta.type]).toBe('react_element');

packages/react-devtools-shared/src/hydration.js

@@ -151,7 +151,10 @@ export function dehydrate(
         inspectable: false,
         preview_short: formatDataForPreview(data, false),
         preview_long: formatDataForPreview(data, true),
-        name: data.name || 'function',
+        name:
+          typeof data.name === 'function' || !data.name
+            ? 'function'
+            : data.name,
         type,
       };
 

packages/react-devtools-shared/src/utils.js

@@ -539,7 +539,9 @@ export function formatDataForPreview(
     case 'html_element':
       return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
     case 'function':
-      return truncateForDisplay(`ƒ ${data.name}() {}`);
+      return truncateForDisplay(
+        `ƒ ${typeof data.name === 'function' ? '' : data.name}() {}`,
+      );
     case 'string':
       return `"${data}"`;
     case 'bigint':