fix: support erroring unhandled websocket connections

Author: kettanaito

package.json

@@ -241,7 +241,7 @@
     "@bundled-es-modules/statuses": "^1.0.1",
     "@inquirer/confirm": "^5.0.0",
     "@msgpack/msgpack": "^3.1.2",
-    "@mswjs/interceptors": "^0.39.7",
+    "@mswjs/interceptors": "^0.39.8",
     "@open-draft/deferred-promise": "^2.2.0",
     "@types/cookie": "^0.6.0",
     "@types/statuses": "^2.0.4",

pnpm-lock.yaml

@@ -83,13 +83,7 @@ export function defineNetwork(options: DefineNetworkOptions): NetworkApi {
               frame,
               options.onUnhandledFrame || 'bypass',
             ).catch((error) => {
-              /**
-               * @fixme `.errorWith()` should exist on WebSocket frames too
-               * since you can error the connection by dispatching the "error" event.
-               */
-              if (frame.protocol === 'http') {
-                frame.errorWith(error)
-              }
+              frame.errorWith(error)
             })
           },
         })

src/core/new/define-network.ts

@@ -14,6 +14,8 @@ export abstract class BaseNetworkFrame<
     this.events = new Emitter<Events>()
   }
 
+  public abstract errorWith(reason?: unknown): unknown
+
   /**
    * Returns a message to be used when this frame goes unhandled.
    */

src/core/new/frames/base-frame.ts

@@ -154,32 +154,26 @@ async function resolveWebSocketNetworkFrame(
   })
 
   if (eventHandlers.length > 0) {
-    const matches = await Promise.all<boolean>(
+    await Promise.all(
       eventHandlers.map(async (handler) => {
         // Foward the connection data to every WebSocket handler.
         // This is equivalent to dispatching the connection event
         // onto multiple listeners.
-        return handler.run(connection).then((matches) => {
-          if (matches) {
-            flow?.handled?.({ frame, handler })
+        const matches = await handler.run(connection)
 
-            if (!flow?.quiet) {
-              handler.log(connection)
-            }
-          }
+        if (matches) {
+          flow?.handled?.({ frame, handler })
 
-          return matches
-        })
+          if (!flow?.quiet) {
+            handler.log(connection)
+          }
+        }
       }),
     )
 
-    if (matches.every((match) => !match)) {
-      flow?.unhandled?.()
-    }
-
     return
   }
 
+  flow?.unhandled?.()
   frame.passthrough()
-  flow.unhandled?.()
 }

src/core/new/resolve-network-frame.ts

@@ -45,8 +45,9 @@ export class InterceptorSource extends NetworkSource {
      * @fixme Incorrect disciminated union when merging multiple
      * events map in `BatchInterceptor` (results in `Listener<unknown>`).
      */
-    this.#interceptor.on('request', this.#onRequest.bind(this) as any)
-    this.#interceptor.on('response', this.#onResponse.bind(this) as any)
+    this.#interceptor
+      .on('request', this.#onRequest.bind(this) as any)
+      .on('response', this.#onResponse.bind(this) as any)
 
     this.#interceptor.on(
       'connection',
@@ -163,6 +164,29 @@ class InterceptorWebSocketNetworkFrame extends WebSocketNetworkFrame {
     })
   }
 
+  public errorWith(reason?: unknown): void {
+    if (reason instanceof Error) {
+      const { client } = this.data.connection
+
+      /**
+       * Use `client.errorWith(reason)` in the future.
+       * @see https://github.com/mswjs/interceptors/issues/747
+       */
+      const errorEvent = new Event('error')
+      Object.defineProperty(errorEvent, 'cause', {
+        enumerable: true,
+        configurable: false,
+        value: reason,
+      })
+
+      /**
+       * @fixme So this all is fine but it doesn't fire at the right time.
+       * WS interceptor does NOT await listeners.
+       */
+      client.socket.dispatchEvent(errorEvent)
+    }
+  }
+
   public passthrough() {
     this.data.connection.server.connect()
   }

src/core/new/sources/interceptor-source.ts

@@ -12,7 +12,7 @@ export interface SetupRemoteServerListenOptions extends SharedOptions {
   port: number
 }
 
-interface SetupRemoteServer extends NetworkHandlersApi<AnyHandler> {
+interface SetupRemoteServer extends NetworkHandlersApi {
   listen(options: SetupRemoteServerListenOptions): Promise<void>
   close(): Promise<void>
   boundary<Args extends Array<any>, R>(

src/node/setup-remote-server.ts

@@ -40,7 +40,7 @@ export class SetupServerApi implements SetupServer {
   public restoreHandlers: SetupServerCommon['restoreHandlers']
   public listHandlers: SetupServerCommon['listHandlers']
 
-  #network: NetworkApi<AnyHandler>
+  #network: NetworkApi
   #handlersController: AsyncHandlersController
   #currentHandlersProxy?: ReversibleProxy<HandlersController['currentHandlers']>
   #listenOptions?: Partial<ListenOptions>
@@ -65,10 +65,6 @@ export class SetupServerApi implements SetupServer {
       }),
     })
 
-    this.#network.events.on('log', (event) => {
-      event.preventDefault()
-    })
-
     /**
      * @fixme This expects a readonly emitter (subset of methods).
      */

src/node/setup-server.ts

@@ -39,12 +39,12 @@ it(
 
     expect(console.error).toHaveBeenCalledWith(
       `\
-[MSW] Error: intercepted a request without a matching request handler:
+[MSW] Error: intercepted a WebSocket connection without a matching event handler:
 
-  • GET wss://localhost:4321/
+  • wss://localhost:4321/
 
-If you still wish to intercept this unhandled request, please create a request handler for it.
-Read more: https://mswjs.io/docs/http/intercepting-requests`,
+If you still wish to intercept this unhandled connection, please create an event handler for it.
+Read more: https://mswjs.io/docs/websocket`,
     )
 
     expect(errorListener).toHaveBeenCalledOnce()