fix: simplify websocket logging

mswjs · Oct 2, 2024 · d9a0480 · d9a0480
1 parent ab543ac
commit d9a0480
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 247 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/ws/utils/attachWebSocketLogger.ts b/src/core/ws/utils/attachWebSocketLogger.ts
@@ -10,10 +10,10 @@ import { getMessageLength } from './getMessageLength'
 import { getPublicData } from './getPublicData'
 
 const colors = {
-  blue: '#3b82f6',
-  green: '#22c55e',
-  red: '#ef4444',
-  orange: '#ff6a33',
+  system: '#3b82f6',
+  outgoing: '#22c55e',
+  incoming: '#ef4444',
+  mocked: '#ff6a33',
 }
 
 export function attachWebSocketLogger(
@@ -38,13 +38,6 @@ export function attachWebSocketLogger(
     logConnectionClose(event)
   })
 
-  // Log the events received by the WebSocket client.
-  // "client.socket" references the actual WebSocket instance
-  // so these message events are incoming messages.
-  client.socket.addEventListener('message', (event) => {
-    logIncomingClientMessage(event)
-  })
-
   // Log client errors (connection closures due to errors).
   client.socket.addEventListener('error', (event) => {
     logClientError(event)
@@ -66,7 +59,10 @@ export function attachWebSocketLogger(
           value: client.socket,
         },
       })
-      logIncomingMockedClientMessage(messageEvent)
+
+      queueMicrotask(() => {
+        logIncomingMockedClientMessage(messageEvent)
+      })
 
       return Reflect.apply(target, thisArg, args)
     },
@@ -120,7 +116,7 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(`${getTimestamp()} %c▶%c ${publicUrl}`),
-    `color:${colors.blue}`,
+    `color:${colors.system}`,
     'color:inherit',
   )
   // eslint-disable-next-line no-console
@@ -129,50 +125,35 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
   console.groupEnd()
 }
 
-/**
- * Prints the outgoing client message.
- */
-export async function logOutgoingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
+function logConnectionClose(event: CloseEvent) {
+  const target = event.target as WebSocket
+  const publicUrl = toPublicUrl(target.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↑%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
   // eslint-disable-next-line no-console
   console.groupEnd()
 }
 
-/**
- * Prints the outgoing client message initiated
- * by `server.send()` in the event handler.
- */
-export async function logOutgoingMockedClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
-  const byteLength = getMessageLength(event.data)
-  const publicData = await getPublicData(event.data)
+function logClientError(event: Event) {
+  const socket = event.target as WebSocket
+  const publicUrl = toPublicUrl(socket.url)
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇡%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.system}`,
     'color:inherit',
-    'color:gray;font-weight:normal',
-    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)
@@ -181,23 +162,19 @@ export async function logOutgoingMockedClientMessage(
 }
 
 /**
- * Prings the message received by the WebSocket client.
- * This is fired when the "message" event is dispatched
- * on the actual WebSocket client instance, and translates to
- * the client receiving a message from the server.
+ * Prints the outgoing client message.
  */
-export async function logIncomingClientMessage(
-  event: MessageEvent<WebSocketData>,
-) {
+async function logOutgoingClientMessage(event: MessageEvent<WebSocketData>) {
   const byteLength = getMessageLength(event.data)
   const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇡' : '⬆'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c↓%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.red}`,
+    `color:${colors.outgoing}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -210,9 +187,9 @@ export async function logIncomingClientMessage(
 
 /**
  * Prints the outgoing client message initiated
- * by `client.send()` in the event handler.
+ * by `server.send()` in the event handler.
  */
-export async function logIncomingMockedClientMessage(
+async function logOutgoingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -221,9 +198,9 @@ export async function logIncomingMockedClientMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬆%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.orange}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -234,25 +211,11 @@ export async function logIncomingMockedClientMessage(
   console.groupEnd()
 }
 
-function logConnectionClose(event: CloseEvent) {
-  const target = event.target as WebSocket
-  const publicUrl = toPublicUrl(target.url)
-
-  // eslint-disable-next-line no-console
-  console.groupCollapsed(
-    devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c■%c ${publicUrl}`,
-    ),
-    `color:${colors.blue}`,
-    'color:inherit',
-  )
-  // eslint-disable-next-line no-console
-  console.log(event)
-  // eslint-disable-next-line no-console
-  console.groupEnd()
-}
-
-export async function logIncomingServerMessage(
+/**
+ * Prints the outgoing client message initiated
+ * by `client.send()` in the event handler.
+ */
+async function logIncomingMockedClientMessage(
   event: MessageEvent<WebSocketData>,
 ) {
   const byteLength = getMessageLength(event.data)
@@ -261,9 +224,9 @@ export async function logIncomingServerMessage(
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+      `${getTimestamp({ milliseconds: true })} %c⬇%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.green}`,
+    `color:${colors.mocked}`,
     'color:inherit',
     'color:gray;font-weight:normal',
     'color:inherit;font-weight:inherit',
@@ -274,17 +237,20 @@ export async function logIncomingServerMessage(
   console.groupEnd()
 }
 
-function logClientError(event: Event) {
-  const socket = event.target as WebSocket
-  const publicUrl = toPublicUrl(socket.url)
+async function logIncomingServerMessage(event: MessageEvent<WebSocketData>) {
+  const byteLength = getMessageLength(event.data)
+  const publicData = await getPublicData(event.data)
+  const arrow = event.defaultPrevented ? '⇣' : '⬇'
 
   // eslint-disable-next-line no-console
   console.groupCollapsed(
     devUtils.formatMessage(
-      `${getTimestamp({ milliseconds: true })} %c\u00D7%c ${publicUrl}`,
+      `${getTimestamp({ milliseconds: true })} %c${arrow}%c ${publicData} %c${byteLength}%c`,
     ),
-    `color:${colors.blue}`,
+    `color:${colors.incoming}`,
     'color:inherit',
+    'color:gray;font-weight:normal',
+    'color:inherit;font-weight:inherit',
   )
   // eslint-disable-next-line no-console
   console.log(event)