if backend returns an error, show it in toast

Author: Mary Hipp

invokeai/frontend/web/src/services/events/util/setEventListeners.ts

@@ -22,6 +22,8 @@ import {
 } from 'services/thunks/gallery';
 import { receivedModels } from 'services/thunks/model';
 import { receivedOpenAPISchema } from 'services/thunks/schema';
+import { makeToast } from '../../../features/system/hooks/useToastWatcher';
+import { addToast } from '../../../features/system/store/systemSlice';
 
 type SetEventListenersArg = {
   socket: Socket<ServerToClientEvents, ClientToServerEvents>;
@@ -78,6 +80,16 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
     }
   });
 
+  socket.on('connect_error', (error) => {
+    if (error && error.message) {
+      dispatch(
+        addToast(
+          makeToast({ title: error.message, status: 'error', duration: 10000 })
+        )
+      );
+    }
+  });
+
   /**
    * Disconnect
    */