@mswjs/interceptors 0.41.8 → 0.42.0

package/src/interceptors/XMLHttpRequest/{XMLHttpRequestProxy.ts → xml-http-request-proxy.ts}

@@ -1,12 +1,12 @@
-import type { Logger } from '@open-draft/logger'
-import { XMLHttpRequestEmitter } from '.'
-import { RequestController } from '../../RequestController'
-import { XMLHttpRequestController } from './XMLHttpRequestController'
-import { handleRequest } from '../../utils/handleRequest'
-import { isResponseError } from '../../utils/responseUtils'
+import type { Emitter } from 'rettime'
+import { HttpResponseEvent, type HttpRequestEventMap } from '../../events/http'
+import { RequestController } from '../../request-controller'
+import { XMLHttpRequestController } from './xml-http-request-controller'
+import { handleRequest } from '../../utils/handle-request'
+import type { Logger } from '../../utils/logger'
 
 export interface XMLHttpRequestProxyOptions {
-  emitter: XMLHttpRequestEmitter
+  emitter: Emitter<HttpRequestEventMap>
   logger: Logger
 }
 
@@ -21,7 +21,7 @@ export function createXMLHttpRequestProxy({
 }: XMLHttpRequestProxyOptions) {
   const XMLHttpRequestProxy = new Proxy(globalThis.XMLHttpRequest, {
     construct(target, args, newTarget) {
-      logger.info('constructed new XMLHttpRequest')
+      logger.verbose('constructed new XMLHttpRequest')
 
       const originalRequest = Reflect.construct(
         target,
@@ -55,59 +55,62 @@ export function createXMLHttpRequestProxy({
       xhrRequestController.onRequest = async function ({ request, requestId }) {
         const controller = new RequestController(request, {
           passthrough: () => {
-            this.logger.info(
+            this.logger.verbose(
               'no mocked response received, performing request as-is...'
             )
           },
           respondWith: async (response) => {
-            if (isResponseError(response)) {
-              this.errorWith(new TypeError('Network error'))
-              return
-            }
-
             await this.respondWith(response)
           },
           errorWith: (reason) => {
-            this.logger.info('request errored!', { error: reason })
+            this.logger.verbose('request errored %o', { error: reason })
 
             if (reason instanceof Error) {
               this.errorWith(reason)
             }
           },
+        }, {
+          logger,
+          requestId,
         })
 
-        this.logger.info('awaiting mocked response...')
+        this.logger.verbose('awaiting mocked response')
 
-        this.logger.info(
+        this.logger.verbose(
           'emitting the "request" event for %s listener(s)...',
           emitter.listenerCount('request')
         )
 
         await handleRequest({
+          initiator: this.request,
           request,
           requestId,
           controller,
           emitter,
+          logger,
         })
       }
 
       xhrRequestController.onResponse = async function ({
         response,
-        isMockedResponse,
+        responseType,
         request,
         requestId,
       }) {
-        this.logger.info(
+        this.logger.verbose(
           'emitting the "response" event for %s listener(s)...',
           emitter.listenerCount('response')
         )
 
-        emitter.emit('response', {
-          response,
-          isMockedResponse,
-          request,
-          requestId,
-        })
+        await emitter.emitAsPromise(
+          new HttpResponseEvent({
+            initiator: this.request,
+            response,
+            responseType,
+            request,
+            requestId,
+          })
+        )
       }
 
       // Return the proxied request from the controller

package/src/interceptors/fetch/node.ts

@@ -0,0 +1,103 @@
+import { hasConfigurableGlobal } from '#/src/utils/has-configurable-global'
+import { getErrorResponse } from '#/src/utils/response-utils'
+import { requestContext } from '#/src/request-context'
+import { patchesRegistry } from '#/src/utils/patches-registry'
+import { forwardHttpEvents } from '#/src/interceptors/http/forward-events'
+import { NodeHttpRequestSource } from '#/src/interceptors/http/source'
+import { HttpRequestEventMap } from '#/src/events/http'
+import { Interceptor } from '../../interceptor'
+
+/**
+ * Interceptor for `fetch` requests in Node.js.
+ * @note This interceptor only affects requests performed via
+ * the global `fetch` function. To intercept fetch requests performed
+ * by other means (e.g. direct `request()` from Undici) use the
+ * `HttpRequestInterceptor` instead.
+ */
+export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
+  static symbol = Symbol.for('fetch-interceptor')
+
+  protected predicate() {
+    return hasConfigurableGlobal('fetch')
+  }
+
+  protected setup(): void {
+    const requestSource = Interceptor.singleton(NodeHttpRequestSource)
+    requestSource.apply(this)
+
+    this.subscriptions.push(() => {
+      requestSource.dispose(this)
+    })
+
+    this.subscriptions.push(
+      forwardHttpEvents({
+        source: requestSource,
+        emitter: this.emitter,
+        predicate: (initiator) => {
+          return initiator instanceof Request
+        },
+        responsePredicate: (event) => {
+          /**
+           * @note Fetch clients never observe informational responses (1xx).
+           * Undici treats them as a network error, failing the request,
+           * so do not forward their "response" events to fetch consumers.
+           */
+          return event.response.status >= 200
+        },
+      })
+    )
+
+    this.subscriptions.push(
+      patchesRegistry.applyPatch(globalThis, 'fetch', (realFetch) => {
+        return (input, init) => {
+          /**
+           * Resolve potentially relative request URL against the present `location`.
+           * This is mainly for native `fetch` in browser-like environments.
+           * @see https://github.com/mswjs/msw/issues/1625
+           */
+          const resolvedInput =
+            typeof input === 'string' &&
+            typeof location !== 'undefined' &&
+            !URL.canParse(input)
+              ? new URL(input, location.href)
+              : input
+
+          const request = new Request(resolvedInput, init)
+
+          /**
+           * @note Scope the request context to the `fetch` call itself.
+           * Using `enterWith` here would rebind the store for the caller's
+           * entire asynchronous scope, attributing unrelated requests
+           * performed after this `fetch` to it.
+           */
+          return requestContext.run(
+            {
+              initiator: request,
+              logger: this.logger,
+            },
+            () => {
+              return realFetch(request).catch((error: unknown) => {
+                /**
+                 * @note A mocked `Response.error()` destroys the socket with
+                 * an internal error, which Undici reports as the cause of its
+                 * "fetch failed" rejection. Surface the error response as the
+                 * rejection cause instead, so the consumer can tell a mocked
+                 * network error apart from an actual connectivity issue.
+                 */
+                if (error instanceof TypeError) {
+                  const errorResponse = getErrorResponse(error.cause)
+
+                  if (errorResponse) {
+                    error.cause = errorResponse
+                  }
+                }
+
+                throw error
+              })
+            }
+          )
+        }
+      })
+    )
+  }
+}

package/src/interceptors/fetch/utils/{followRedirect.ts → follow-redirect.ts}

@@ -1,4 +1,4 @@
-import { createNetworkError } from './createNetworkError'
+import { createNetworkError } from './create-network-error'
 
 const REQUEST_BODY_HEADERS = [
   'content-encoding',

package/src/interceptors/fetch/web.ts

@@ -0,0 +1,217 @@
+import { until } from '@open-draft/until'
+import { HttpResponseEvent, type HttpRequestEventMap } from '../../events/http'
+import { RequestController } from '../../request-controller'
+import { handleRequest } from '../../utils/handle-request'
+import { createRequestId } from '../../create-request-id'
+import { createNetworkError } from './utils/create-network-error'
+import { followFetchRedirect } from './utils/follow-redirect'
+import { decompressResponse } from './utils/decompression'
+import { hasConfigurableGlobal } from '../../utils/has-configurable-global'
+import { FetchResponse } from '../../utils/fetch-utils'
+import { isResponseError } from '../../utils/response-utils'
+import { patchesRegistry } from '../../utils/patches-registry'
+import { copyRawHeaders } from '../ClientRequest/utils/record-raw-headers'
+import { Interceptor } from '../../interceptor'
+import { createLogger } from '../../utils/logger'
+
+const logger = createLogger('fetch')
+
+/**
+ * Interceptor for `fetch` requests in the browser.
+ */
+export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
+  static symbol = Symbol.for('fetch-interceptor')
+
+  protected predicate() {
+    return hasConfigurableGlobal('fetch')
+  }
+
+  protected async setup() {
+    logger.verbose('patching global fetch...')
+
+    this.subscriptions.push(
+      patchesRegistry.applyPatch(globalThis, 'fetch', (realFetch) => {
+        return async (input, init) => {
+          const requestId = createRequestId()
+
+          /**
+           * @note Resolve potentially relative request URL
+           * against the present `location`. This is mainly
+           * for native `fetch` in JSDOM.
+           * @see https://github.com/mswjs/msw/issues/1625
+           */
+          const resolvedInput =
+            typeof input === 'string' &&
+            typeof location !== 'undefined' &&
+            !URL.canParse(input)
+              ? new URL(input, location.href)
+              : input
+
+          const request = new Request(resolvedInput, init)
+
+          const responsePromise = Promise.withResolvers<Response>()
+
+          const controller = new RequestController(
+            request,
+            {
+              passthrough: async () => {
+                logger.verbose('performing request as-is')
+
+                /**
+                 * @note Clone the request instance right before performing it.
+                 * This preserves any modifications made to the intercepted request
+                 * in the "request" listener. This also allows the user to read the
+                 * request body in the "response" listener (otherwise "unusable").
+                 */
+                const requestCloneForResponseEvent = request.clone()
+
+                // Perform the intercepted request as-is.
+                const [responseError, originalResponse] = await until(() =>
+                  realFetch(request)
+                )
+
+                if (responseError) {
+                  return responsePromise.reject(responseError)
+                }
+
+                logger.verbose('original fetch performed %o', originalResponse)
+
+                if (this.emitter.listenerCount('response') > 0) {
+                  logger.verbose('emitting the "response" event')
+
+                  const responseClone = FetchResponse.clone(originalResponse)
+                  await this.emitter.emitAsPromise(
+                    new HttpResponseEvent({
+                      initiator: requestCloneForResponseEvent,
+                      request: requestCloneForResponseEvent,
+                      requestId,
+                      response: responseClone,
+                      responseType: 'original',
+                    })
+                  )
+                }
+
+                // Resolve the response promise with the original response
+                // since the `fetch()` return this internal promise.
+                responsePromise.resolve(originalResponse)
+              },
+              respondWith: async (rawResponse) => {
+                // Handle mocked `Response.error()` (i.e. request errors).
+                if (isResponseError(rawResponse)) {
+                  logger.verbose('request errored %o', {
+                    response: rawResponse,
+                  })
+                  responsePromise.reject(createNetworkError(rawResponse))
+                  return
+                }
+
+                // Decompress the mocked response body, if applicable.
+                const decompressedStream = decompressResponse(rawResponse)
+                const response = new FetchResponse(
+                  decompressedStream || rawResponse.body,
+                  {
+                    url: request.url,
+                    status: rawResponse.status,
+                    statusText: rawResponse.statusText,
+                    headers: rawResponse.headers,
+                  }
+                )
+
+                copyRawHeaders(rawResponse.headers, response.headers)
+
+                /**
+                 * Undici's handling of following redirect responses.
+                 * Treat the "manual" redirect mode as a regular mocked response.
+                 * This way, the client can manually follow the redirect it receives.
+                 * @see https://github.com/nodejs/undici/blob/a6dac3149c505b58d2e6d068b97f4dc993da55f0/lib/web/fetch/index.js#L1173
+                 */
+                if (FetchResponse.isRedirectResponse(response.status)) {
+                  // Reject the request promise if its `redirect` is set to `error`
+                  // and it receives a mocked redirect response.
+                  if (request.redirect === 'error') {
+                    responsePromise.reject(
+                      createNetworkError('unexpected redirect')
+                    )
+                    return
+                  }
+
+                  if (request.redirect === 'follow') {
+                    followFetchRedirect(request, response).then(
+                      (response) => {
+                        responsePromise.resolve(response)
+                      },
+                      (reason) => {
+                        responsePromise.reject(reason)
+                      }
+                    )
+                    return
+                  }
+                }
+
+                if (this.emitter.listenerCount('response') > 0) {
+                  logger.verbose('emitting the "response" event')
+
+                  // Await the response listeners to finish before resolving
+                  // the response promise. This ensures all your logic finishes
+                  // before the interceptor resolves the pending response.
+                  await this.emitter.emitAsPromise(
+                    new HttpResponseEvent({
+                      initiator: request,
+                      // Clone the mocked response for the "response" event listener.
+                      // This way, the listener can read the response and not lock its body
+                      // for the actual fetch consumer.
+                      response: FetchResponse.clone(response),
+                      responseType: 'mock',
+                      request,
+                      requestId,
+                    })
+                  )
+                }
+
+                responsePromise.resolve(response)
+              },
+              errorWith: (reason) => {
+                logger.verbose('request aborted %o', { reason })
+                responsePromise.reject(reason)
+              },
+            },
+            {
+              logger,
+              requestId,
+            }
+          )
+
+          logger.verbose('awaiting request resolution')
+
+          logger.verbose(
+            'emitting the "request" event for %s listener(s)...',
+            this.emitter.listenerCount('request')
+          )
+
+          /**
+           * @note Give the consumer a chance to abort the request before
+           * it is dispatched. Fetch queues the request processing as a
+           * task, so a signal aborted synchronously after `fetch()` must
+           * prevent the request from ever reaching the "request" listeners.
+           * Without this, the first listener is invoked synchronously
+           * within the `fetch()` call itself.
+           */
+          await Promise.resolve()
+
+          await handleRequest({
+            initiator: request,
+            request,
+            requestId,
+            emitter: this.emitter,
+            controller,
+            logger,
+          })
+
+          return responsePromise.promise
+        }
+      })
+    )
+
+    logger.verbose('global fetch patched: %s', globalThis.fetch.name)
+  }
+}

package/src/interceptors/http/forward-events.test.ts

@@ -0,0 +1,86 @@
+import { Emitter } from 'rettime'
+import {
+  HttpResponseEvent,
+  type HttpRequestEventMap,
+} from '#/src/events/http'
+import { Interceptor } from '#/src/interceptor'
+import { forwardHttpEvents } from './forward-events'
+
+class HttpRequestSource extends Interceptor<HttpRequestEventMap> {
+  protected predicate(): boolean {
+    return true
+  }
+
+  protected setup(): void {}
+
+  public emitResponse(event: HttpResponseEvent) {
+    return this.emitter.emitAsPromise(event)
+  }
+}
+
+it('forwards the canonical event instance to every interceptor', async () => {
+  const source = new HttpRequestSource()
+  const firstEmitter = new Emitter<HttpRequestEventMap>()
+  const secondEmitter = new Emitter<HttpRequestEventMap>()
+  const firstListener = vi.fn()
+  const secondListener = vi.fn()
+
+  firstEmitter.on('response', firstListener)
+  secondEmitter.on('response', secondListener)
+
+  const disposeFirstForwarding = forwardHttpEvents({
+    source,
+    emitter: firstEmitter,
+    predicate: () => {
+      return true
+    },
+  })
+  const disposeSecondForwarding = forwardHttpEvents({
+    source,
+    emitter: secondEmitter,
+    predicate: () => {
+      return true
+    },
+  })
+  const responseEvent = new HttpResponseEvent({
+    request: new Request('https://example.com'),
+    requestId: 'request-id',
+    initiator: null,
+    response: new Response(),
+    responseType: 'mock',
+  })
+
+  await source.emitResponse(responseEvent)
+
+  expect(firstListener).toHaveBeenCalledExactlyOnceWith(responseEvent)
+  expect(secondListener).toHaveBeenCalledExactlyOnceWith(responseEvent)
+
+  disposeFirstForwarding()
+  disposeSecondForwarding()
+})
+
+it('removes lazy source listeners with the consumer listener', () => {
+  const source = new HttpRequestSource()
+  const emitter = new Emitter<HttpRequestEventMap>()
+  const listener = vi.fn()
+
+  emitter.on('response', listener)
+  const disposeForwarding = forwardHttpEvents({
+    source,
+    emitter,
+    predicate: () => {
+      return true
+    },
+  })
+
+  expect(source.listenerCount('request')).toBe(1)
+  expect(source.listenerCount('response')).toBe(1)
+
+  emitter.removeListener('response', listener)
+
+  expect(source.listenerCount('response')).toBe(0)
+
+  disposeForwarding()
+
+  expect(source.listenerCount('request')).toBe(0)
+})

package/src/interceptors/http/forward-events.ts

@@ -0,0 +1,139 @@
+import { type Emitter } from 'rettime'
+import {
+  type HttpRequestEventMap,
+  type HttpResponseEvent,
+} from '#/src/events/http'
+import { type Interceptor } from '#/src/interceptor'
+import { type DisposableSubscription } from '#/src/disposable'
+import { createLogger } from '#/src/utils/logger'
+
+const logger = createLogger('http-request')
+
+interface ForwardHttpEventsOptions {
+  source: Interceptor<HttpRequestEventMap>
+  emitter: Emitter<HttpRequestEventMap>
+  predicate: (initiator: unknown) => boolean
+  responsePredicate?: (event: HttpResponseEvent) => boolean
+}
+
+export function forwardHttpEvents(
+  options: ForwardHttpEventsOptions
+): DisposableSubscription {
+  const controller = new AbortController()
+  const { source, emitter, predicate, responsePredicate } = options
+
+  source.on(
+    'request',
+    async (event) => {
+      if (predicate(event.initiator)) {
+        logger.verbose('forwarding "request" event %o', {
+          requestId: event.requestId,
+        })
+        await emitter.emitAsPromise(event)
+      }
+    },
+    {
+      signal: controller.signal,
+    }
+  )
+
+  const responseListener: Emitter.Listener<
+    Emitter<HttpRequestEventMap>,
+    'response'
+  > = async (event) => {
+    if (
+      predicate(event.initiator) &&
+      (responsePredicate == null || responsePredicate(event))
+    ) {
+      logger.verbose('forwarding "response" event %o', {
+        requestId: event.requestId,
+        responseType: event.responseType,
+      })
+      await emitter.emitAsPromise(event)
+    }
+  }
+
+  const unhandledExceptionListener: Emitter.Listener<
+    Emitter<HttpRequestEventMap>,
+    'unhandledException'
+  > = async (event) => {
+    if (predicate(event.initiator)) {
+      logger.verbose('forwarding "unhandledException" event %o', {
+        requestId: event.requestId,
+      })
+      await emitter.emitAsPromise(event)
+    }
+  }
+
+  const addResponseListener = (): void => {
+    if (!source.listeners('response').includes(responseListener)) {
+      source.on('response', responseListener, {
+        signal: controller.signal,
+      })
+    }
+  }
+
+  const addUnhandledExceptionListener = (): void => {
+    if (
+      !source
+        .listeners('unhandledException')
+        .includes(unhandledExceptionListener)
+    ) {
+      source.on('unhandledException', unhandledExceptionListener, {
+        signal: controller.signal,
+      })
+    }
+  }
+
+  if (emitter.listenerCount('response') > 0) {
+    addResponseListener()
+  }
+
+  if (emitter.listenerCount('unhandledException') > 0) {
+    addUnhandledExceptionListener()
+  }
+
+  emitter.hooks.on(
+    'newListener',
+    (type) => {
+      if (type === 'response') {
+        addResponseListener()
+      }
+
+      if (type === 'unhandledException') {
+        addUnhandledExceptionListener()
+      }
+    },
+    {
+      signal: controller.signal,
+      persist: true,
+    }
+  )
+
+  emitter.hooks.on(
+    'removeListener',
+    (type) => {
+      if (type === 'response' && emitter.listenerCount('response') === 0) {
+        source.removeListener('response', responseListener)
+      }
+
+      if (
+        type === 'unhandledException' &&
+        emitter.listenerCount('unhandledException') === 0
+      ) {
+        source.removeListener(
+          'unhandledException',
+          unhandledExceptionListener
+        )
+      }
+    },
+    {
+      signal: controller.signal,
+      persist: true,
+    }
+  )
+
+  return () => {
+    controller.abort()
+  }
+}