From b9a8f051764c54aaada7826d95970aa63f2687ba Mon Sep 17 00:00:00 2001 From: Jing Hua Date: Sat, 4 Mar 2023 23:35:38 +0800 Subject: [PATCH] error handling --- src/api/customApi.ts | 66 +++++++++---------- src/api/freeApi.ts | 62 ++++++++--------- .../Chat/ChatContent/ChatContent.tsx | 4 +- src/hooks/useSubmit.ts | 33 ++++++---- src/store/chat-slice.ts | 9 +++ 5 files changed, 91 insertions(+), 83 deletions(-) diff --git a/src/api/customApi.ts b/src/api/customApi.ts index 68aa1ee..98bb65f 100644 --- a/src/api/customApi.ts +++ b/src/api/customApi.ts @@ -25,45 +25,41 @@ export const getChatCompletion = async ( apiKey: string, messages: MessageInterface[] ) => { - try { - const response = await fetch(endpoint, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${apiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-3.5-turbo', - messages, - }), - }); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error:', error); - } + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${apiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-3.5-turbo', + messages, + }), + }); + if (!response.ok) throw new Error(await response.text()); + + const data = await response.json(); + return data; }; export const getChatCompletionStream = async ( apiKey: string, messages: MessageInterface[] ) => { - try { - const response = await fetch(endpoint, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${apiKey}`, - }, - body: JSON.stringify({ - model: 'gpt-3.5-turbo', - messages, - stream: true, - }), - }); - const stream = response.body; - return stream; - } catch (error) { - console.error('Error:', error); - } + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${apiKey}`, + }, + body: JSON.stringify({ + model: 'gpt-3.5-turbo', + messages, + stream: true, + }), + }); + if (!response.ok) throw new Error(await response.text()); + + const stream = response.body; + return stream; }; diff --git a/src/api/freeApi.ts b/src/api/freeApi.ts index 3b09633..2835f79 100644 --- a/src/api/freeApi.ts +++ b/src/api/freeApi.ts @@ -3,40 +3,36 @@ import { MessageInterface } from '@type/chat'; export const endpoint = 'https://chatgpt-api.shn.hk/v1/'; export const getChatCompletion = async (messages: MessageInterface[]) => { - try { - const response = await fetch(endpoint, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - model: 'gpt-3.5-turbo', - messages, - }), - }); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error:', error); - } + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + model: 'gpt-3.5-turbo', + messages, + }), + }); + if (!response.ok) throw new Error(await response.text()); + + const data = await response.json(); + return data; }; export const getChatCompletionStream = async (messages: MessageInterface[]) => { - try { - const response = await fetch(endpoint, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - model: 'gpt-3.5-turbo', - messages, - stream: true, - }), - }); - const stream = response.body; - return stream; - } catch (error) { - console.error('Error:', error); - } + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + model: 'gpt-3.5-turbo', + messages, + stream: true, + }), + }); + if (!response.ok) throw new Error(await response.text()); + + const stream = response.body; + return stream; }; diff --git a/src/components/Chat/ChatContent/ChatContent.tsx b/src/components/Chat/ChatContent/ChatContent.tsx index c6bc5bd..ece04b4 100644 --- a/src/components/Chat/ChatContent/ChatContent.tsx +++ b/src/components/Chat/ChatContent/ChatContent.tsx @@ -39,8 +39,8 @@ const ChatContent = () => { {error !== '' && ( -
- Invalid API key! +
+ {error}
)} diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts index 88b8a45..4b9a822 100644 --- a/src/hooks/useSubmit.ts +++ b/src/hooks/useSubmit.ts @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import useStore from '@store/store'; import { MessageInterface } from '@type/chat'; import { getChatCompletionStream as getChatCompletionStreamFree } from '@api/freeApi'; @@ -6,16 +6,23 @@ import { getChatCompletionStream as getChatCompletionStreamCustom } from '@api/c import { parseEventSource } from '@api/helper'; const useSubmit = () => { - const [error, setError] = useState(''); - const [apiFree, apiKey, setMessages, setGenerating, generating] = useStore( - (state) => [ - state.apiFree, - state.apiKey, - state.setMessages, - state.setGenerating, - state.generating, - ] - ); + const [ + error, + setError, + apiFree, + apiKey, + setMessages, + setGenerating, + generating, + ] = useStore((state) => [ + state.error, + state.setError, + state.apiFree, + state.apiKey, + state.setMessages, + state.setGenerating, + state.generating, + ]); const handleSubmit = async () => { if (generating) return; @@ -71,8 +78,8 @@ const useSubmit = () => { console.log(err); setError(err); setTimeout(() => { - setError(''), 10000; - }); + setError(''); + }, 10000); } setGenerating(false); }; diff --git a/src/store/chat-slice.ts b/src/store/chat-slice.ts index be21a6b..e2fcd54 100644 --- a/src/store/chat-slice.ts +++ b/src/store/chat-slice.ts @@ -6,16 +6,19 @@ export interface ChatSlice { chats?: ChatInterface[]; currentChatIndex: number; generating: boolean; + error: string; setMessages: (messages: MessageInterface[]) => void; setChats: (chats: ChatInterface[]) => void; setCurrentChatIndex: (currentChatIndex: number) => void; setGenerating: (generating: boolean) => void; + setError: (error: string) => void; } export const createChatSlice: StoreSlice = (set, get) => ({ messages: [], currentChatIndex: -1, generating: false, + error: '', setMessages: (messages: MessageInterface[]) => { set((prev: ChatSlice) => ({ ...prev, @@ -40,4 +43,10 @@ export const createChatSlice: StoreSlice = (set, get) => ({ generating: generating, })); }, + setError: (error: string) => { + set((prev: ChatSlice) => ({ + ...prev, + error: error, + })); + }, });