From 1ce32fabc296e8c6bb561f4d9bb639cb7a0312a7 Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Thu, 13 Feb 2025 16:46:11 +0800
Subject: [PATCH] feat: improve error handling

---
 components/ResearchFeedback.vue | 12 +++++++---
 components/Tree.vue             | 40 +++++++++++++++++++--------------
 i18n/en.json                    |  3 +++
 i18n/zh.json                    |  3 +++
 lib/deep-research.ts            |  9 ++++++++
 lib/feedback.ts                 |  3 +++
 scripts/build.js                |  2 +-
 7 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/components/ResearchFeedback.vue b/components/ResearchFeedback.vue
index 93cea03..887d166 100644
--- a/components/ResearchFeedback.vue
+++ b/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"
diff --git a/components/Tree.vue b/components/Tree.vue
index de2a20f..9b8e780 100644
--- a/components/Tree.vue
+++ b/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,38 +25,43 @@
     (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':
-        // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
-        // 但是目前进入这个状态之后再进入 searching 状态，图标不会更新成 search，不知道原因
-        // 暂时禁用了这个 case
-        // result.name = 'i-lucide-pause'
-        // result.pulse = true
-        // break
+      // FIXME: 因为 deepResearch 有并发限制，这个 case 是为了明确区分状态。
+      // 但是目前进入这个状态之后再进入 searching 状态，图标不会更新成 search，不知道原因
+      // 暂时禁用了这个 case
+      // result.name = 'i-lucide-pause'
+      // 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)"
     >
diff --git a/i18n/en.json b/i18n/en.json
index 08de0dc..18df3a8 100644
--- a/i18n/en.json
+++ b/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."
   }
 }
\ No newline at end of file
diff --git a/i18n/zh.json b/i18n/zh.json
index d58ffb6..a8f6323 100644
--- a/i18n/zh.json
+++ b/i18n/zh.json
@@ -73,5 +73,8 @@
     "error": "生成报告失败：{0}",
     "downloadingFonts": "正在下载必要字体，可能需要较长时间...",
     "downloadFontFailed": "下载字体失败"
+  },
+  "error": {
+    "requestBlockedByCORS": "当前 API 服务可能不允许接口跨域，请换一个服务试试，或者向服务方反馈。"
   }
 }
\ No newline at end of file
diff --git a/lib/deep-research.ts b/lib/deep-research.ts
index 15b19f6..37b2bb4 100644
--- a/lib/deep-research.ts
+++ b/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
+    },
   })
 }
 
diff --git a/lib/feedback.ts b/lib/feedback.ts
index 0dac09a..a125bee 100644
--- a/lib/feedback.ts
+++ b/lib/feedback.ts
@@ -36,6 +36,9 @@ export function generateFeedback({
     model: useAiModel(),
     system: systemPrompt(),
     prompt,
+    onError({ error }) {
+      throw error
+    },
   })
 
   return parseStreamingJson(
diff --git a/scripts/build.js b/scripts/build.js
index bd78183..5b0f48f 100644
--- a/scripts/build.js
+++ b/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';