@depup/msw 2.13.2-depup.0 → 2.15.0-depup.6

package/src/core/experimental/define-network.ts

@@ -1,17 +1,18 @@
 import { invariant } from 'outvariant'
 import { Emitter, type DefaultEventMap } from 'rettime'
 import {
-  type NetworkSource,
+  NetworkSource,
   type ExtractSourceEvents,
 } from './sources/network-source'
 import { type NetworkFrameResolutionContext } from './frames/network-frame'
 import { type UnhandledFrameHandle } from './on-unhandled-frame'
 import {
-  AnyHandler,
   HandlersController,
   InMemoryHandlersController,
+  type AnyHandler,
 } from './handlers-controller'
 import { toReadonlyArray } from '../utils/internal/toReadonlyArray'
+import { Disposable } from '../utils/internal/Disposable'
 
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
   k: infer I,
@@ -47,8 +48,9 @@ export interface DefineNetworkOptions<
   onUnhandledFrame?: UnhandledFrameHandle
 }
 
-export interface NetworkApi<Sources extends Array<NetworkSource<any>>>
-  extends NetworkHandlersApi {
+export interface NetworkApi<
+  Sources extends Array<NetworkSource<any>>,
+> extends NetworkHandlersApi {
   readyState: NetworkReadyState
   /**
    * Enable the network interception and handling.
@@ -111,6 +113,7 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
 ): NetworkApi<Sources> {
   let readyState: NetworkReadyState = NetworkReadyState.DISABLED
   const events = new Emitter<MergeEventMaps<Sources>>()
+  const disposable = new Disposable()
 
   const deriveHandlersController = (
     handlers: DefineNetworkOptions<Sources>['handlers'],
@@ -129,7 +132,6 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
    * certain setup APIs, like `setupServer`, don't await `.enable` (`.listen`).
    */
   let handlersController = deriveHandlersController(resolvedOptions.handlers)
-  let listenersController: AbortController
 
   return {
     get readyState() {
@@ -137,7 +139,10 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
     },
     events,
     configure(options) {
-      invariant(readyState === NetworkReadyState.DISABLED, '')
+      invariant(
+        readyState === NetworkReadyState.DISABLED,
+        'Failed to call "configure()" on the network: cannot configure an already enabled network.',
+      )
 
       if (
         options.handlers &&
@@ -157,13 +162,41 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
         'Failed to call "enable" on the network: already enabled',
       )
 
-      listenersController = new AbortController()
       readyState = NetworkReadyState.ENABLED
 
+      /**
+       * @note Use a session object scoped to the current "enable()"
+       * to prevent "frame.events" listeners from surviving across enable/disable cycles.
+       * @see The note about `AbortController` below.
+       */
+      const session = { active: true }
+      disposable['subscriptions'].push(() => {
+        session.active = false
+      })
+
       const result = resolvedOptions.sources.map((source) => {
+        /**
+         * @note Preemptively disable the network source before enabling.
+         * This intentionally calls only the prototype method that clears the
+         * event listeners and nothing else. This prevents the "frame" listeners
+         * from accumulating across enable/disable in case the source is a singleton.
+         */
+        NetworkSource.prototype.disable.call(source)
+
         source.on('frame', async ({ frame }) => {
-          frame.events.on('*', (event) => events.emit(event), {
-            signal: listenersController.signal,
+          frame.events.on('*', (event) => {
+            /**
+             * @note Prevent event forwarding manually and not via an AbortController
+             * because certain runtimes, like Cloudflare, throw when referencing an
+             * AbortController created in a different context. Bear in mind that the frame
+             * events run in the patched request client context while the AbortController
+             * is created outside, in the "defineNetwork" closure, which is a test context.
+             */
+            if (!session.active) {
+              return
+            }
+
+            events.emit(event)
           })
 
           const handlers = frame.getHandlers(handlersController)
@@ -188,8 +221,8 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
         'Failed to call "disable" on the network: already disabled',
       )
 
-      listenersController.abort()
       readyState = NetworkReadyState.DISABLED
+      disposable.dispose()
 
       return colorlessPromiseAll(
         resolvedOptions.sources.map((source) => source.disable()),
@@ -202,11 +235,7 @@ export function defineNetwork<Sources extends Array<NetworkSource<any>>>(
       handlersController.reset(handlers)
     },
     restoreHandlers() {
-      for (const handler of handlersController.currentHandlers()) {
-        if ('isUsed' in handler) {
-          handler.isUsed = false
-        }
-      }
+      handlersController.restore()
     },
     listHandlers() {
       return toReadonlyArray(handlersController.currentHandlers())

package/src/core/experimental/frames/http-frame.test.ts

@@ -2,8 +2,10 @@ import { http } from '../../http'
 import { graphql } from '../../graphql'
 import { ws } from '../../ws'
 import { bypass } from '../../bypass'
-import { HttpNetworkFrame, HttpNetworkFrameEventMap } from './http-frame'
-import { InMemoryHandlersController } from '#core/experimental/handlers-controller'
+import type { HttpNetworkFrameEventMap } from './http-frame'
+import { HttpNetworkFrame } from './http-frame'
+import { InMemoryHandlersController } from '../../experimental/handlers-controller'
+import { getSiblingHandlers } from '../../utils/internal/attachSiblingHandlers'
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -45,6 +47,9 @@ it('filters only request type handlers', async () => {
   const webSocketHandlers = [
     ws.link('ws://localhost').addEventListener('connection', () => {}),
   ]
+  const webSocketSiblingHandlers = webSocketHandlers.flatMap((handler) =>
+    getSiblingHandlers(handler),
+  )
 
   const controller = new InMemoryHandlersController([
     ...httpHandlers,
@@ -54,6 +59,7 @@ it('filters only request type handlers', async () => {
 
   expect(frame.getHandlers(controller)).toEqual([
     ...httpHandlers,
+    ...webSocketSiblingHandlers,
     ...graphqlHandlers,
   ])
   expect(frame.getHandlers(new InMemoryHandlersController([]))).toEqual([])

package/src/core/experimental/frames/http-frame.ts

@@ -1,7 +1,10 @@
 import { TypedEvent } from 'rettime'
 import { until } from 'until-async'
 import { createRequestId } from '@mswjs/interceptors'
-import { NetworkFrame, NetworkFrameResolutionContext } from './network-frame'
+import {
+  NetworkFrame,
+  type NetworkFrameResolutionContext,
+} from './network-frame'
 import { toPublicUrl } from '../../utils/request/toPublicUrl'
 import { executeHandlers } from '../../utils/executeHandlers'
 import { storeResponseCookies } from '../../utils/request/storeResponseCookies'
@@ -11,7 +14,8 @@ import {
   executeUnhandledFrameHandle,
   type UnhandledFrameHandle,
 } from '../on-unhandled-frame'
-import { HandlersController, AnyHandler } from '../handlers-controller'
+import type { HandlersController } from '../handlers-controller'
+import { type AnyHandler } from '../handlers-controller'
 import { type RequestHandler } from '../../handlers/RequestHandler'
 
 interface HttpNetworkFrameOptions {
@@ -247,9 +251,13 @@ export abstract class HttpNetworkFrame extends NetworkFrame<
       return null
     }
 
+    const responseCloneForLogs = resolutionContext?.quiet
+      ? null
+      : response.clone()
+
     await storeResponseCookies(request, response)
 
-    this.respondWith(response.clone())
+    this.respondWith(response)
 
     this.events.emit(
       new RequestEvent('request:end', {
@@ -261,7 +269,7 @@ export abstract class HttpNetworkFrame extends NetworkFrame<
     if (!resolutionContext?.quiet) {
       handler.log({
         request: requestCloneForLogs!,
-        response,
+        response: responseCloneForLogs!,
         parsedResult,
       })
     }

package/src/core/experimental/frames/websocket-frame.test.ts

@@ -1,10 +1,8 @@
 import { http } from '../../http'
 import { graphql } from '../../graphql'
 import { ws } from '../../ws'
-import {
-  WebSocketNetworkFrame,
-  WebSocketNetworkFrameEventMap,
-} from './websocket-frame'
+import type { WebSocketNetworkFrameEventMap } from './websocket-frame'
+import { WebSocketNetworkFrame } from './websocket-frame'
 import { createTestWebSocketConnection } from '../../../../test/support/ws-test-utils'
 import { InMemoryHandlersController } from '#core/experimental/handlers-controller'
 

package/src/core/experimental/frames/websocket-frame.ts

@@ -11,10 +11,11 @@ import {
 } from './network-frame'
 import {
   executeUnhandledFrameHandle,
-  UnhandledFrameHandle,
+  type UnhandledFrameHandle,
 } from '../on-unhandled-frame'
 import { devUtils } from '../../utils/internal/devUtils'
-import { HandlersController, AnyHandler } from '../handlers-controller'
+import type { HandlersController } from '../handlers-controller'
+import { type AnyHandler } from '../handlers-controller'
 
 export interface WebSocketNetworkFrameOptions {
   connection: WebSocketConnectionData

package/src/core/experimental/handlers-controller.test.ts

@@ -1,8 +1,68 @@
 import { http } from '../http'
 import { graphql } from '../graphql'
 import { ws } from '../ws'
+import { getSiblingHandlers } from '../utils/internal/attachSiblingHandlers'
 import { InMemoryHandlersController } from './handlers-controller'
 
+describe('constructor', () => {
+  it('places the sibling in its own kind bucket', () => {
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    const controller = new InMemoryHandlersController([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('interleaves the sibling at the owner position when grouping by kind', () => {
+    const httpOne = http.get('/', () => {})
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+    const httpTwo = http.get('/', () => {})
+
+    const controller = new InMemoryHandlersController([
+      httpOne,
+      wsHandler,
+      httpTwo,
+    ])
+
+    expect(controller.getHandlersByKind('request')).toEqual([
+      httpOne,
+      upgradeHandler,
+      httpTwo,
+    ])
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+  })
+
+  it('extracts siblings from every owner in the input list', () => {
+    const wsOne = ws.link('*').addEventListener('connection', () => {})
+    const wsTwo = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeOne] = getSiblingHandlers(wsOne)
+    const [upgradeTwo] = getSiblingHandlers(wsTwo)
+
+    const controller = new InMemoryHandlersController([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([
+      upgradeOne,
+      upgradeTwo,
+    ])
+  })
+
+  it('dedupes the shared upgrade sibling across multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+})
+
 describe(InMemoryHandlersController.prototype.use, () => {
   it('prepends a handler to an empty controller', () => {
     const controller = new InMemoryHandlersController([])
@@ -51,6 +111,44 @@ describe(InMemoryHandlersController.prototype.use, () => {
 
     expect(controller.currentHandlers()).toEqual([graphqlOne, httpTwo, httpOne])
   })
+
+  it('propagates siblings to their kind buckets at runtime', () => {
+    const controller = new InMemoryHandlersController([])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.use([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('prepends incoming siblings before existing handlers of the same kind', () => {
+    const existingHttp = http.get('/existing', () => {})
+    const controller = new InMemoryHandlersController([existingHttp])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.use([wsHandler])
+
+    expect(controller.getHandlersByKind('request')).toEqual([
+      upgradeHandler,
+      existingHttp,
+    ])
+  })
+
+  it('dedupes the shared upgrade sibling when called with multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([])
+    controller.use([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
 })
 
 describe(InMemoryHandlersController.prototype.reset, () => {
@@ -96,6 +194,42 @@ describe(InMemoryHandlersController.prototype.reset, () => {
      */
     expect(controller.currentHandlers()).toEqual([httpTwo])
   })
+
+  it('places siblings into their kind buckets when resetting to next handlers', () => {
+    const controller = new InMemoryHandlersController([])
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+
+    controller.reset([wsHandler])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('restores siblings when resetting to the initial handlers', () => {
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsHandler)
+    const controller = new InMemoryHandlersController([wsHandler])
+
+    controller.use([http.get('/runtime', () => {})])
+    controller.reset([])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsHandler])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
+
+  it('dedupes the shared upgrade sibling when reset with multiple handlers from the same link', () => {
+    const chat = ws.link('*')
+    const wsOne = chat.addEventListener('connection', () => {})
+    const wsTwo = chat.addEventListener('connection', () => {})
+    const [upgradeHandler] = getSiblingHandlers(wsOne)
+
+    const controller = new InMemoryHandlersController([])
+    controller.reset([wsOne, wsTwo])
+
+    expect(controller.getHandlersByKind('websocket')).toEqual([wsOne, wsTwo])
+    expect(controller.getHandlersByKind('request')).toEqual([upgradeHandler])
+  })
 })
 
 describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
@@ -112,11 +246,10 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
       ]).getHandlersByKind('websocket'),
     ).toEqual([])
 
+    const wsHandler = ws.link('*').addEventListener('connection', () => {})
     expect(
-      new InMemoryHandlersController([
-        ws.link('*').addEventListener('connection', () => {}),
-      ]).getHandlersByKind('request'),
-    ).toEqual([])
+      new InMemoryHandlersController([wsHandler]).getHandlersByKind('request'),
+    ).toEqual(getSiblingHandlers(wsHandler))
   })
 
   it('returns all handlers if they all match', () => {
@@ -142,6 +275,7 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
     const httpHandler = http.get('/', () => {})
     const graphqlHandler = graphql.query('', () => {})
     const wsHandler = ws.link('*').addEventListener('connection', () => {})
+    const wsHandlerSiblings = getSiblingHandlers(wsHandler)
 
     expect(
       new InMemoryHandlersController([
@@ -149,7 +283,7 @@ describe(InMemoryHandlersController.prototype.getHandlersByKind, () => {
         graphqlHandler,
         wsHandler,
       ]).getHandlersByKind('request'),
-    ).toEqual([httpHandler, graphqlHandler])
+    ).toEqual([httpHandler, graphqlHandler, ...wsHandlerSiblings])
 
     expect(
       new InMemoryHandlersController([

package/src/core/experimental/handlers-controller.ts

@@ -2,6 +2,7 @@ import { invariant } from 'outvariant'
 import { type RequestHandler } from '../handlers/RequestHandler'
 import { type WebSocketHandler } from '../handlers/WebSocketHandler'
 import { devUtils } from '../utils/internal/devUtils'
+import { getSiblingHandlers } from '../utils/internal/attachSiblingHandlers'
 
 export type AnyHandler = RequestHandler | WebSocketHandler
 export type HandlersMap = Partial<Record<AnyHandler['kind'], Array<AnyHandler>>>
@@ -9,11 +10,23 @@ export type HandlersMap = Partial<Record<AnyHandler['kind'], Array<AnyHandler>>>
 export function groupHandlersByKind(handlers: Array<AnyHandler>): HandlersMap {
   const groups: HandlersMap = {}
 
+  const pushUnique = (kind: AnyHandler['kind'], handler: AnyHandler) => {
+    const bucket = (groups[kind] ||= [])
+
+    if (!bucket.includes(handler)) {
+      bucket.push(handler)
+    }
+  }
+
   /**
    * @note `Object.groupBy` is not implemented in Node.js v20.
    */
   for (const handler of handlers) {
-    ;(groups[handler.kind] ||= []).push(handler)
+    pushUnique(handler.kind, handler)
+
+    for (const sibling of getSiblingHandlers(handler)) {
+      pushUnique(sibling.kind, sibling)
+    }
   }
 
   return groups
@@ -31,7 +44,7 @@ export abstract class HandlersController {
     invariant(
       this.#validateHandlers(initialHandlers),
       devUtils.formatMessage(
-        '[MSW] Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?',
+        'Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?',
       ),
     )
 
@@ -69,14 +82,16 @@ export abstract class HandlersController {
     }
 
     const { handlers } = this.getState()
-
-    // Iterate over next handlers and prepend them to their respective lists.
-    // Iterate in a reverse order to the keep the order of the runtime handlers as provided.
-    for (let i = nextHandlers.length - 1; i >= 0; i--) {
-      const handler = nextHandlers[i]
-      handlers[handler.kind] = handlers[handler.kind]
-        ? [handler, ...handlers[handler.kind]!]
-        : [handler]
+    const overrides = groupHandlersByKind(nextHandlers)
+
+    // Prepend overrides to their respective kind buckets so they take
+    // priority over existing handlers while preserving input order.
+    for (const kind in overrides) {
+      const overridesForKind = overrides[kind as AnyHandler['kind']]!
+      const existingForKind = handlers[kind as AnyHandler['kind']]
+      handlers[kind as AnyHandler['kind']] = existingForKind
+        ? [...overridesForKind, ...existingForKind]
+        : overridesForKind
     }
 
     this.setState({ handlers })
@@ -90,6 +105,12 @@ export abstract class HandlersController {
       ),
     )
 
+    for (const handler of this.currentHandlers()) {
+      if ('reset' in handler) {
+        handler['reset']()
+      }
+    }
+
     const { initialHandlers } = this.getState()
 
     if (nextHandlers.length === 0) {
@@ -108,6 +129,14 @@ export abstract class HandlersController {
     })
   }
 
+  public restore(): void {
+    for (const handler of this.currentHandlers()) {
+      if ('restore' in handler) {
+        handler['restore']()
+      }
+    }
+  }
+
   #validateHandlers(handlers: Array<AnyHandler>): boolean {
     return handlers.every((handler) => !Array.isArray(handler))
   }

package/src/core/experimental/index.ts

@@ -1,4 +1,8 @@
-export { defineNetwork, DefineNetworkOptions } from './define-network'
+export {
+  defineNetwork,
+  type DefineNetworkOptions,
+  type NetworkApi,
+} from './define-network'
 
 /* Network sources */
 export { NetworkSource } from './sources/network-source'
@@ -14,3 +18,9 @@ export {
   WebSocketNetworkFrame,
   type WebSocketNetworkFrameEventMap,
 } from './frames/websocket-frame'
+
+/* Handler controllers */
+export {
+  HandlersController,
+  InMemoryHandlersController,
+} from './handlers-controller'

package/src/core/experimental/on-unhandled-frame.test.ts

@@ -5,10 +5,8 @@ import type {
 } from '@mswjs/interceptors/WebSocket'
 import { HttpNetworkFrame } from './frames/http-frame'
 import { WebSocketNetworkFrame } from './frames/websocket-frame'
-import {
-  executeUnhandledFrameHandle,
-  UnhandledFrameCallback,
-} from './on-unhandled-frame'
+import type { UnhandledFrameCallback } from './on-unhandled-frame'
+import { executeUnhandledFrameHandle } from './on-unhandled-frame'
 
 beforeAll(() => {
   vi.spyOn(console, 'warn').mockImplementation(() => void 0)

package/src/core/experimental/setup-api.ts

@@ -1,9 +1,9 @@
 import { type DefaultEventMap, Emitter } from 'rettime'
-import { LifeCycleEventEmitter } from '../sharedOptions'
+import { type LifeCycleEventEmitter } from '../sharedOptions'
+import type { HandlersController } from './handlers-controller'
 import {
-  AnyHandler,
-  HandlersController,
   InMemoryHandlersController,
+  type AnyHandler,
 } from './handlers-controller'
 import { Disposable } from '../utils/internal/Disposable'
 import { toReadonlyArray } from '../utils/internal/toReadonlyArray'
@@ -42,11 +42,7 @@ export abstract class SetupApi<
   }
 
   public restoreHandlers(): void {
-    this.handlersController.currentHandlers().forEach((handler) => {
-      if ('isUsed' in handler) {
-        handler.isUsed = false
-      }
-    })
+    this.handlersController.restore()
   }
 
   public resetHandlers(...nextHandlers: Array<AnyHandler>): void {

package/src/core/experimental/sources/interceptor-source.ts

@@ -1,9 +1,5 @@
-import {
-  BatchInterceptor,
-  Interceptor,
-  RequestController,
-  type HttpRequestEventMap,
-} from '@mswjs/interceptors'
+import type { Interceptor, RequestController } from '@mswjs/interceptors'
+import { BatchInterceptor, type HttpRequestEventMap } from '@mswjs/interceptors'
 import type {
   WebSocketConnectionData,
   WebSocketEventMap,
@@ -91,16 +87,26 @@ export class InterceptorSource extends NetworkSource {
     }
 
     queueMicrotask(() => {
-      httpFrame.events.emit(
-        new ResponseEvent(
-          isMockedResponse ? 'response:mocked' : 'response:bypass',
-          {
-            requestId,
-            request,
-            response,
-          },
-        ),
-      )
+      try {
+        httpFrame.events.emit(
+          new ResponseEvent(
+            isMockedResponse ? 'response:mocked' : 'response:bypass',
+            {
+              requestId,
+              request,
+              response,
+            },
+          ),
+        )
+      } finally {
+        /**
+         * @note Remove any listeners from this frame.
+         * Past this point, it won't emit anything. The removal is crucial
+         * to prevent "rettime" from keeping the abort cleanup listeners internally.
+         * @see https://github.com/mswjs/msw/issues/2735
+         */
+        httpFrame.events.removeAllListeners()
+      }
     })
   }
 
@@ -157,6 +163,20 @@ class InterceptorHttpNetworkFrame extends HttpNetworkFrame {
 class InterceptorWebSocketNetworkFrame extends WebSocketNetworkFrame {
   constructor(args: { connection: WebSocketConnectionData }) {
     super({ connection: args.connection })
+
+    /**
+     * @note Provide a similar frame listener cleanup as for HTTP.
+     * When the client connection closes, the handler can no longer be used.
+     */
+    args.connection.client.addEventListener(
+      'close',
+      () => {
+        this.events.removeAllListeners()
+      },
+      {
+        once: true,
+      },
+    )
   }
 
   public errorWith(reason?: unknown): void {

package/src/core/experimental/sources/network-source.ts

@@ -44,7 +44,7 @@ export abstract class NetworkSource<
 
   public on<Type extends keyof NetworkSourceEventMap<Frame>>(
     type: Type,
-    listener: Emitter.ListenerType<typeof this.emitter, Type>,
+    listener: Emitter.Listener<typeof this.emitter, Type>,
     options?: TypedListenerOptions,
   ): void {
     this.emitter.on(type, listener, options)