fix(kit): inspect error with top-level Proxy value (#701)

FoundTheWOUT · alexzhang1030 · web-flow · commit 4539ee9c67ba · 2024-11-27T11:56:12.000+08:00
Co-authored-by: Alex &lt;alexzhang1030@foxmail.com&gt;
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -279,4 +279,13 @@ async function submitDrafting() {
     --at-apply: 'text-#aaa';
   }
 }
+
+// native error
+:deep(.native.Error-state-type) {
+  --at-apply: 'text-red-500';
+  &::before {
+    content: 'Error:';
+    margin-right: 4px;
+  }
+}
 </style>
diff --git a/packages/devtools-kit/src/core/component/state/process.ts b/packages/devtools-kit/src/core/component/state/process.ts
@@ -139,8 +139,8 @@ function processSetupState(instance: VueAppInstance) {
       const value = returnError(() => toRaw(instance.setupState[key])) as unknown as {
         render: Function
         __asyncLoader: Function
-
       }
+      const accessError = value instanceof Error
 
       const rawData = raw[key] as {
         effect: {
@@ -151,13 +151,14 @@ function processSetupState(instance: VueAppInstance) {
 
       let result: Partial<InspectorState>
 
-      let isOtherType = typeof value === 'function'
+      let isOtherType = accessError
+        || typeof value === 'function'
         || (ensurePropertyExists(value, 'render') && typeof value.render === 'function') // Components
         || (ensurePropertyExists(value, '__asyncLoader') && typeof value.__asyncLoader === 'function') // Components
         || (typeof value === 'object' && value && ('setup' in value || 'props' in value)) // Components
         || /^v[A-Z]/.test(key) // Directives
 
-      if (rawData) {
+      if (rawData && !accessError) {
         const info = getSetupStateType(rawData)
 
         const { stateType, stateTypeName } = getStateTypeAndName(info)
diff --git a/packages/devtools-kit/src/core/component/state/util.ts b/packages/devtools-kit/src/core/component/state/util.ts
@@ -72,11 +72,21 @@ export function sanitize(data: unknown) {
 }
 
 export function getSetupStateType(raw) {
-  return {
-    ref: isRef(raw),
-    computed: isComputed(raw),
-    reactive: isReactive(raw),
-    readonly: isReadOnly(raw),
+  try {
+    return {
+      ref: isRef(raw),
+      computed: isComputed(raw),
+      reactive: isReactive(raw),
+      readonly: isReadOnly(raw),
+    }
+  }
+  catch {
+    return {
+      ref: false,
+      computed: false,
+      reactive: false,
+      readonly: false,
+    }
   }
 }
 
diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
@@ -22,6 +22,15 @@ function trigger() {
 }
 
 const toRefObj = toRefs(obj)
+const topLevelProxy = new Proxy({
+  foo() {
+    return 'foo'
+  },
+}, {
+  get(target, key) {
+    return target[key]()
+  },
+})
 </script>
 
 <template>

Original file line number	Diff line number	Diff line change
`@@ -279,4 +279,13 @@ async function submitDrafting() {`
`279`	`279`	`--at-apply: 'text-#aaa';`
`280`	`280`	`}`
`281`	`281`	`}`
	`282`	`+`
	`283`	`+// native error`
	`284`	`+:deep(.native.Error-state-type) {`
	`285`	`+ --at-apply: 'text-red-500';`
	`286`	`+ &::before {`
	`287`	`+ content: 'Error:';`
	`288`	`+ margin-right: 4px;`
	`289`	`+ }`
	`290`	`+}`
`282`	`291`	`</style>`