fix(scan): fix promise/proxy handling and optimize object inspection

Author: pivanov

packages/scan/src/core/web/inspect-element/view-state.ts

@@ -12,6 +12,55 @@ const EXPANDED_PATHS = new Set<string>();
 const fadeOutTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
 const disabledButtons = new Set<HTMLButtonElement>();
 
+// Utility to check and unwrap proxies
+const isProxy = (obj: any) => Object.getPrototypeOf(obj)?.constructor?.name === 'Proxy';
+
+const unwrapProxy = (proxy: any) => {
+  try {
+    const descriptors = Object.getOwnPropertyDescriptors(proxy);
+    const unwrapped = Object.fromEntries(
+      Object.entries(descriptors).reduce<Array<[string, any]>>((acc, [key, descriptor]) => {
+        if (key !== 'Symbol(Symbol.iterator)') {
+          acc.push([key, descriptor.value]);
+        }
+        return acc;
+      }, []),
+    );
+
+    return unwrapped;
+  } catch (error) {
+    return proxy;
+  }
+};
+
+
+
+const getProxyValue = (proxy: any) => {
+  try {
+    if (!proxy || typeof proxy !== 'object') {
+      return proxy
+    };
+
+    // Handle URLSearchParams-like objects
+    if (proxy[Symbol.iterator]) {
+      try {
+        return Object.fromEntries(proxy);
+      } catch (err) {
+        // Silent fail
+      }
+    }
+
+    // Handle standard proxies
+    if (isProxy(proxy)) {
+      return unwrapProxy(proxy);
+    }
+
+    return proxy;
+  } catch (err) {
+    return proxy;
+  }
+};
+
 export const renderPropsAndState = (
   didRender: boolean,
   fiber: any,
@@ -59,14 +108,12 @@ export const renderPropsAndState = (
         canEdit
           ? `
         <button class="react-scan-replay-button" title="Replay component">
-         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgb(203, 182, 242)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan-eye"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="1"/><path d="M18.944 12.33a1 1 0 0 0 0-.66 7.5 7.5 0 0 0-13.888 0 1 1 0 0 0 0 .66 7.5 7.5 0 0 0 13.888 0"/></svg>
+          Replay
         </button>
       `
           : ''
       }
-      <button class="react-scan-close-button" title="Close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-      </button>
+      <button class="react-scan-close-button" title="Close">Close</button>
     </div>
   `;
   inspector.appendChild(header);
@@ -427,6 +474,7 @@ export const createPropertyElement = (
     if (isExpandable) {
       const isExpanded = EXPANDED_PATHS.has(currentPath);
 
+      // Check for circular references first
       if (typeof value === 'object' && value !== null) {
         let paths = objectPathMap.get(value);
         if (!paths) {
@@ -439,6 +487,28 @@ export const createPropertyElement = (
         paths.add(currentPath);
       }
 
+      const unwrapped = getProxyValue(value);
+      const isNonExpandable = (unwrapped === value &&
+        value &&
+        Object.getPrototypeOf(value)?.constructor?.name === 'Proxy') ||
+        value instanceof Promise;
+
+      // For non-expandable items, render like a simple property
+      if (isNonExpandable) {
+        const preview = document.createElement('div');
+        preview.className = 'react-scan-preview-line';
+        preview.dataset.key = key;
+        preview.dataset.section = section;
+        preview.innerHTML = `
+          <span style="width: 8px; display: inline-block"></span>
+          <span class="react-scan-key">${key}:&nbsp;</span>
+          <span class="${getValueClassName(value)}">${getValuePreview(value)}</span>
+        `;
+        container.appendChild(preview);
+        return container;
+      }
+
+      // Normal expandable logic for other objects
       container.classList.add('react-scan-expandable');
       if (isExpanded) {
         container.classList.add('react-scan-expanded');
@@ -519,77 +589,79 @@ export const createPropertyElement = (
         }
       }
 
-      arrow.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const isExpanding = !container.classList.contains(
-          'react-scan-expanded',
-        );
-
-        if (isExpanding) {
-          EXPANDED_PATHS.add(currentPath);
-          container.classList.add('react-scan-expanded');
-          content.classList.remove('react-scan-hidden');
-
-          if (!content.hasChildNodes()) {
-            if (Array.isArray(value)) {
-              const arrayContainer = document.createElement('div');
-              arrayContainer.className = 'react-scan-array-container';
-              value.forEach((item, index) => {
-                const el = createPropertyElement(
-                  componentName,
-                  didRender,
-                  propsContainer,
-                  fiber,
-                  index.toString(),
-                  item,
-                  section,
-                  level + 1,
-                  changedKeys,
-                  currentPath,
-                  new WeakMap(),
-                );
-                if (!el) {
-                  return;
-                }
-                arrayContainer.appendChild(el);
-              });
-              content.appendChild(arrayContainer);
-            } else {
-              Object.entries(value).forEach(([k, v]) => {
-                const el = createPropertyElement(
-                  componentName,
-                  didRender,
-                  propsContainer,
-                  fiber,
-                  k,
-                  v,
-                  section,
-                  level + 1,
-                  changedKeys,
-                  currentPath,
-                  new WeakMap(),
-                );
-                if (!el) {
-                  return;
-                }
-                content.appendChild(el);
-              });
+      if (!isNonExpandable) {
+        arrow.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const isExpanding = !container.classList.contains(
+            'react-scan-expanded',
+          );
+
+          if (isExpanding) {
+            EXPANDED_PATHS.add(currentPath);
+            container.classList.add('react-scan-expanded');
+            content.classList.remove('react-scan-hidden');
+
+            if (!content.hasChildNodes()) {
+              if (Array.isArray(value)) {
+                const arrayContainer = document.createElement('div');
+                arrayContainer.className = 'react-scan-array-container';
+                value.forEach((item, index) => {
+                  const el = createPropertyElement(
+                    componentName,
+                    didRender,
+                    propsContainer,
+                    fiber,
+                    index.toString(),
+                    item,
+                    section,
+                    level + 1,
+                    changedKeys,
+                    currentPath,
+                    new WeakMap(),
+                  );
+                  if (!el) {
+                    return;
+                  }
+                  arrayContainer.appendChild(el);
+                });
+                content.appendChild(arrayContainer);
+              } else {
+                Object.entries(value).forEach(([k, v]) => {
+                  const el = createPropertyElement(
+                    componentName,
+                    didRender,
+                    propsContainer,
+                    fiber,
+                    k,
+                    v,
+                    section,
+                    level + 1,
+                    changedKeys,
+                    currentPath,
+                    new WeakMap(),
+                  );
+                  if (!el) {
+                    return;
+                  }
+                  content.appendChild(el);
+                });
+              }
             }
+          } else {
+            EXPANDED_PATHS.delete(currentPath);
+            container.classList.remove('react-scan-expanded');
+            content.classList.add('react-scan-hidden');
           }
-        } else {
-          EXPANDED_PATHS.delete(currentPath);
-          container.classList.remove('react-scan-expanded');
-          content.classList.add('react-scan-hidden');
-        }
 
-        requestAnimationFrame(() => {
-          const inspector = propsContainer.firstElementChild as HTMLElement;
-          if (inspector) {
-            const contentHeight = inspector.getBoundingClientRect().height;
-            propsContainer.style.maxHeight = `${contentHeight}px`;
-          }
+          requestAnimationFrame(() => {
+            const inspector = propsContainer.firstElementChild as HTMLElement;
+            if (inspector) {
+              const contentHeight = inspector.getBoundingClientRect().height;
+              propsContainer.style.maxHeight = `${contentHeight}px`;
+            }
+          });
         });
-      });
+      }
     } else {
       const preview = document.createElement('div');
       preview.className = 'react-scan-preview-line';
@@ -737,14 +809,35 @@ export const getValuePreview = (value: any) => {
     case 'boolean':
       return value.toString();
     case 'object': {
-      if (value instanceof Promise) {
-        return 'Promise';
-      }
-      const keys = Object.keys(value);
-      if (keys.length <= 3) {
-        return `{${keys.join(', ')}}`;
+      try {
+        if (value === null) return 'null';
+        if (value === undefined) return 'undefined';
+
+        // Handle special built-in types first
+        if (value instanceof Promise) return '[Promise]';
+        if (value instanceof Set) return `Set(${value.size})`;
+        if (value instanceof Map) return `Map(${value.size})`;
+
+        // Try to unwrap proxy values
+        const proto = Object.getPrototypeOf(value);
+        if (proto?.constructor?.name === 'Proxy') {
+          const unwrapped = getProxyValue(value);
+          if (unwrapped !== value) {
+            const keys = Object.keys(unwrapped);
+            return `Proxy{${keys.join(', ')}}`;
+          }
+          return '[Next.js Params]';
+        }
+
+        // Handle regular objects
+        const keys = Object.keys(value);
+        if (keys.length <= 3) {
+          return `{${keys.join(', ')}}`;
+        }
+        return `{${keys.slice(0, 3).join(', ')}, ...}`;
+      } catch (error) {
+        return '{...}';
       }
-      return `{${keys.slice(0, 3).join(', ')}, ...}`;
     }
     default:
       return typeof value;