feat: log raw incoming server events

package.json

@@ -125,7 +125,7 @@
     "@bundled-es-modules/statuses": "^1.0.1",
     "@inquirer/confirm": "^3.0.0",
     "@mswjs/cookies": "^1.1.0",
-    "@mswjs/interceptors": "^0.26.14",
+    "@mswjs/interceptors": "^0.26.15",
     "@open-draft/until": "^2.1.0",
     "@types/cookie": "^0.6.0",
     "@types/statuses": "^2.0.4",

src/core/ws/utils/log.ts

@@ -10,15 +10,15 @@ import { getMessageLength } from './getMessageLength'
 import { getPublicData } from './getPublicData'
 
 export function attachLogger(connection: WebSocketConnectionData): void {
-  const { client } = connection
+  const { client, server } = connection
 
   logConnectionOpen(client)
 
   // Log the events sent from the WebSocket client.
   // WebSocket client connection object is written from the
   // server's perspective so these message events are outgoing.
   client.addEventListener('message', (event) => {
-    logOutgoingMessage(event)
+    logOutgoingClientMessage(event)
   })
 
   client.addEventListener('close', (event) => {
@@ -29,8 +29,18 @@ export function attachLogger(connection: WebSocketConnectionData): void {
   // "client.socket" references the actual WebSocket instance
   // so these message events are incoming messages.
   client.socket.addEventListener('message', (event) => {
-    logIncomingMessage(event)
+    logIncomingClientMessage(event)
   })
+
+  server.addEventListener(
+    'open',
+    () => {
+      server.addEventListener('message', (event) => {
+        logIncomingServerMessage(event)
+      })
+    },
+    { once: true },
+  )
 }
 
 /**
@@ -54,7 +64,9 @@ export function logConnectionOpen(client: WebSocketClientConnection) {
 /**
  * Prints the outgoing client message.
  */
-export async function logOutgoingMessage(event: MessageEvent<WebSocketData>) {
+export async function logOutgoingClientMessage(
+  event: MessageEvent<WebSocketData>,
+) {
   const byteLength = getMessageLength(event.data)
   const publicData = await getPublicData(event.data)
 
@@ -71,7 +83,9 @@ export async function logOutgoingMessage(event: MessageEvent<WebSocketData>) {
   console.groupEnd()
 }
 
-export async function logIncomingMessage(event: MessageEvent<WebSocketData>) {
+export async function logIncomingClientMessage(
+  event: MessageEvent<WebSocketData>,
+) {
   const byteLength = getMessageLength(event.data)
   const publicData = await getPublicData(event.data)
 
@@ -102,3 +116,22 @@ function logConnectionClose(event: CloseEvent) {
   console.log(event)
   console.groupEnd()
 }
+
+export async function logIncomingServerMessage(
+  event: MessageEvent<WebSocketData>,
+) {
+  const byteLength = getMessageLength(event.data)
+  const publicData = await getPublicData(event.data)
+
+  console.groupCollapsed(
+    devUtils.formatMessage(
+      `${getTimestamp({ milliseconds: true })} %c⇣%c ${publicData} %c${byteLength}%c`,
+    ),
+    'color:orangered',
+    'color:inherit',
+    'color:gray;font-weight:normal',
+    'color:inherit;font-weight:inherit',
+  )
+  console.log(event)
+  console.groupEnd()
+}

test/browser/ws-api/ws.logging.browser.test.ts

@@ -329,6 +329,60 @@ test('logs incoming client events', async ({
   })
 })
 
+test('logs raw incoming server events', async ({
+  loadExample,
+  page,
+  spyOnConsole,
+}) => {
+  const consoleSpy = spyOnConsole()
+  await loadExample(require.resolve('./ws.runtime.js'), {
+    skipActivation: true,
+  })
+
+  server.addListener('connection', (ws) => {
+    ws.send('hello from server')
+  })
+
+  await page.evaluate(async (url) => {
+    const { setupWorker, ws } = window.msw
+    const api = ws.link(url)
+    const worker = setupWorker(
+      api.on('connection', ({ client, server }) => {
+        server.connect()
+        client.addEventListener('message', (event) => {
+          server.send(event.data)
+        })
+        server.addEventListener('message', (event) => {
+          event.preventDefault()
+          // This is the only data the client will receive
+          // but we should still print the raw server message.
+          client.send('intercepted server event')
+        })
+      }),
+    )
+    await worker.start()
+  }, server.url)
+
+  await page.evaluate((url) => {
+    new WebSocket(url)
+  }, server.url)
+
+  await waitFor(() => {
+    expect(consoleSpy.get('raw')!.get('startGroupCollapsed')).toEqual(
+      expect.arrayContaining([
+        // Raw server message.
+        expect.stringMatching(
+          /^\[MSW\] \d{2}:\d{2}:\d{2}\.\d{3} %c⇣%c hello from server %c17%c color:orangered color:inherit color:gray;font-weight:normal color:inherit;font-weight:inherit$/,
+        ),
+        // The actual message the client received (mocked).
+        expect.stringMatching(
+          /^\[MSW\] \d{2}:\d{2}:\d{2}\.\d{3} %c↓%c intercepted server event %c24%c color:red color:inherit color:gray;font-weight:normal color:inherit;font-weight:inherit$/,
+        ),
+      ]),
+    )
+  })
+})
+
 test('logs the close event initiated by the client', async ({
   loadExample,
   page,