feat(ui): handle enriched events

Author: psychedelicious

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

@@ -39,13 +39,21 @@ export const addInvocationErrorEventListener = (startAppListening: AppStartListe
     actionCreator: socketInvocationError,
     effect: (action, { getState }) => {
       log.error(action.payload, `Invocation error (${action.payload.data.node.type})`);
-      const { source_node_id, error_type, graph_execution_state_id } = action.payload.data;
+      const { source_node_id, error_type, error_message, error_traceback, graph_execution_state_id } =
+        action.payload.data;
       const nes = deepClone($nodeExecutionStates.get()[source_node_id]);
       if (nes) {
         nes.status = zNodeStatus.enum.FAILED;
-        nes.error = action.payload.data.error;
         nes.progress = null;
         nes.progressImage = null;
+
+        if (error_type && error_message && error_traceback) {
+          nes.error = {
+            error_type,
+            error_message,
+            error_traceback,
+          };
+        }
         upsertExecutionState(nes.nodeId, nes);
       }
 

invokeai/frontend/web/src/features/nodes/types/invocation.ts

@@ -70,13 +70,18 @@ export const isInvocationNodeData = (node?: AnyNodeData | null): node is Invocat
 
 // #region NodeExecutionState
 export const zNodeStatus = z.enum(['PENDING', 'IN_PROGRESS', 'COMPLETED', 'FAILED']);
+const zNodeError = z.object({
+  error_type: z.string(),
+  error_message: z.string(),
+  error_traceback: z.string(),
+});
 const zNodeExecutionState = z.object({
   nodeId: z.string().trim().min(1),
   status: zNodeStatus,
   progress: z.number().nullable(),
   progressImage: zProgressImage.nullable(),
-  error: z.string().nullable(),
   outputs: z.array(z.any()),
+  error: zNodeError.nullable(),
 });
 export type NodeExecutionState = z.infer<typeof zNodeExecutionState>;
 // #endregion

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx

@@ -76,7 +76,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
           </Button>
         </ButtonGroup>
       </Flex>
-      {queueItem?.error && (
+      {(queueItem?.error_traceback || queueItem?.error_message) && (
         <Flex
           layerStyle="second"
           p={3}
@@ -89,7 +89,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
           <Heading size="sm" color="error.400">
             {t('common.error')}
           </Heading>
-          <pre>{queueItem.error}</pre>
+          <pre>{queueItem?.error_traceback ?? queueItem?.error_message}</pre>
         </Flex>
       )}
       <Flex layerStyle="second" h={512} w="full" borderRadius="base" alignItems="center" justifyContent="center">

invokeai/frontend/web/src/services/events/types.ts

@@ -116,7 +116,8 @@ export type InvocationErrorEvent = {
   node: BaseNode;
   source_node_id: string;
   error_type: string;
-  error: string;
+  error_message: string;
+  error_traceback: string;
 };
 
 /**
@@ -187,7 +188,9 @@ export type QueueItemStatusChangedEvent = {
     batch_id: string;
     session_id: string;
     status: components['schemas']['SessionQueueItemDTO']['status'];
-    error: string | undefined;
+    error_type?: string | null;
+    error_message?: string | null;
+    error_traceback?: string | null;
     created_at: string;
     updated_at: string;
     started_at: string | undefined;