#255: Error dialogs

Author: John

server/main.ts

@@ -32,10 +32,6 @@ const app: Express = express()
 app.use(express.static('renderer'))
 app.use(cors(options))
 app.use(express.json());
-app.use((err: Error, req: Request, res: Response, next: NextFunction): void => {
-  res.status(500);
-  res.render('error', { error: err })
-});
 
 /**
  * Execute a plugin module function via API call
@@ -51,7 +47,7 @@ app.post('/api/v1/invokeFunction', (req: Request, res: Response, next: NextFunct
   const args = req.body["args"];
   switch (method) {
     case "deleteFile":
-      deleteFile(args).then(() => res.json(Object())).catch((err: any) => next());
+      deleteFile(args).then(() => res.json(Object())).catch((err: any) => next(err));
       break;
     case "downloadFile":
       downloadFile(args.downloadUrl, args.fileName).then(() => res.json(Object())).catch((err: any) => next(err));
@@ -83,6 +79,11 @@ app.post('/api/v1/downloadProgress', (req: Request, res: Response): void => {
   res.json(Object());
 });
 
+app.use((err: Error, req: Request, res: Response, next: NextFunction): void => {
+  res.status(500);
+  res.json({ error: err?.message ?? "Internal Server Error" })
+});
+
 app.listen(port, () => console.log(`Application is running on port ${port}`));
 
 
@@ -113,7 +114,7 @@ function downloadModel(downloadUrl: string, fileName: string): void {
         fileName,
         success: undefined
       };
-      console.log("downloading file", fileName, state.percent);
+      console.log("downloading file", fileName, (state.percent * 100).toFixed(2) + '%');
     })
     .on("error", function (err: Error) {
       downloadProgress[fileName] = {
@@ -158,11 +159,14 @@ function downloadingFile(): ProgressState | undefined {
 async function downloadFile(downloadUrl: string, fileName: string): Promise<void> {
   return new Promise((resolve, reject) => {
     const obj = downloadingFile();
-    if (obj) reject(Error(obj.fileName + " is being downloaded!"));
+    if (obj) {
+      reject(Error(obj.fileName + " is being downloaded!"))
+      return;
+    };
     (async () => {
       downloadModel(downloadUrl, fileName);
     })().catch(e => {
-      console.log("downloadModel", fileName, e);
+      console.error("downloadModel", fileName, e);
     });
     resolve();
   });

web/app/_helpers/EventHandler.tsx

@@ -26,13 +26,11 @@ export default function EventHandler({ children }: { children: ReactNode }) {
   }
 
   function handleDownloadUpdate(state: any) {
-    console.log("handleDownloadUpdate", state);
     if (!state) return;
     setDownloadState(state);
   }
 
   function handleDownloadSuccess(state: any) {
-    console.log("handleDownloadSuccess", state);
     if (state && state.fileName && state.success === true) {
       setDownloadStateSuccess(state.fileName);
       executeSerial(ModelManagementService.UpdateFinishedDownloadAt, state.fileName).then(() => {

web/app/_services/coreService.ts

@@ -1,6 +1,7 @@
 import { store } from "./storeService";
 import { EventEmitter } from "./eventsService";
 import { version } from '../../package.json';
+import { toast } from 'react-toastify';
 const API_BASE_PATH: string = "/api/v1";
 export const setupCoreServices = () => {
   if (typeof window === "undefined") {
@@ -29,15 +30,15 @@ async function appVersion() {
 }
 
 function invokePluginFunc(modulePath: string, pluginFunc: string, ...args: any): Promise<any> {
-  return fetchApi(modulePath, pluginFunc, args);
+  return fetchApi(modulePath, pluginFunc, args).catch((err: Error) => { throw err });
 };
 
 async function downloadFile(downloadUrl: string, fileName: string) {
-  return fetchApi("", "downloadFile", { downloadUrl: downloadUrl, fileName: fileName });
+  return fetchApi("", "downloadFile", { downloadUrl: downloadUrl, fileName: fileName }).catch((err: Error) => { throw err });
 }
 
 async function deleteFile(fileName: string) {
-  return fetchApi("", "deleteFile", fileName);
+  return fetchApi("", "deleteFile", fileName).catch((err: Error) => { throw err });
 }
 
 async function fetchApi(modulePath: string, pluginFunc: string, args: any): Promise<any> {
@@ -48,21 +49,27 @@ async function fetchApi(modulePath: string, pluginFunc: string, args: any): Prom
   });
 
   if (!response.ok) {
-    console.error("Error");
-    return null;
-  }
-  else if (response.status >= 400) {
-    console.error('HTTP Error: ' + response.status + ' - ' + response.text);
+    const json = await response.json();
+    if (json && json.error) {
+      toast.error(json.error, {
+        position: "bottom-left",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+      });
+    }
     return null;
   }
-  else {
-    const text = await response.text();
-    try {
-      const json = JSON.parse(text)
-      return Promise.resolve(json);
-    } catch (err) {
-      return Promise.resolve(text);
-    }
+  const text = await response.text();
+  try {
+    const json = JSON.parse(text)
+    return Promise.resolve(json);
+  } catch (err) {
+    return Promise.resolve(text);
   }
 }
 

web/app/page.tsx

@@ -11,6 +11,8 @@ import EventListenerWrapper from "./_helpers/EventListenerWrapper";
 import { setupCoreServices } from "./_services/coreService";
 import MainContainer from "./_components/MainContainer";
 import { executeSerial } from "../../electron/core/plugin-manager/execution/extension-manager";
+import { ToastContainer } from 'react-toastify';
+  import 'react-toastify/dist/ReactToastify.css';
 
 const Page: React.FC = () => {
   const [setupCore, setSetupCore] = useState(false);
@@ -76,6 +78,9 @@ const Page: React.FC = () => {
           </ThemeWrapper>
         </EventListenerWrapper>
       )}
+      <div>
+        <ToastContainer />
+      </div>
     </JotaiWrapper>
   );
 };

web/package.json

@@ -38,6 +38,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-toastify": "^9.1.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

web/public/plugins/inference-plugin/index.js

@@ -574,7 +574,6 @@ function fetchDownloadProgress(fileName, intervalId) {
             return;
         }
         const json = yield response.json();
-        console.log("fetchDownloadProgress", json);
         if (isEmptyObject(json)) {
             if (!fileName) {
                 clearInterval(intervalId);
@@ -587,7 +586,6 @@ function fetchDownloadProgress(fileName, intervalId) {
         }
         else {
             events.emit(EventName.OnDownloadUpdate, json);
-            console.log("OnDownloadUpdate", json);
         }
     });
 }