AIエラーをトーストで表示

[tegnike]

関連

• LLMエラーをトーストで表示する #190

Summary by CodeRabbit

• 新機能

  • エラーメッセージをトースト通知として表示する新しいエラーハンドリング機能を追加しました。これにより、APIとのやり取り中に発生するエラーに対して、即座にフィードバックが得られるようになりました。

• バグ修正

  • エラーメッセージの処理を改善し、ストリームを通じてエラーを返す代わりに、トースト通知を使用するように変更しました。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
aituber-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2024 2:39pm

[coderabbitai]

Walkthrough

このプルリクエストでは、getDifyChatResponseStream および getVercelAIChatResponseStream 関数におけるエラーハンドリングと通知メカニズムの変更が行われました。新たに toastStore のインポートが追加され、エラーメッセージの表示が ReadableStream からトースト通知に変更されました。APIレスポンスが不正な場合やJSON解析エラーが発生した際には、標準化されたエラーメッセージがトースト通知として表示されるようになり、エラーは呼び出し元に伝播されます。

Changes

ファイルパス	変更内容
src/features/chat/difyChat.ts	getDifyChatResponseStream 関数のエラーハンドリングを変更し、トースト通知を使用するようにした。
src/features/chat/vercelAIChat.ts	getVercelAIChatResponseStream 関数のエラーハンドリングを変更し、トースト通知を使用するようにした。

Possibly related issues

• LLMエラーをトーストで表示する #190: LLMエラーをトーストで表示する機能を追加することに関連している。
• エラーはトーストで表示する #170: エラーをトーストで表示する機能を追加することに関連しており、WebSocketの接続中のメッセージ表示も含まれている。

Possibly related PRs

• Difyの不具合修正 #162: getDifyChatResponseStream 関数の変更に関連しており、ストリーミングレスポンスの処理改善に焦点を当てている。
• 本番リリース #163: getDifyChatResponseStream 関数の変更に関連しており、受信データの処理改善に関するものであるが、エラーハンドリングの変更には関与していない。

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (4)

src/features/chat/difyChat.ts (2)

86-89: エラーメッセージをより具体的にすることを推奨します

ストリーム処理中のエラーに対して、より具体的なエラーメッセージを表示することで、ユーザーがより適切な対応を取れるようになります。

以下のような実装を提案します：

 toastStore.getState().addToast({
-  message: i18next.t('Errors.AIAPIError'),
+  message: i18next.t('Errors.AIStreamError', {
+    details: error.message
+  }),
   type: 'error',
   tag: 'dify-api-error',
 })

---

99-104: エラーログの追加を推奨します

エラーをトースト表示して再スローする前に、デバッグ目的でエラーの詳細をログに記録することを推奨します。

以下のような実装を提案します：

+ console.error(`Dify API error:`, { error, errorMessage });
 toastStore.getState().addToast({
   message: errorMessage,
   type: 'error',
   tag: 'dify-api-error',
 })
 throw error

src/features/chat/vercelAIChat.ts (2)

138-142: エラー通知の実装が改善されました

ストリームでのエラー表示からトースト通知に変更されたことで、ユーザーへのフィードバックが即時に行われるようになりました。

+const VERCEL_API_ERROR_TAG = 'vercel-api-error' as const;

 toastStore.getState().addToast({
   message: errorMessage,
   type: 'error',
-  tag: 'vercel-api-error',
+  tag: VERCEL_API_ERROR_TAG,
 })

タグ文字列を定数として定義することで、将来的な変更や再利用が容易になります。

---

151-156: エラー処理の重複を改善できます

トースト通知の実装は適切ですが、コードの重複が見られます。以下のようにトースト通知のロジックを共通関数として抽出することを推奨します。

+const showVercelApiError = (message: string) => {
+  toastStore.getState().addToast({
+    message,
+    type: 'error',
+    tag: VERCEL_API_ERROR_TAG,
+  });
+};

 // 使用例：
-toastStore.getState().addToast({
-  message: errorMessage,
-  type: 'error',
-  tag: 'vercel-api-error',
-});
+showVercelApiError(errorMessage);

この変更により、コードの再利用性が向上し、将来的な変更も容易になります。

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 9fcd7c2 and e088b64.

📒 Files selected for processing (2)

• src/features/chat/difyChat.ts (3 hunks)
• src/features/chat/vercelAIChat.ts (3 hunks)

🔇 Additional comments (2)

src/features/chat/difyChat.ts (1)

4-4: トースト通知のインポートが適切に追加されています

エラーハンドリングの改善のため、必要なインポートが正しく追加されています。

src/features/chat/vercelAIChat.ts (1)

7-7: トーストストアのインポートが適切に追加されています

エラー通知の実装に必要なインポートが正しく配置されています。