Add user-friendly error handling for OpenAI API responses#8
Conversation
- Introduced a helper function to generate meaningful error messages for users based on specific OpenAI API error codes. - Updated the `generateAiResponse` action to include detailed error messages in the response handling. - Modified the schema and related mutations to store and manage error details effectively. - Implemented a mechanism in the chat component to display error messages as toast notifications for better user experience.
WalkthroughA user-friendly error messaging system was implemented for AI chat interactions. Error details are now extracted, stored, and surfaced to users via toasts when AI message generation fails. Schema, mutations, and frontend logic were updated to support and display specific error information per message and conversation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Frontend
participant Backend
participant OpenAI/OpenRouter
User->>Frontend: Sends message
Frontend->>Backend: generateAiResponse
Backend->>OpenAI/OpenRouter: Request AI response
OpenAI/OpenRouter-->>Backend: Response or Error
alt Success
Backend->>Backend: Store AI message
Backend-->>Frontend: Message with content
Frontend-->>User: Display AI response
else Error
Backend->>Backend: Extract user-friendly error message
Backend->>Backend: Store AI message with errorDetails
Backend-->>Frontend: Message with error status and details
Frontend->>Frontend: Toast errorDetails if not already shown
Frontend-->>User: Display error toast
end
Suggested labels
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for t3chatcloneathon ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances error handling for OpenAI API responses by introducing user-friendly error messages that are both stored and displayed as toast notifications. Key changes include:
- Adding new state and effects in the chat component to track and display error messages.
- Updating schema and mutations to store detailed error information.
- Implementing a helper function to generate meaningful error messages based on specific API error codes.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/chat/useChat.ts | Added refs and effects to show toast notifications for new error messages. |
| convex/schema.ts | Updated schema to include an optional errorDetails property. |
| convex/chatQueriesAndMutations.ts | Modified mutations to include errorDetails when messaging errors. |
| convex/chat.ts | Introduced a helper function for mapping API errors to user-friendly messages and updated the action accordingly. |
Comments suppressed due to low confidence (1)
convex/chat.ts:76
- Consider verifying whether the check for authentication errors should inspect error.error.code instead of error.code for consistency with the surrounding error handling logic.
if (error.code === 401 && error.message.includes("No auth credentials")) {
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
convex/chat.ts (1)
59-91: Excellent error message standardization with a minor improvement needed.The
getUserFriendlyErrorMessagehelper function comprehensively handles various error scenarios and provides meaningful user feedback. However, there's a static analysis suggestion to improve line 63.Apply this diff to use optional chaining as suggested by static analysis:
- if (error.error && error.error.message) { + if (error.error?.message) { const message = error.error.message;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
convex/chat.ts(3 hunks)convex/chatQueriesAndMutations.ts(6 hunks)convex/schema.ts(1 hunks)src/components/chat/useChat.ts(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
convex/chat.ts
[error] 63-63: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (9)
convex/schema.ts (1)
25-25: LGTM! Clean schema enhancement.The addition of the optional
errorDetailsfield to the messages table is well-designed and aligns perfectly with the error handling improvements.src/components/chat/useChat.ts (3)
55-56: LGTM! Well-designed state tracking.The refs for tracking message count and seen error IDs are appropriately used to prevent duplicate toast notifications.
536-553: LGTM! Robust error toast implementation.The effect correctly monitors for new error messages and displays toasts with specific error details while avoiding duplicates through proper ID tracking.
555-561: LGTM! Proper conversation-scoped cleanup.The effect appropriately resets the seen error message tracking when switching conversations, ensuring error toasts are managed per conversation context.
convex/chat.ts (2)
770-770: LGTM! Proper error detail integration.The error detail is appropriately passed to the mutation when no content is generated.
776-776: LGTM! Consistent error handling integration.The
getUserFriendlyErrorMessagehelper is properly integrated across all error scenarios, ensuring users receive meaningful feedback regardless of where errors occur.Also applies to: 791-791, 797-797, 804-804
convex/chatQueriesAndMutations.ts (3)
38-38: LGTM! Consistent validator update.The
messageDocvalidator correctly includes the newerrorDetailsfield, maintaining consistency with the schema changes.
356-356: LGTM! Proper mutation enhancement.The
storeAiMessagemutation correctly accepts and stores theerrorDetailsfield, enabling detailed error information to be persisted alongside message status.Also applies to: 384-384, 407-407
677-677: LGTM! Enhanced error tracking capability.The
markMessageErrormutation is properly enhanced to accept and store detailed error information, completing the error handling pipeline.Also applies to: 682-682, 693-693
generateAiResponseaction to include detailed error messages in the response handling.Summary by CodeRabbit
New Features
Bug Fixes
Improvements