chore: update request error message

components/ChatView/index.tsx

@@ -93,15 +93,19 @@ const ChatView = () => {
     let prompt = "";
     let tokens = 0;
     if (connectionStore.currentConnectionCtx?.database) {
-      const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
-      const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
       let schema = "";
+      try {
+        const tables = await connectionStore.getOrFetchDatabaseSchema(connectionStore.currentConnectionCtx?.database);
         for (const table of tables) {
           if (tokens < MAX_TOKENS / 2) {
             tokens += countTextTokens(schema + table.structure);
             schema += table.structure;
           }
         }
+      } catch (error: any) {
+        toast.error(error.message);
+      }
+      const promptGenerator = getPromptGeneratorOfAssistant(getAssistantById(currentChat.assistantId)!);
       prompt = promptGenerator(schema);
     }
     let formatedMessageList = [];

components/CreateConnectionModal.tsx

@@ -2,8 +2,8 @@ import { cloneDeep, head } from "lodash-es";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "react-hot-toast";
-import { testConnection, useConnectionStore } from "@/store";
-import { Connection, Engine } from "@/types";
+import { useConnectionStore } from "@/store";
+import { Connection, Engine, ResponseObject } from "@/types";
 import Icon from "./Icon";
 import DataStorageBanner from "./DataStorageBanner";
 import ActionConfirmModal from "./ActionConfirmModal";
@@ -32,6 +32,7 @@ const CreateConnectionModal = (props: Props) => {
   const [isRequesting, setIsRequesting] = useState(false);
   const showDatabaseField = connection.engineType === Engine.PostgreSQL;
   const isEditing = editConnection !== undefined;
+  const allowSave = connection.host !== "" && connection.username !== "";
 
   useEffect(() => {
     if (show) {
@@ -60,12 +61,26 @@ const CreateConnectionModal = (props: Props) => {
     }
 
     try {
-      await testConnection(tempConnection);
-    } catch (error) {
-      setIsRequesting(false);
-      toast.error("Failed to test connection, please check your connection configuration");
+      const response = await fetch("/api/connection/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          connection: tempConnection,
+        }),
+      });
+      const result = (await response.json()) as ResponseObject<boolean>;
+      if (result.message) {
+        toast.error(result.message);
         return;
       }
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to test connection");
+    } finally {
+      setIsRequesting(false);
+    }
 
     try {
       let connection: Connection;
@@ -187,7 +202,7 @@ const CreateConnectionModal = (props: Props) => {
               <button className="btn btn-outline" onClick={close}>
                 Close
               </button>
-              <button className="btn" disabled={isRequesting} onClick={handleCreateConnection}>
+              <button className="btn" disabled={isRequesting || !allowSave} onClick={handleCreateConnection}>
                 {isRequesting && <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" />}
                 Save
               </button>

components/QueryDrawer.tsx

@@ -5,6 +5,7 @@ import DataTable from "react-data-table-component";
 import { toast } from "react-hot-toast";
 import TextareaAutosize from "react-textarea-autosize";
 import { useQueryStore } from "@/store";
+import { ResponseObject } from "@/types";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 
@@ -63,12 +64,17 @@ const QueryDrawer = () => {
           statement,
         }),
       });
-      const result = await response.json();
-      setIsLoading(false);
-      setRawResults(result);
+      const result = (await response.json()) as ResponseObject<RawQueryResult[]>;
+      if (result.message) {
+        toast.error(result.message);
+      } else {
+        setRawResults(result.data);
+      }
     } catch (error) {
       console.error(error);
       toast.error("Failed to execute statement");
+    } finally {
+      setIsLoading(false);
     }
   };
 

pages/api/connection/db_schema.ts

@@ -23,10 +23,13 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         structure,
       });
     }
-    res.status(200).json(tableStructures);
-  } catch (error) {
+    res.status(200).json({
+      data: tableStructures,
+    });
+  } catch (error: any) {
     res.status(400).json({
-      error: error,
+      message: error.message || "Failed to get database schema.",
+      code: error.code || "UNKNOWN",
     });
   }
 };

pages/api/connection/execute.ts

@@ -21,9 +21,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   try {
     const connector = newConnector(connection);
     const result = await connector.execute(db, statement);
-    res.status(200).json(result);
-  } catch (error) {
-    res.status(400).json([]);
+    res.status(200).json({
+      data: result,
+    });
+  } catch (error: any) {
+    res.status(400).json({
+      message: error.message || "Failed to execute statement.",
+      code: error.code || "UNKNOWN",
+    });
   }
 };
 

pages/api/connection/test.ts

@@ -15,8 +15,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const connector = newConnector(connection);
     await connector.testConnection();
     res.status(200).json({});
-  } catch (error) {
-    res.status(400).json({});
+  } catch (error: any) {
+    res.status(400).json({
+      message: error.message || "Failed to test connection.",
+      code: error.code || "UNKNOWN",
+    });
   }
 };
 

store/connection.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { uniqBy } from "lodash-es";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { Connection, Database, Engine, Table } from "@/types";
+import { Connection, Database, Engine, ResponseObject, Table } from "@/types";
 import { generateUUID } from "@/utils";
 
 interface ConnectionContext {
@@ -92,11 +92,14 @@ export const useConnectionStore = create<ConnectionState>()(
           return [];
         }
 
-        const { data } = await axios.post<Table[]>("/api/connection/db_schema", {
+        const { data: result } = await axios.post<ResponseObject<Table[]>>("/api/connection/db_schema", {
           connection,
           db: database.name,
         });
-        return data;
+        if (result.message) {
+          throw result.message;
+        }
+        return result.data;
       },
       getConnectionById: (connectionId: string) => {
         return get().connectionList.find((connection) => connection.id === connectionId);
@@ -119,10 +122,3 @@ export const useConnectionStore = create<ConnectionState>()(
     }
   )
 );
-
-export const testConnection = async (connection: Connection) => {
-  const { data: result } = await axios.post<boolean>("/api/connection/test", {
-    connection,
-  });
-  return result;
-};

types/api.ts

@@ -0,0 +1,5 @@
+export type ResponseObject<T> = {
+  data: T;
+  message?: string;
+  code?: string;
+};

types/index.ts

@@ -4,3 +4,4 @@ export * from "./connection";
 export * from "./database";
 export * from "./chat";
 export * from "./message";
+export * from "./api";