feat: improve error handling

components/ResearchFeedback.vue

@@ -54,6 +54,9 @@
       }
     } catch (e: any) {
       console.error('Error getting feedback:', e)
+      if (e.message.includes('Failed to fetch')) {
+        e.message += `\n${t('error.requestBlockedByCORS')}`
+      }
       error.value = t('modelFeedback.error', [e.message])
     } finally {
       isLoading.value = false
@@ -82,10 +85,13 @@
     </template>
 
     <div class="flex flex-col gap-2">
-      <p v-if="error" class="text-red-500">{{ error }}</p>
-      <div v-if="!feedback.length && !error">{{ $t('modelFeedback.waiting') }}</div>
+      <div v-if="!feedback.length && !error">
+        {{ $t('modelFeedback.waiting') }}
+      </div>
       <template v-else>
-        <div v-if="error" class="text-red-500">{{ error }}</div>
+        <div v-if="error" class="text-red-500 whitespace-pre-wrap">
+          {{ error }}
+        </div>
         <div
           v-for="(feedback, index) in feedback"
           class="flex flex-col gap-2"

components/Tree.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { ButtonProps } from '@nuxt/ui'
   import type { ResearchStep } from '~/lib/deep-research'
 
   export type TreeNodeStatus = Exclude<ResearchStep['type'], 'complete'>
@@ -24,13 +25,17 @@
     (e: 'select', value: TreeNode): void
   }>()
 
-  const icon = computed(() => {
-    const result = { name: '', pulse: false }
+  const theme = computed(() => {
+    const result = {
+      icon: '',
+      pulse: false,
+      color: 'info' as ButtonProps['color'],
+    }
     if (!props.node.status) return result
 
     switch (props.node.status) {
       case 'generating_query':
-        result.name = 'i-lucide-clipboard-list'
+        result.icon = 'i-lucide-clipboard-list'
         result.pulse = true
         break
       case 'generated_query':
@@ -41,21 +46,22 @@
       // result.pulse = true
       // break
       case 'searching':
-        result.name = 'i-lucide-search'
+        result.icon = 'i-lucide-search'
         result.pulse = true
         break
       case 'search_complete':
-        result.name = 'i-lucide-search-check'
+        result.icon = 'i-lucide-search-check'
         break
       case 'processing_serach_result':
-        result.name = 'i-lucide-brain'
+        result.icon = 'i-lucide-brain'
         result.pulse = true
         break
       case 'processed_search_result':
-        result.name = 'i-lucide-circle-check-big'
+        result.icon = 'i-lucide-circle-check-big'
         break
       case 'error':
-        result.name = 'i-lucide-octagon-x'
+        result.icon = 'i-lucide-octagon-x'
+        result.color = 'error'
         break
     }
     return result
@@ -66,10 +72,10 @@
   <div class="flex items-center gap-1">
     <UIcon name="i-lucide-circle-dot" />
     <UButton
-      :class="['max-w-90 shrink-0', icon.pulse && 'animate-pulse']"
-      :icon="icon.name"
+      :class="['max-w-90 shrink-0', theme.pulse && 'animate-pulse']"
+      :icon="theme.icon"
       size="sm"
-      :color="selectedNode?.id === node.id ? 'primary' : 'info'"
+      :color="selectedNode?.id === node.id ? 'primary' : theme.color"
       :variant="selectedNode?.id === node.id ? 'soft' : 'outline'"
       @click="emit('select', node)"
     >

i18n/en.json

@@ -73,5 +73,8 @@
     "error": "Generate report failed: {0}",
     "downloadingFonts": "Downloading necessary fonts, this may take some time...",
     "downloadFontFailed": "Download font failed"
+  },
+  "error": {
+    "requestBlockedByCORS": "The current API provider may not allow cross-origin requests. Please try a different service provider or contact the provider for support."
   }
 }

i18n/zh.json

@@ -73,5 +73,8 @@
     "error": "生成报告失败：{0}",
     "downloadingFonts": "正在下载必要字体，可能需要较长时间...",
     "downloadFontFailed": "下载字体失败"
+  },
+  "error": {
+    "requestBlockedByCORS": "当前 API 服务可能不允许接口跨域，请换一个服务试试，或者向服务方反馈。"
   }
 }

lib/deep-research.ts

@@ -110,6 +110,9 @@ export function generateSearchQueries({
     model: useAiModel(),
     system: systemPrompt(),
     prompt,
+    onError({ error }) {
+      throw error
+    },
   })
 }
 
@@ -159,6 +162,9 @@ function processSearchResult({
     abortSignal: AbortSignal.timeout(60_000),
     system: systemPrompt(),
     prompt,
+    onError({ error }) {
+      throw error
+    },
   })
 }
 
@@ -187,6 +193,9 @@ export function writeFinalReport({
     model: useAiModel(),
     system: systemPrompt(),
     prompt: _prompt,
+    onError({ error }) {
+      throw error
+    },
   })
 }
 

lib/feedback.ts

@@ -36,6 +36,9 @@ export function generateFeedback({
     model: useAiModel(),
     system: systemPrompt(),
     prompt,
+    onError({ error }) {
+      throw error
+    },
   })
 
   return parseStreamingJson(

scripts/build.js

@@ -10,7 +10,7 @@
  * 
  * So I wrote this script to override the encodings in `@tavily/core` to `o200k_base`
  * and clean up unused js-tiktoken encodings in the build output,
- * making the build output smaller by about 2 MB.
+ * making the build output smaller by about 3 MB.
 */
 
 import { execSync } from 'child_process';