feat(ui): improve session canceled handling

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -54,6 +54,11 @@ import {
   addSessionInvokedPendingListener,
   addSessionInvokedRejectedListener,
 } from './listeners/sessionInvoked';
+import {
+  addSessionCanceledFulfilledListener,
+  addSessionCanceledPendingListener,
+  addSessionCanceledRejectedListener,
+} from './listeners/sessionCanceled';
 import {
   addReceivedResultImagesPageFulfilledListener,
   addReceivedResultImagesPageRejectedListener,
@@ -101,18 +106,13 @@ addImageMetadataReceivedRejectedListener();
 addImageUrlsReceivedFulfilledListener();
 addImageUrlsReceivedRejectedListener();
 
-// Invoking on tabs
+// User Invoked
 addUserInvokedCanvasListener();
 addUserInvokedNodesListener();
 addUserInvokedTextToImageListener();
 addUserInvokedImageToImageListener();
 addSessionReadyToInvokeListener();
 
-// Actual session invoking
-addSessionInvokedPendingListener();
-addSessionInvokedFulfilledListener();
-addSessionInvokedRejectedListener();
-
 // Canvas actions
 addCanvasSavedToGalleryListener();
 addCanvasDownloadedAsImageListener();
@@ -130,11 +130,21 @@ addSocketDisconnectedListener();
 addSocketSubscribedListener();
 addSocketUnsubscribedListener();
 
-// Sessions
+// Session Created
 addSessionCreatedPendingListener();
 addSessionCreatedFulfilledListener();
 addSessionCreatedRejectedListener();
 
+// Session Invoked
+addSessionInvokedPendingListener();
+addSessionInvokedFulfilledListener();
+addSessionInvokedRejectedListener();
+
+// Session Canceled
+addSessionCanceledPendingListener();
+addSessionCanceledFulfilledListener();
+addSessionCanceledRejectedListener();
+
 // Gallery pages
 addReceivedResultImagesPageFulfilledListener();
 addReceivedResultImagesPageRejectedListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/sessionCanceled.ts

@@ -0,0 +1,48 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { sessionCanceled } from 'services/thunks/session';
+import { serializeError } from 'serialize-error';
+
+const moduleLog = log.child({ namespace: 'session' });
+
+export const addSessionCanceledPendingListener = () => {
+  startAppListening({
+    actionCreator: sessionCanceled.pending,
+    effect: (action, { getState, dispatch }) => {
+      //
+    },
+  });
+};
+
+export const addSessionCanceledFulfilledListener = () => {
+  startAppListening({
+    actionCreator: sessionCanceled.fulfilled,
+    effect: (action, { getState, dispatch }) => {
+      const { sessionId } = action.meta.arg;
+      moduleLog.debug(
+        { data: { sessionId } },
+        `Session canceled (${sessionId})`
+      );
+    },
+  });
+};
+
+export const addSessionCanceledRejectedListener = () => {
+  startAppListening({
+    actionCreator: sessionCanceled.rejected,
+    effect: (action, { getState, dispatch }) => {
+      if (action.payload) {
+        const { arg, error } = action.payload;
+        moduleLog.error(
+          {
+            data: {
+              arg,
+              error: serializeError(error),
+            },
+          },
+          `Problem canceling session`
+        );
+      }
+    },
+  });
+};