JellyChat: Improve error handling

0ptim · Jul 30, 2023 · e9784b5 · e9784b5
1 parent 4fc5b0e
commit e9784b5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/i18n/de/code.json b/i18n/de/code.json
@@ -52,11 +52,11 @@
     "description": "Senden Button auf der Jelly Chat Seite."
   },
   "JellyChat.Error": {
-    "message": "🔧 🐠 Wir haben einige Turbulenzen in unserem Unterwasser-Kommunikationssystem. Unsere Unterwassertechniker arbeiten hart daran, das Problem zu beheben. Bitte habe Geduld und schaue bald wieder vorbei, um dein Gespräch fortzusetzen! 🐟 🌊",
+    "message": "🔧 Wir haben einige Turbulenzen in unserem Unterwasser-Kommunikationssystem. Unsere Unterwassertechniker arbeiten hart daran, das Problem zu beheben. Bitte habe Geduld und schaue bald wieder vorbei, um dein Gespräch fortzusetzen! 🌊",
     "description": "Fehlermeldung auf der Jelly Chat Seite."
   },
   "JellyChat.Retry": {
-    "message": "🐋 Probiere es noch mal! 🐬",
+    "message": "Probiere es noch mal 🐬",
     "description": "Wiederholen Button auf der Jelly Chat Seite."
   }
-}
+}
diff --git a/i18n/en/code.json b/i18n/en/code.json
@@ -52,11 +52,11 @@
     "description": "Send button for the Jelly Chat page."
   },
   "JellyChat.Error": {
-    "message": "🔧 🐠 We're experiencing some turbulence in our underwater communication system. Our aquatic engineers are working hard to resolve the issue. Please be patient and check back soon to resume your conversation! 🐟 🌊",
+    "message": "🔧 We're experiencing some turbulence in our underwater communication system. Our aquatic engineers are working hard to resolve the issue. Please be patient and check back soon to resume your conversation! 🌊",
     "description": "Error message for the Jelly Chat page."
   },
   "JellyChat.Retry": {
-    "message": "🐋 Give it another whirl! 🐬",
+    "message": "Give it another whirl 🐬",
     "description": "Retry button for the Jelly Chat page."
   }
-}
+}
diff --git a/i18n/tr/code.json b/i18n/tr/code.json
@@ -52,11 +52,11 @@
     "description": "Jelly Chat sayfası için gönder düğmesi."
   },
   "JellyChat.Error": {
-    "message": "🔧 🐠 Sualtı iletişim sistemimizde bazı türbülanslar yaşıyoruz. Su mühendislerimiz sorunu çözmek için çok çalışıyorlar. Lütfen sabırlı olun ve konuşmanıza devam etmek için yakında tekrar kontrol edin! 🐟 🌊",
+    "message": "🔧 Sualtı iletişim sistemimizde bazı türbülanslar yaşıyoruz. Su mühendislerimiz sorunu çözmek için çok çalışıyorlar. Lütfen sabırlı olun ve konuşmanıza devam etmek için yakında tekrar kontrol edin! 🌊",
     "description": "Jelly Chat sayfası için hata mesajı"
   },
   "JellyChat.Retry": {
-    "message": "🐋 Bir kez daha dene! 🐬",
+    "message": "Bir kez daha dene 🐬",
     "description": "Jelly Chat sayfası için yeniden dene düğmesi"
   }
-}
+}
diff --git a/src/pages/jellychat/index.js b/src/pages/jellychat/index.js
@@ -16,7 +16,7 @@ export default function JellyChat() {
   const [error, setError] = useState(false);
   const [userToken, setUserToken] = useState(null);
   const [loadHistory, setLoadHistory] = useState(false);
-  const [loadHistoryError, setLoadHistoryError] = useState(false);
+  const [fatalError, setFatalError] = useState(false);
   const [newToken, setNewToken] = useState();
 
   const inputRef = useRef(null);
@@ -55,15 +55,15 @@ export default function JellyChat() {
             "Failed to fetch chat history. Status code: ",
             response.status
           );
-          setLoadHistoryError(true);
+          setFatalError(true);
         } else {
           const data = await response.json();
           console.log("Chat history: ", data);
           setMessages(data);
         }
       } catch (error) {
         console.error("Failed to fetch chat history.", error);
-        setLoadHistoryError(true);
+        setFatalError(true);
       }
       setLoadHistory(false);
     };
@@ -135,6 +135,12 @@ export default function JellyChat() {
       setNewToken(() => data);
     });
 
+    socket.on("error", (error) => {
+      console.error(error);
+      setFatalError(true);
+      setLoading(false);
+    });
+
     return () => {
       socket.disconnect();
     };
@@ -179,16 +185,19 @@ export default function JellyChat() {
           </p>
 
           <ChatWindow messagesLength={messages.length} tokens={newToken}>
-            {loadHistoryError ? (
+            {fatalError ? (
               <ErrorBanner
                 onRetry={() => {
                   window.location.reload();
                 }}
               />
-            ) : null}
-            {messages.map((message, index) => (
-              <Message key={index} message={message} />
-            ))}
+            ) : (
+              <>
+                {messages.map((message, index) => (
+                  <Message key={index} message={message} />
+                ))}
+              </>
+            )}
             {loading && (
               <div className="self-start rounded-lg bg-gray-50 px-4 shadow-md outline-none dark:bg-gray-800">
                 <p className="mb-0 animate-pulse text-lg">...</p>