fix: improve error handling in evalCode and enhance error display in UI

Author: kuizuo

packages/deob/src/index.ts

@@ -67,7 +67,7 @@ export function evalCode(code: string) {
   }
   catch (error) {
     logger(`eval code:\n${code}`)
-    throw new Error('evalCode 无法运行, 请在控制台中查看错误信息')
+    throw new Error(`evalCode 无法运行, 请在控制台中查看错误信息: ${(error as any).message}`)
   }
 }
 
@@ -90,10 +90,8 @@ export class Deob {
       this.ast = parser.parse(rawCode, { sourceType: 'unambiguous', allowReturnOutsideFunction: true })
     }
     catch (error) {
-      console.error('代码初始化解析有误!')
-
       handleError(error, rawCode)
-      throw new Error(`代码初始化解析有误! ${error}`)
+      throw error
     }
   }
 
@@ -284,6 +282,5 @@ function getMangleMatcher(options: Options): ((id: string) => boolean) | undefin
 
       }
     }
-    default:
   }
 }

website/components/DeObfuscatorOutput.vue

@@ -15,7 +15,7 @@ const editorOptions = computed<monaco.editor.IStandaloneEditorConstructionOption
   readOnly: true,
   fontSize: 13,
   tabSize: 2,
-  wordWrap: editorWordWrap.value ? ('on' as const) : ('off' as const),
+  wordWrap: editorWordWrap.value ? 'on' : 'off',
   stickyScroll: {
     enabled: editorStickyScroll.value,
   },
@@ -126,9 +126,17 @@ function openOptions() {
       </div>
       <div
         v-else-if="error"
-        class="w-full overflow-auto p-3 text-sm text-red-600 dark:text-red-400"
+        class="w-full overflow-auto p-4 text-sm"
       >
-        <pre class="whitespace-pre-wrap" v-text="String(error)" />
+        <div class="flex items-start gap-2 rounded-lg border border-red-200 bg-red-50/90 p-3 text-red-800 shadow-sm dark:(border-red-900/60 bg-red-900/30 text-red-100)">
+          <div class="i-ri:error-warning-line mt-0.5 text-lg" />
+          <div class="space-y-2">
+            <div class="text-xs uppercase tracking-wide text-red-500 dark:text-red-200">
+              解析失败
+            </div>
+            <pre class="max-h-60 whitespace-pre-wrap break-all font-mono text-xs leading-5" v-text="String(error)" />
+          </div>
+        </div>
       </div>
       <div
         v-else-if="!output"

website/components/SourceCodeEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type * as monaco from 'monaco-editor'
-
 import { codePrettier, parser } from 'deob'
 
 // eslint-disable-next-line ts/consistent-type-imports
@@ -13,7 +12,6 @@ interface Example {
 }
 
 const files = import.meta.glob('../../example/**/input.js', { as: 'raw' })
-
 const examples: Example[] = Object.entries(files).map(([key, value]) => ({
   name: key.replace('../../example/', ''),
   value,
@@ -26,7 +24,7 @@ const editorOptions = computed<monaco.editor.IStandaloneEditorConstructionOption
   theme: editorTheme.value,
   fontSize: 13,
   tabSize: 2,
-  wordWrap: editorWordWrap.value ? ('on' as const) : ('off' as const),
+  wordWrap: editorWordWrap.value ? 'on' : 'off',
   stickyScroll: {
     enabled: editorStickyScroll.value,
   },
@@ -106,7 +104,7 @@ async function beautify() {
         <span class="text-[11px] text-zinc-500 dark:text-zinc-400">粘贴混淆代码，或直接加载示例/上传文件。</span>
       </div>
       <div class="flex flex-wrap items-center gap-2">
-        <label class="flex items-center gap-2 rounded-md border border-zinc-200/80 bg-white/90 px-3 py-1 text-[11px] font-medium shadow-sm transition hover:border-amber-300 dark:(border-zinc-700 bg-zinc-900/80)">
+        <label class="flex items-center gap-2 rounded-md border border-zinc-200/80 bg-white/90 px-3 py-1 text-10px] font-medium shadow-sm transition hover:border-amber-300 dark:(border-zinc-700 bg-zinc-900/80)">
           <span>示例</span>
           <select
             name="example-select"