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`
+        );
+      }
+    },
+  });
+};

invokeai/frontend/web/src/services/thunks/gallery.ts

@@ -1,4 +1,3 @@
-import { log } from 'app/logging/useLogger';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { ImagesService, PaginatedResults_ImageDTO_ } from 'services/api';
 

invokeai/frontend/web/src/services/thunks/session.ts

@@ -49,7 +49,7 @@ const isErrorWithStatus = (error: unknown): error is { status: number } =>
  * `SessionsService.invokeSession()` thunk
  */
 export const sessionInvoked = createAppAsyncThunk<
-  any,
+  void,
   SessionInvokedArg,
   SessionInvokedThunkConfig
 >('api/sessionInvoked', async (arg, { rejectWithValue }) => {
@@ -72,24 +72,28 @@ export const sessionInvoked = createAppAsyncThunk<
 type SessionCanceledArg = Parameters<
   (typeof SessionsService)['cancelSessionInvoke']
 >[0];
-
+type SessionCanceledThunkConfig = {
+  rejectValue: {
+    arg: SessionCanceledArg;
+    error: unknown;
+  };
+};
 /**
  * `SessionsService.cancelSession()` thunk
  */
-export const sessionCanceled = createAppAsyncThunk(
-  'api/sessionCanceled',
-  async (arg: SessionCanceledArg, _thunkApi) => {
-    const { sessionId } = arg;
+export const sessionCanceled = createAppAsyncThunk<
+  void,
+  SessionCanceledArg,
+  SessionCanceledThunkConfig
+>('api/sessionCanceled', async (arg: SessionCanceledArg, _thunkApi) => {
+  const { sessionId } = arg;
 
-    const response = await SessionsService.cancelSessionInvoke({
-      sessionId,
-    });
+  const response = await SessionsService.cancelSessionInvoke({
+    sessionId,
+  });
 
-    sessionLog.info({ arg, response }, `Session canceled (${sessionId})`);
-
-    return response;
-  }
-);
+  return response;
+});
 
 type SessionsListedArg = Parameters<
   (typeof SessionsService)['listSessions']