Improve Logging (#1519)

Improve Logging

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/render-page/window-post-message-communicator/editor-to-renderer-communicator.ts

@@ -6,6 +6,7 @@
 
 import { WindowPostMessageCommunicator } from './window-post-message-communicator'
 import { CommunicationMessages, EditorToRendererMessageType, RendererToEditorMessageType } from './rendering-message'
+import { Logger } from '../../../utils/logger'
 
 /**
  * The communicator that is used to send messages from the editor to the renderer.
@@ -15,7 +16,7 @@ export class EditorToRendererCommunicator extends WindowPostMessageCommunicator<
   EditorToRendererMessageType,
   CommunicationMessages
 > {
-  protected generateLogIdentifier(): string {
-    return 'E=>R'
+  protected createLogger(): Logger {
+    return new Logger('EditorToRendererCommunicator')
   }
 }

src/components/render-page/window-post-message-communicator/renderer-to-editor-communicator.ts

@@ -6,6 +6,7 @@
 
 import { WindowPostMessageCommunicator } from './window-post-message-communicator'
 import { CommunicationMessages, EditorToRendererMessageType, RendererToEditorMessageType } from './rendering-message'
+import { Logger } from '../../../utils/logger'
 
 /**
  * The communicator that is used to send messages from the renderer to the editor.
@@ -15,7 +16,7 @@ export class RendererToEditorCommunicator extends WindowPostMessageCommunicator<
   RendererToEditorMessageType,
   CommunicationMessages
 > {
-  protected generateLogIdentifier(): string {
-    return 'E<=R'
+  protected createLogger(): Logger {
+    return new Logger('RendererToEditorCommunicator')
   }
 }

src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { Logger } from '../../../utils/logger'
+
 /**
  * Error that will be thrown if a message couldn't be sent.
  */
@@ -33,12 +35,16 @@ export abstract class WindowPostMessageCommunicator<
   private targetOrigin?: string
   private communicationEnabled: boolean
   private handlers: HandlerMap<MESSAGES, RECEIVE_TYPE> = {}
+  private log
 
   constructor() {
     window.addEventListener('message', this.handleEvent.bind(this))
     this.communicationEnabled = false
+    this.log = this.createLogger()
   }
 
+  protected abstract createLogger(): Logger
+
   /**
    * Removes the message event listener from the {@link window}
    */
@@ -91,7 +97,7 @@ export abstract class WindowPostMessageCommunicator<
         `Communication isn't enabled. Maybe the other side is not ready?\nMessage was: ${JSON.stringify(message)}`
       )
     }
-    console.debug('[WPMC ' + this.generateLogIdentifier() + '] Sent event', message)
+    this.log.debug('Sent event', message)
     this.messageTarget.postMessage(message, this.targetOrigin)
   }
 
@@ -106,12 +112,6 @@ export abstract class WindowPostMessageCommunicator<
     this.handlers[messageType] = handler as Handler<MESSAGES, RECEIVE_TYPE>
   }
 
-  /**
-   * Generates a unique identifier that helps to separate log messages in the console from different communicators.
-   * @return the identifier
-   */
-  protected abstract generateLogIdentifier(): string
-
   /**
    * Receives the message events and calls the handler that is mapped to the correct type.
    *
@@ -125,7 +125,7 @@ export abstract class WindowPostMessageCommunicator<
     if (!handler) {
       return true
     }
-    console.debug('[WPMC ' + this.generateLogIdentifier() + '] Received event ', data)
+    this.log.debug('Received event', data)
     handler(data as Extract<MESSAGES, PostMessage<RECEIVE_TYPE>>)
     return false
   }