cleanup error handling

gempir · Mar 4, 2024 · a0d2064 · a0d2064
1 parent 27872b9
commit a0d2064
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 49 deletions.
diff --git a/web/src/components/George/George.tsx b/web/src/components/George/George.tsx
@@ -7,7 +7,9 @@ export function George() {
     const loadRef = useRef<NodeJS.Timeout>();
     const [loading, setLoading] = useState<boolean>(false);
 
-    const [doReq, abortController] = useGeorge();
+    const abortController = useRef(new AbortController());
+
+    const [doReq] = useGeorge();
 
     const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         clearInterval(loadRef.current);
@@ -45,7 +47,8 @@ export function George() {
         loadRef.current = setInterval(() => {
             setResp(prev => prev + ".");
         }, 1000);
-        doReq(req, (text: string) => {
+        abortController.current = new AbortController();
+        doReq(req, abortController.current, (text: string) => {
             clearInterval(loadRef.current);
             if (text === "@DONE") {
                 setLoading(false);
@@ -59,7 +62,7 @@ export function George() {
 
     const abort = () => {
         try {
-            abortController.abort();
+            abortController.current.abort();
         } catch (e) {
             console.error(e);
         }

diff --git a/web/src/hooks/useGeorge.ts b/web/src/hooks/useGeorge.ts
@@ -1,13 +1,6 @@
-import { useRef } from 'react';
 import { Method } from '../service/doFetch';
 import { useStore } from '../store';
 
-type FetchStreamResponse = {
-    data: string | null;
-    error: Error | null;
-    loading: boolean;
-};
-
 interface GeorgeRequest {
     channel: string;
     username: string;
@@ -18,59 +11,64 @@ interface GeorgeRequest {
     model: string;
 }
 
-type RequestFunc = (req: GeorgeRequest, onText: (text: string) => void, onQuery: (text: string) => void) => void;
+type RequestFunc = (req: GeorgeRequest, controller: AbortController, onText: (text: string) => void, onQuery: (text: string) => void) => void;
 
-export const useGeorge = (): [RequestFunc, AbortController] => {
+export const useGeorge = (): [RequestFunc] => {
     const apiBaseUrl = useStore(state => state.apiBaseUrl);
     const scToken = useStore(state => state.scToken);
 
-    const controller = useRef<AbortController>(new AbortController());
+    const request = async (req: GeorgeRequest, controller: AbortController, onText: (text: string) => void, onQuery: (text: string) => void) => {
+        try {
+            const response = await fetch(apiBaseUrl + "/api/george", {
+                method: Method.POST,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${scToken}`
+                },
+                body: JSON.stringify(req),
+                signal: controller.signal
+            });
 
-    const request = async (req: GeorgeRequest, onText: (text: string) => void, onQuery: (text: string) => void) => {
-        const response = await fetch(apiBaseUrl + "/api/george", {
-            method: Method.POST,
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${scToken}`
-            },
-            body: JSON.stringify(req),
-            signal: controller.current.signal
-        });
+            const reader = response.body?.getReader();
+            if (!reader) {
+                onText("Failed to read response body");
+                return "";
+            }
 
-        const reader = response.body?.getReader();
-        if (!reader) {
-            return "";
-        }
+            let result = '';
+            let queryDone = false;
 
-        let result = '';
-        let queryDone = false;
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) {
+                    onText("@DONE");
+                    break;
+                }
+                const textValue = new TextDecoder().decode(value);
+                result += textValue;
 
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) {
-                onText("@DONE");
-                break;
-            }
-            const textValue = new TextDecoder().decode(value);
-            result += textValue;
+                if (!queryDone && textValue.includes("====QUERYDONE====")) {
+                    onQuery(result.replace("====QUERYDONE====", ""));
+                    result = "";
+                    queryDone = true;
+                    continue;
+                }
 
-            if (!queryDone && textValue.includes("====QUERYDONE====")) {
-                onQuery(result.replace("====QUERYDONE====", ""));
-                result = "";
-                queryDone = true;
-                continue;
+                if (queryDone) {
+                    onText(result);
+                }
             }
 
-            if (queryDone) {
+            // something failed
+            if (!queryDone) {
                 onText(result);
             }
-        }
-
-        // something failed
-        if (!queryDone) {
-            onText(result);
+        } catch (error) {
+            const err = error as Error;
+            onText(err?.message);
+            return;
         }
     };
 
-    return [request, controller.current];
+    return [request];
 };