feat: enhance error display type

vuejs · Nov 26, 2024 · c0fcb52 · c0fcb52
1 parent 45cbb54
commit c0fcb52
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
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)