error handling

src/api/customApi.ts

@@ -25,7 +25,6 @@ export const getChatCompletion = async (
   apiKey: string,
   messages: MessageInterface[]
 ) => {
-  try {
   const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
@@ -37,18 +36,16 @@ export const getChatCompletion = async (
       messages,
     }),
   });
+  if (!response.ok) throw new Error(await response.text());
+
   const data = await response.json();
   return data;
-  } catch (error) {
-    console.error('Error:', error);
-  }
 };
 
 export const getChatCompletionStream = async (
   apiKey: string,
   messages: MessageInterface[]
 ) => {
-  try {
   const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
@@ -61,9 +58,8 @@ export const getChatCompletionStream = async (
       stream: true,
     }),
   });
+  if (!response.ok) throw new Error(await response.text());
+
   const stream = response.body;
   return stream;
-  } catch (error) {
-    console.error('Error:', error);
-  }
 };

src/api/freeApi.ts

@@ -3,7 +3,6 @@ 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: {
@@ -14,15 +13,13 @@ export const getChatCompletion = async (messages: MessageInterface[]) => {
       messages,
     }),
   });
+  if (!response.ok) throw new Error(await response.text());
+
   const data = await response.json();
   return data;
-  } catch (error) {
-    console.error('Error:', error);
-  }
 };
 
 export const getChatCompletionStream = async (messages: MessageInterface[]) => {
-  try {
   const response = await fetch(endpoint, {
     method: 'POST',
     headers: {
@@ -34,9 +31,8 @@ export const getChatCompletionStream = async (messages: MessageInterface[]) => {
       stream: true,
     }),
   });
+  if (!response.ok) throw new Error(await response.text());
+
   const stream = response.body;
   return stream;
-  } catch (error) {
-    console.error('Error:', error);
-  }
 };

src/components/Chat/ChatContent/ChatContent.tsx

@@ -39,8 +39,8 @@ const ChatContent = () => {
           <Message role={inputRole} content='' messageIndex={-1} sticky />
 
           {error !== '' && (
-            <div className='bg-red-600/50 p-2 rounded-sm w-3/5 mt-3 text-gray-900 dark:text-gray-300 text-sm'>
+            <div className='bg-red-600/50 p-2 rounded-sm w-3/5 mt-3 text-gray-900 dark:text-gray-300 text-sm break-words'>
-              Invalid API key!
+              {error}
             </div>
           )}
 

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<string>('');
+  const [
-  const [apiFree, apiKey, setMessages, setGenerating, generating] = useStore(
+    error,
-    (state) => [
+    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);
   };

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<ChatSlice> = (set, get) => ({
   messages: [],
   currentChatIndex: -1,
   generating: false,
+  error: '',
   setMessages: (messages: MessageInterface[]) => {
     set((prev: ChatSlice) => ({
       ...prev,
@@ -40,4 +43,10 @@ export const createChatSlice: StoreSlice<ChatSlice> = (set, get) => ({
       generating: generating,
     }));
   },
+  setError: (error: string) => {
+    set((prev: ChatSlice) => ({
+      ...prev,
+      error: error,
+    }));
+  },
 });