feat(ui): logging cleanup

- simplify access to app logger - spruce up and make consistent log format - improve messaging
2024-08-30 20:32:17 +00:00 · 2023-07-22 21:03:56 +10:00
parent 907ff165be
commit 75863e7181
65 changed files with 480 additions and 573 deletions
--- a/invokeai/frontend/web/src/services/events/actions.ts
+++ b/invokeai/frontend/web/src/services/events/actions.ts
@ -9,11 +9,6 @@ import {
  ModelLoadStartedEvent,
 } from 'services/events/types';

-// Common socket action payload data
-type BaseSocketPayload = {
-  timestamp: string;
-};
-
 // Create actions for each socket
 // Middleware and redux can then respond to them as needed

@ -22,30 +17,24 @@ type BaseSocketPayload = {
 *
 * Do not use. Only for use in middleware.
 */
-export const socketConnected = createAction<BaseSocketPayload>(
-  'socket/socketConnected'
-);
+export const socketConnected = createAction('socket/socketConnected');

 /**
 * App-level Socket.IO Connected
 */
-export const appSocketConnected = createAction<BaseSocketPayload>(
-  'socket/appSocketConnected'
-);
+export const appSocketConnected = createAction('socket/appSocketConnected');

 /**
 * Socket.IO Disconnect
 *
 * Do not use. Only for use in middleware.
 */
-export const socketDisconnected = createAction<BaseSocketPayload>(
-  'socket/socketDisconnected'
-);
+export const socketDisconnected = createAction('socket/socketDisconnected');

 /**
 * App-level Socket.IO Disconnected
 */
-export const appSocketDisconnected = createAction<BaseSocketPayload>(
+export const appSocketDisconnected = createAction(
  'socket/appSocketDisconnected'
 );

@ -54,145 +43,141 @@ export const appSocketDisconnected = createAction<BaseSocketPayload>(
 *
 * Do not use. Only for use in middleware.
 */
-export const socketSubscribed = createAction<
-  BaseSocketPayload & { sessionId: string; boardId: string | undefined }
->('socket/socketSubscribed');
+export const socketSubscribed = createAction<{
+  sessionId: string;
+}>('socket/socketSubscribed');

 /**
 * App-level Socket.IO Subscribed
 */
-export const appSocketSubscribed = createAction<
-  BaseSocketPayload & { sessionId: string; boardId: string | undefined }
->('socket/appSocketSubscribed');
+export const appSocketSubscribed = createAction<{
+  sessionId: string;
+}>('socket/appSocketSubscribed');

 /**
 * Socket.IO Unsubscribed
 *
 * Do not use. Only for use in middleware.
 */
-export const socketUnsubscribed = createAction<
-  BaseSocketPayload & { sessionId: string }
->('socket/socketUnsubscribed');
+export const socketUnsubscribed = createAction<{ sessionId: string }>(
+  'socket/socketUnsubscribed'
+);

 /**
 * App-level Socket.IO Unsubscribed
 */
-export const appSocketUnsubscribed = createAction<
-  BaseSocketPayload & { sessionId: string }
->('socket/appSocketUnsubscribed');
+export const appSocketUnsubscribed = createAction<{ sessionId: string }>(
+  'socket/appSocketUnsubscribed'
+);

 /**
 * Socket.IO Invocation Started
 *
 * Do not use. Only for use in middleware.
 */
-export const socketInvocationStarted = createAction<
-  BaseSocketPayload & { data: InvocationStartedEvent }
->('socket/socketInvocationStarted');
+export const socketInvocationStarted = createAction<{
+  data: InvocationStartedEvent;
+}>('socket/socketInvocationStarted');

 /**
 * App-level Socket.IO Invocation Started
 */
-export const appSocketInvocationStarted = createAction<
-  BaseSocketPayload & { data: InvocationStartedEvent }
->('socket/appSocketInvocationStarted');
+export const appSocketInvocationStarted = createAction<{
+  data: InvocationStartedEvent;
+}>('socket/appSocketInvocationStarted');

 /**
 * Socket.IO Invocation Complete
 *
 * Do not use. Only for use in middleware.
 */
-export const socketInvocationComplete = createAction<
-  BaseSocketPayload & {
-    data: InvocationCompleteEvent;
-  }
->('socket/socketInvocationComplete');
+export const socketInvocationComplete = createAction<{
+  data: InvocationCompleteEvent;
+}>('socket/socketInvocationComplete');

 /**
 * App-level Socket.IO Invocation Complete
 */
-export const appSocketInvocationComplete = createAction<
-  BaseSocketPayload & {
-    data: InvocationCompleteEvent;
-  }
->('socket/appSocketInvocationComplete');
+export const appSocketInvocationComplete = createAction<{
+  data: InvocationCompleteEvent;
+}>('socket/appSocketInvocationComplete');

 /**
 * Socket.IO Invocation Error
 *
 * Do not use. Only for use in middleware.
 */
-export const socketInvocationError = createAction<
-  BaseSocketPayload & { data: InvocationErrorEvent }
->('socket/socketInvocationError');
+export const socketInvocationError = createAction<{
+  data: InvocationErrorEvent;
+}>('socket/socketInvocationError');

 /**
 * App-level Socket.IO Invocation Error
 */
-export const appSocketInvocationError = createAction<
-  BaseSocketPayload & { data: InvocationErrorEvent }
->('socket/appSocketInvocationError');
+export const appSocketInvocationError = createAction<{
+  data: InvocationErrorEvent;
+}>('socket/appSocketInvocationError');

 /**
 * Socket.IO Graph Execution State Complete
 *
 * Do not use. Only for use in middleware.
 */
-export const socketGraphExecutionStateComplete = createAction<
-  BaseSocketPayload & { data: GraphExecutionStateCompleteEvent }
->('socket/socketGraphExecutionStateComplete');
+export const socketGraphExecutionStateComplete = createAction<{
+  data: GraphExecutionStateCompleteEvent;
+}>('socket/socketGraphExecutionStateComplete');

 /**
 * App-level Socket.IO Graph Execution State Complete
 */
-export const appSocketGraphExecutionStateComplete = createAction<
-  BaseSocketPayload & { data: GraphExecutionStateCompleteEvent }
->('socket/appSocketGraphExecutionStateComplete');
+export const appSocketGraphExecutionStateComplete = createAction<{
+  data: GraphExecutionStateCompleteEvent;
+}>('socket/appSocketGraphExecutionStateComplete');

 /**
 * Socket.IO Generator Progress
 *
 * Do not use. Only for use in middleware.
 */
-export const socketGeneratorProgress = createAction<
-  BaseSocketPayload & { data: GeneratorProgressEvent }
->('socket/socketGeneratorProgress');
+export const socketGeneratorProgress = createAction<{
+  data: GeneratorProgressEvent;
+}>('socket/socketGeneratorProgress');

 /**
 * App-level Socket.IO Generator Progress
 */
-export const appSocketGeneratorProgress = createAction<
-  BaseSocketPayload & { data: GeneratorProgressEvent }
->('socket/appSocketGeneratorProgress');
+export const appSocketGeneratorProgress = createAction<{
+  data: GeneratorProgressEvent;
+}>('socket/appSocketGeneratorProgress');

 /**
 * Socket.IO Model Load Started
 *
 * Do not use. Only for use in middleware.
 */
-export const socketModelLoadStarted = createAction<
-  BaseSocketPayload & { data: ModelLoadStartedEvent }
->('socket/socketModelLoadStarted');
+export const socketModelLoadStarted = createAction<{
+  data: ModelLoadStartedEvent;
+}>('socket/socketModelLoadStarted');

 /**
 * App-level Model Load Started
 */
-export const appSocketModelLoadStarted = createAction<
-  BaseSocketPayload & { data: ModelLoadStartedEvent }
->('socket/appSocketModelLoadStarted');
+export const appSocketModelLoadStarted = createAction<{
+  data: ModelLoadStartedEvent;
+}>('socket/appSocketModelLoadStarted');

 /**
 * Socket.IO Model Load Started
 *
 * Do not use. Only for use in middleware.
 */
-export const socketModelLoadCompleted = createAction<
-  BaseSocketPayload & { data: ModelLoadCompletedEvent }
->('socket/socketModelLoadCompleted');
+export const socketModelLoadCompleted = createAction<{
+  data: ModelLoadCompletedEvent;
+}>('socket/socketModelLoadCompleted');

 /**
 * App-level Model Load Completed
 */
-export const appSocketModelLoadCompleted = createAction<
-  BaseSocketPayload & { data: ModelLoadCompletedEvent }
->('socket/appSocketModelLoadCompleted');
+export const appSocketModelLoadCompleted = createAction<{
+  data: ModelLoadCompletedEvent;
+}>('socket/appSocketModelLoadCompleted');
--- a/invokeai/frontend/web/src/services/events/middleware.ts
+++ b/invokeai/frontend/web/src/services/events/middleware.ts
@ -1,20 +1,14 @@
 import { Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
-import { Socket, io } from 'socket.io-client';
-
 import { AppThunkDispatch, RootState } from 'app/store/store';
-import { getTimestamp } from 'common/util/getTimestamp';
+import { $authToken, $baseUrl } from 'services/api/client';
 import { sessionCreated } from 'services/api/thunks/session';
 import {
  ClientToServerEvents,
  ServerToClientEvents,
 } from 'services/events/types';
-import { socketSubscribed, socketUnsubscribed } from './actions';
-// import { OpenAPI } from 'services/api/types';
-import { log } from 'app/logging/useLogger';
-import { $authToken, $baseUrl } from 'services/api/client';
 import { setEventListeners } from 'services/events/util/setEventListeners';
-
-const socketioLog = log.child({ namespace: 'socketio' });
+import { Socket, io } from 'socket.io-client';
+import { socketSubscribed, socketUnsubscribed } from './actions';

 export const socketMiddleware = () => {
  let areListenersSet = false;
@ -58,7 +52,7 @@ export const socketMiddleware = () => {
      // Set listeners for `connect` and `disconnect` events once
      // Must happen in middleware to get access to `dispatch`
      if (!areListenersSet) {
-        setEventListeners({ storeApi, socket, log: socketioLog });
+        setEventListeners({ storeApi, socket });

        areListenersSet = true;

@ -77,7 +71,6 @@ export const socketMiddleware = () => {
          dispatch(
            socketUnsubscribed({
              sessionId: oldSessionId,
-              timestamp: getTimestamp(),
            })
          );
        }
@ -87,8 +80,6 @@ export const socketMiddleware = () => {
        dispatch(
          socketSubscribed({
            sessionId: sessionId,
-            timestamp: getTimestamp(),
-            boardId: getState().gallery.selectedBoardId,
          })
        );
      }
--- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts
+++ b/invokeai/frontend/web/src/services/events/util/setEventListeners.ts
@ -1,42 +1,40 @@
 import { MiddlewareAPI } from '@reduxjs/toolkit';
+import { logger } from 'app/logging/logger';
 import { AppDispatch, RootState } from 'app/store/store';
-import { getTimestamp } from 'common/util/getTimestamp';
 import { Socket } from 'socket.io-client';
+import { makeToast } from '../../../app/components/Toaster';
+import { addToast } from '../../../features/system/store/systemSlice';
 import {
+  socketConnected,
+  socketDisconnected,
  socketGeneratorProgress,
  socketGraphExecutionStateComplete,
  socketInvocationComplete,
  socketInvocationError,
  socketInvocationStarted,
-  socketConnected,
-  socketDisconnected,
-  socketSubscribed,
-  socketModelLoadStarted,
  socketModelLoadCompleted,
+  socketModelLoadStarted,
+  socketSubscribed,
 } from '../actions';
 import { ClientToServerEvents, ServerToClientEvents } from '../types';
-import { Logger } from 'roarr';
-import { JsonObject } from 'roarr/dist/types';
-import { makeToast } from '../../../app/components/Toaster';
-import { addToast } from '../../../features/system/store/systemSlice';

 type SetEventListenersArg = {
  socket: Socket<ServerToClientEvents, ClientToServerEvents>;
  storeApi: MiddlewareAPI<AppDispatch, RootState>;
-  log: Logger<JsonObject>;
 };

 export const setEventListeners = (arg: SetEventListenersArg) => {
-  const { socket, storeApi, log } = arg;
+  const { socket, storeApi } = arg;
  const { dispatch, getState } = storeApi;

  /**
   * Connect
   */
  socket.on('connect', () => {
+    const log = logger('socketio');
    log.debug('Connected');

-    dispatch(socketConnected({ timestamp: getTimestamp() }));
+    dispatch(socketConnected());

    const { sessionId } = getState().system;

@ -45,8 +43,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
      dispatch(
        socketSubscribed({
          sessionId,
-          timestamp: getTimestamp(),
-          boardId: getState().gallery.selectedBoardId,
        })
      );
    }
@ -73,28 +69,28 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
   * Disconnect
   */
  socket.on('disconnect', () => {
-    dispatch(socketDisconnected({ timestamp: getTimestamp() }));
+    dispatch(socketDisconnected());
  });

  /**
   * Invocation started
   */
  socket.on('invocation_started', (data) => {
-    dispatch(socketInvocationStarted({ data, timestamp: getTimestamp() }));
+    dispatch(socketInvocationStarted({ data }));
  });

  /**
   * Generator progress
   */
  socket.on('generator_progress', (data) => {
-    dispatch(socketGeneratorProgress({ data, timestamp: getTimestamp() }));
+    dispatch(socketGeneratorProgress({ data }));
  });

  /**
   * Invocation error
   */
  socket.on('invocation_error', (data) => {
-    dispatch(socketInvocationError({ data, timestamp: getTimestamp() }));
+    dispatch(socketInvocationError({ data }));
  });

  /**
@ -104,7 +100,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    dispatch(
      socketInvocationComplete({
        data,
-        timestamp: getTimestamp(),
      })
    );
  });
@ -116,7 +111,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    dispatch(
      socketGraphExecutionStateComplete({
        data,
-        timestamp: getTimestamp(),
      })
    );
  });
@ -128,7 +122,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    dispatch(
      socketModelLoadStarted({
        data,
-        timestamp: getTimestamp(),
      })
    );
  });
@ -140,7 +133,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    dispatch(
      socketModelLoadCompleted({
        data,
-        timestamp: getTimestamp(),
      })
    );
  });