Event logs

Since MSW implements the WebSocket interception mock-first, no actual connections will be established until you explicitly say so. This means that the mocked scenarios won’t appear as network entries in your browser’s DevTools and you won’t be able to observe them there.

MSW provides custom logging for both mocked and original WebSocket connections in the browser.

Reading the log output

The logger will print out various events occurring during the WebSocket communication as collapsed console groups in your browser’s console.

There are four types of logs you can observe:

  1. ▶■×System events;

  2. ⬆⇡Client events;

  3. ⬇⇣Server events.

  4. ⬆⬇Mocked events.

System events

▶ Connection opened

[MSW] 12:34:56 ▶ wss://example.com

Dispatched when the connection is open (i.e. the WebSocket client emits the open event).

× Connection errored

[MSW] 12:34:56 × wss://example.com

Dispatched when the client receives an error (i.e. the WebSocket client emits the error event).

■ Connection closed

[MSW] 12:34:56 ■ wss://example.com

Dispatched when the connection is closed (i.e. the WebSocket client emits the close event).

Message events

Any message, be it outgoing or incoming message, follows the same structure:

        timestamp         sent data
[MSW] 00:00:00.000 ⬆ hello from client 17
                  icon              byte length

Binary messages print a text preview of the sent binary alongside its full byte length:

[MSW] 12:34:56.789 ⬆ Blob(hello world) 11
[MSW] 12:34:56.789 ⬆ ArrayBuffer(preview) 7

Long text messages and text previews are truncated:

[MSW] 12:34:56.789 ⬆ this is a very long stri… 17

You can access the full message by clicking on its console group and inspecting the original MessageEvent instance.

⬆⇡ Outgoing client message

[MSW] 12:34:56.789 ⬆ hello from client 17

A raw message sent by the WebSocket client in your application. If the arrow is dashed, the forwarding of this message event has been prevented in the event handler.

⬆ Outgoing mocked client message

[MSW] 12:34:56.789 ⬆ hello from mock 15

A message sent from the client by the event handler via server.send(). Requires an open server connection.

⬇⇣ Incoming server message

[MSW] 12:34:56.789 ⬇ hello from server 17

An incoming message sent from the original server. Requires an open server connection. If the arrow is dashed, the forwarding of this message event has been prevented in the event handler.

⬇ Incoming mocked server message

[MSW] 12:34:56.789 ⬇ hello from mock 15

A mocked message sent to the client from the event handler via client.send().