@mswjs/interceptors 0.28.3 → 0.29.0

package/src/interceptors/ClientRequest/NodeClientRequest.ts

@@ -19,11 +19,13 @@ import { createRequest } from './utils/createRequest'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
 import { emitAsync } from '../../utils/emitAsync'
 import { getRawFetchHeaders } from '../../utils/getRawFetchHeaders'
-import { isPropertyAccessible } from '../../utils/isPropertyAccessible'
 import { isNodeLikeError } from '../../utils/isNodeLikeError'
 import { INTERNAL_REQUEST_ID_HEADER_NAME } from '../../Interceptor'
 import { createRequestId } from '../../createRequestId'
-import { createServerErrorResponse } from '../../utils/responseUtils'
+import {
+  createServerErrorResponse,
+  isResponseError,
+} from '../../utils/responseUtils'
 
 export type Protocol = 'http' | 'https'
 
@@ -267,9 +269,20 @@ export class NodeClientRequest extends ClientRequest {
           resolverResult.error
         )
 
-        // Treat thrown Responses as mocked responses.
+        // Handle thrown Response instances.
         if (resolverResult.error instanceof Response) {
-          this.respondWith(resolverResult.error)
+          // Treat thrown Response.error() as a request error.
+          if (isResponseError(resolverResult.error)) {
+            this.logger.info(
+              'received network error response, erroring request...'
+            )
+
+            this.errorWith(new TypeError('Network error'))
+          } else {
+            // Handle a thrown Response as a mocked response.
+            this.respondWith(resolverResult.error)
+          }
+
           return
         }
 
@@ -280,10 +293,34 @@ export class NodeClientRequest extends ClientRequest {
           return this
         }
 
-        // Unhandled exceptions in the request listeners are
-        // synonymous to unhandled exceptions on the server.
-        // Those are represented as 500 error responses.
-        this.respondWith(createServerErrorResponse(resolverResult.error))
+        until(async () => {
+          if (this.emitter.listenerCount('unhandledException') > 0) {
+            // Emit the "unhandledException" event to allow the client
+            // to opt-out from the default handling of exceptions
+            // as 500 error responses.
+            await emitAsync(this.emitter, 'unhandledException', {
+              error: resolverResult.error,
+              request: capturedRequest,
+              requestId,
+              controller: {
+                respondWith: this.respondWith.bind(this),
+                errorWith: this.errorWith.bind(this),
+              },
+            })
+
+            // If after the "unhandledException" listeners are done,
+            // the request is either not writable (was mocked) or
+            // destroyed (has errored), do nothing.
+            if (this.writableEnded || this.destroyed) {
+              return
+            }
+          }
+
+          // Unhandled exceptions in the request listeners are
+          // synonymous to unhandled exceptions on the server.
+          // Those are represented as 500 error responses.
+          this.respondWith(createServerErrorResponse(resolverResult.error))
+        })
 
         return this
       }
@@ -304,16 +341,7 @@ export class NodeClientRequest extends ClientRequest {
         this.destroyed = false
 
         // Handle mocked "Response.error" network error responses.
-        if (
-          /**
-           * @note Some environments, like Miniflare (Cloudflare) do not
-           * implement the "Response.type" property and throw on its access.
-           * Safely check if we can access "type" on "Response" before continuing.
-           * @see https://github.com/mswjs/msw/issues/1834
-           */
-          isPropertyAccessible(mockedResponse, 'type') &&
-          mockedResponse.type === 'error'
-        ) {
+        if (isResponseError(mockedResponse)) {
           this.logger.info(
             'received network error response, erroring request...'
           )

package/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts

@@ -49,10 +49,7 @@ export class XMLHttpRequestController {
   private responseBuffer: Uint8Array
   private events: Map<keyof XMLHttpRequestEventTargetEventMap, Array<Function>>
 
-  constructor(
-    readonly initialRequest: XMLHttpRequest,
-    public logger: Logger
-  ) {
+  constructor(readonly initialRequest: XMLHttpRequest, public logger: Logger) {
     this.events = new Map()
     this.requestId = createRequestId()
     this.requestHeaders = new Headers()
@@ -103,7 +100,7 @@ export class XMLHttpRequestController {
           case 'addEventListener': {
             const [eventName, listener] = args as [
               keyof XMLHttpRequestEventTargetEventMap,
-              Function,
+              Function
             ]
 
             this.registerEvent(eventName, listener)
@@ -123,7 +120,7 @@ export class XMLHttpRequestController {
 
           case 'send': {
             const [body] = args as [
-              body?: XMLHttpRequestBodyInit | Document | null,
+              body?: XMLHttpRequestBodyInit | Document | null
             ]
 
             if (body != null) {
@@ -524,7 +521,7 @@ export class XMLHttpRequestController {
   private trigger<
     EventName extends keyof (XMLHttpRequestEventTargetEventMap & {
       readystatechange: ProgressEvent<XMLHttpRequestEventTarget>
-    }),
+    })
   >(eventName: EventName, options?: ProgressEventInit): void {
     const callback = this.request[`on${eventName}`]
     const event = createEvent(this.request, eventName, options)

package/src/interceptors/XMLHttpRequest/XMLHttpRequestProxy.ts

@@ -4,7 +4,10 @@ import { XMLHttpRequestEmitter } from '.'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
 import { emitAsync } from '../../utils/emitAsync'
 import { XMLHttpRequestController } from './XMLHttpRequestController'
-import { createServerErrorResponse } from '../../utils/responseUtils'
+import {
+  createServerErrorResponse,
+  isResponseError,
+} from '../../utils/responseUtils'
 
 export interface XMLHttpRequestProxyOptions {
   emitter: XMLHttpRequestEmitter
@@ -97,9 +100,39 @@ export function createXMLHttpRequestProxy({
 
           // Treat thrown Responses as mocked responses.
           if (resolverResult.error instanceof Response) {
-            this.respondWith(resolverResult.error)
+            if (isResponseError(resolverResult.error)) {
+              xhrRequestController.errorWith(new TypeError('Network error'))
+            } else {
+              this.respondWith(resolverResult.error)
+            }
+
             return
           }
+
+          if (emitter.listenerCount('unhandledException') > 0) {
+            // Emit the "unhandledException" event so the client can opt-out
+            // from the default exception handling (producing 500 error responses).
+            await emitAsync(emitter, 'unhandledException', {
+              error: resolverResult.error,
+              request,
+              requestId,
+              controller: {
+                respondWith:
+                  xhrRequestController.respondWith.bind(xhrRequestController),
+                errorWith:
+                  xhrRequestController.errorWith.bind(xhrRequestController),
+              },
+            })
+
+            // If any of the "unhandledException" listeners handled the request,
+            // do nothing. Note that mocked responses will dispatch
+            // HEADERS_RECEIVED (2), then LOADING (3), and DONE (4) can take
+            // time as the mocked response body finishes streaming.
+            if (originalRequest.readyState > XMLHttpRequest.OPENED) {
+              return
+            }
+          }
+
           // Unhandled exceptions in the request listeners are
           // synonymous to unhandled exceptions on the server.
           // Those are represented as 500 error responses.
@@ -119,7 +152,7 @@ export function createXMLHttpRequestProxy({
             mockedResponse.statusText
           )
 
-          if (mockedResponse.type === 'error') {
+          if (isResponseError(mockedResponse)) {
             this.logger.info(
               'received a network error response, rejecting the request promise...'
             )

package/src/interceptors/fetch/index.ts

@@ -5,10 +5,12 @@ import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
 import { Interceptor } from '../../Interceptor'
 import { toInteractiveRequest } from '../../utils/toInteractiveRequest'
 import { emitAsync } from '../../utils/emitAsync'
-import { isPropertyAccessible } from '../../utils/isPropertyAccessible'
 import { canParseUrl } from '../../utils/canParseUrl'
 import { createRequestId } from '../../createRequestId'
-import { createServerErrorResponse } from '../../utils/responseUtils'
+import {
+  createServerErrorResponse,
+  isResponseError,
+} from '../../utils/responseUtils'
 
 export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
   static symbol = Symbol('fetch')
@@ -86,18 +88,26 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
         )
       }
 
-      const respondWith = (response: Response): Response => {
-        // 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.
-        const responseClone = response.clone()
-
-        this.emitter.emit('response', {
-          response: responseClone,
-          isMockedResponse: true,
-          request: interactiveRequest,
-          requestId,
-        })
+      const responsePromise = new DeferredPromise<Response>()
+
+      const respondWith = (response: Response): void => {
+        this.logger.info('responding with a mock response:', response)
+
+        if (this.emitter.listenerCount('response') > 0) {
+          this.logger.info('emitting the "response" event...')
+
+          // 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.
+          const responseClone = response.clone()
+
+          this.emitter.emit('response', {
+            response: responseClone,
+            isMockedResponse: true,
+            request: interactiveRequest,
+            requestId,
+          })
+        }
 
         // Set the "response.url" property to equal the intercepted request URL.
         Object.defineProperty(response, 'url', {
@@ -107,7 +117,11 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
           value: request.url,
         })
 
-        return response
+        responsePromise.resolve(response)
+      }
+
+      const errorWith = (reason: unknown): void => {
+        responsePromise.reject(reason)
       }
 
       const resolverResult = await until<unknown, Response | undefined>(
@@ -136,19 +150,56 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
       )
 
       if (requestAborted.state === 'rejected') {
-        return Promise.reject(requestAborted.rejectionReason)
+        this.logger.info(
+          'request has been aborted:',
+          requestAborted.rejectionReason
+        )
+
+        responsePromise.reject(requestAborted.rejectionReason)
+        return responsePromise
       }
 
       if (resolverResult.error) {
+        this.logger.info(
+          'request listerner threw an error:',
+          resolverResult.error
+        )
+
         // Treat thrown Responses as mocked responses.
         if (resolverResult.error instanceof Response) {
-          return respondWith(resolverResult.error)
+          // Treat thrown Response.error() as a request error.
+          if (isResponseError(resolverResult.error)) {
+            errorWith(createNetworkError(resolverResult.error))
+          } else {
+            // Treat the rest of thrown Responses as mocked responses.
+            respondWith(resolverResult.error)
+          }
+        }
+
+        // Emit the "unhandledException" interceptor event so the client
+        // can opt-out from exceptions translating to 500 error responses.
+
+        if (this.emitter.listenerCount('unhandledException') > 0) {
+          await emitAsync(this.emitter, 'unhandledException', {
+            error: resolverResult.error,
+            request,
+            requestId,
+            controller: {
+              respondWith,
+              errorWith,
+            },
+          })
+
+          if (responsePromise.state !== 'pending') {
+            return responsePromise
+          }
         }
 
         // Unhandled exceptions in the request listeners are
         // synonymous to unhandled exceptions on the server.
         // Those are represented as 500 error responses.
-        return createServerErrorResponse(resolverResult.error)
+        respondWith(createServerErrorResponse(resolverResult.error))
+        return responsePromise
       }
 
       const mockedResponse = resolverResult.data
@@ -157,10 +208,7 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
         this.logger.info('received mocked response:', mockedResponse)
 
         // Reject the request Promise on mocked "Response.error" responses.
-        if (
-          isPropertyAccessible(mockedResponse, 'type') &&
-          mockedResponse.type === 'error'
-        ) {
+        if (isResponseError(mockedResponse)) {
           this.logger.info(
             'received a network error response, rejecting the request promise...'
           )
@@ -173,24 +221,31 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
            * "response.error" will equal to undefined, making "cause" an empty Error.
            * @see https://github.com/nodejs/undici/blob/83cb522ae0157a19d149d72c7d03d46e34510d0a/lib/fetch/response.js#L344
            */
-          return Promise.reject(createNetworkError(mockedResponse))
+          errorWith(createNetworkError(mockedResponse))
+        } else {
+          respondWith(mockedResponse)
         }
 
-        return respondWith(mockedResponse)
+        return responsePromise
       }
 
       this.logger.info('no mocked response received!')
 
       return pureFetch(request).then((response) => {
-        const responseClone = response.clone()
-        this.logger.info('original fetch performed', responseClone)
-
-        this.emitter.emit('response', {
-          response: responseClone,
-          isMockedResponse: false,
-          request: interactiveRequest,
-          requestId,
-        })
+        this.logger.info('original fetch performed', response)
+
+        if (this.emitter.listenerCount('response') > 0) {
+          this.logger.info('emitting the "response" event...')
+
+          const responseClone = response.clone()
+
+          this.emitter.emit('response', {
+            response: responseClone,
+            isMockedResponse: false,
+            request: interactiveRequest,
+            requestId,
+          })
+        }
 
         return response
       })

package/src/utils/getUrlByRequestOptions.test.ts

@@ -105,10 +105,15 @@ it('resolves hostname to localhost if none provided', () => {
   expect(getUrlByRequestOptions({}).hostname).toBe('localhost')
 })
 
-it('supports "hostname" instead of "host" and "port"', () => {
+it('resolves host to localhost if none provided', () => {
+  expect(getUrlByRequestOptions({}).host).toBe('localhost')
+})
+
+it('supports "hostname" and "port"', () => {
   const options: RequestOptions = {
     protocol: 'https:',
-    hostname: '127.0.0.1:1234',
+    hostname: '127.0.0.1',
+    port: 1234,
     path: '/resource',
   }
 
@@ -117,7 +122,20 @@ it('supports "hostname" instead of "host" and "port"', () => {
   )
 })
 
-it('handles IPv6 hostnames', () => {
+it('use "hostname" if both "hostname" and "host" are specified', () => {
+  const options: RequestOptions = {
+    protocol: 'https:',
+    host: 'host',
+    hostname: 'hostname',
+    path: '/resource',
+  }
+
+  expect(getUrlByRequestOptions(options).href).toBe(
+    'https://hostname/resource'
+  )
+})
+
+it('parses "host" in IPv6', () => {
   expect(
     getUrlByRequestOptions({
       host: '::1',
@@ -125,6 +143,16 @@ it('handles IPv6 hostnames', () => {
     }).href
   ).toBe('http://[::1]/resource')
 
+  expect(
+    getUrlByRequestOptions({
+      host: '[::1]',
+      path: '/resource',
+    }).href
+  ).toBe('http://[::1]/resource')
+
+})
+
+it('parses "host" and "port" in IPv6', () => {
   expect(
     getUrlByRequestOptions({
       host: '::1',

package/src/utils/getUrlByRequestOptions.ts

@@ -15,7 +15,7 @@ export type ResolvedRequestOptions = RequestOptions & RequestSelf
 
 export const DEFAULT_PATH = '/'
 const DEFAULT_PROTOCOL = 'http:'
-const DEFAULT_HOST = 'localhost'
+const DEFAULT_HOSTNAME = 'localhost'
 const SSL_PORT = 443
 
 function getAgent(
@@ -50,15 +50,6 @@ function getPortByRequestOptions(
     return Number(options.port)
   }
 
-  // Extract the port from the hostname.
-  if (options.hostname != null) {
-    const [, extractedPort] = options.hostname.match(/:(\d+)$/) || []
-
-    if (extractedPort != null) {
-      return Number(extractedPort)
-    }
-  }
-
   // Otherwise, try to resolve port from the agent.
   const agent = getAgent(options)
 
@@ -75,17 +66,6 @@ function getPortByRequestOptions(
   return undefined
 }
 
-function getHostByRequestOptions(options: ResolvedRequestOptions): string {
-  const { hostname, host } = options
-
-  // If the hostname is specified, resolve the host from the "host:port" string.
-  if (hostname != null) {
-    return hostname.replace(/:\d+$/, '')
-  }
-
-  return host || DEFAULT_HOST
-}
-
 interface RequestAuth {
   username: string
   password: string
@@ -109,22 +89,20 @@ function isRawIPv6Address(host: string): boolean {
   return host.includes(':') && !host.startsWith('[') && !host.endsWith(']')
 }
 
-function getHostname(host: string, port?: number): string {
-  const portString = typeof port !== 'undefined' ? `:${port}` : ''
+function getHostname(options: ResolvedRequestOptions): string | undefined {
+  let host = options.hostname || options.host
 
-  /**
-   * @note As of Node >= 17, hosts (including "localhost") can resolve to IPv6
-   * addresses, so construct valid URL by surrounding the IPv6 host with brackets.
-   */
-  if (isRawIPv6Address(host)) {
-    return `[${host}]${portString}`
-  }
+  if (host) {
+    if (isRawIPv6Address(host)) {
+       host = `[${host}]`
+    }
 
-  if (typeof port === 'undefined') {
-    return host
+    // Check the presence of the port, and if it's present,
+    // remove it from the host, returning a hostname.
+    return new URL(`http://${host}`).hostname
   }
 
-  return `${host}${portString}`
+  return DEFAULT_HOSTNAME
 }
 
 /**
@@ -146,13 +124,10 @@ export function getUrlByRequestOptions(options: ResolvedRequestOptions): URL {
   const protocol = getProtocolByRequestOptions(options)
   logger.info('protocol', protocol)
 
-  const host = getHostByRequestOptions(options)
-  logger.info('host', host)
-
   const port = getPortByRequestOptions(options)
   logger.info('port', port)
 
-  const hostname = getHostname(host, port)
+  const hostname = getHostname(options)
   logger.info('hostname', hostname)
 
   const path = options.path || DEFAULT_PATH
@@ -166,7 +141,8 @@ export function getUrlByRequestOptions(options: ResolvedRequestOptions): URL {
     : ''
   logger.info('auth string:', authString)
 
-  const url = new URL(`${protocol}//${hostname}${path}`)
+  const portString = typeof port !== 'undefined' ? `:${port}` : ''
+  const url = new URL(`${protocol}//${hostname}${portString}${path}`)
   url.username = credentials?.username || ''
   url.password = credentials?.password || ''
 

package/src/utils/isObject.test.ts

@@ -1,17 +1,18 @@
 import { it, expect } from 'vitest'
 import { isObject } from './isObject'
 
-it('resolves given an object', () => {
+it('returns true given an object', () => {
   expect(isObject({})).toBe(true)
   expect(isObject({ a: 1 })).toBe(true)
 })
 
-it('rejects given an object-like instance', () => {
+it('returns false given an object-like instance', () => {
   expect(isObject([1])).toBe(false)
   expect(isObject(function () {})).toBe(false)
+  expect(isObject(new Response())).toBe(false)
 })
 
-it('rejects given a non-object instance', () => {
+it('returns false given a non-object instance', () => {
   expect(isObject(null)).toBe(false)
   expect(isObject(undefined)).toBe(false)
   expect(isObject(false)).toBe(false)

package/src/utils/isObject.ts

@@ -1,6 +1,8 @@
 /**
  * Determines if a given value is an instance of object.
  */
-export function isObject<T>(value: any): value is T {
-  return Object.prototype.toString.call(value) === '[object Object]'
+export function isObject<T>(value: any, loose = false): value is T {
+  return loose
+    ? Object.prototype.toString.call(value).startsWith('[object ')
+    : Object.prototype.toString.call(value) === '[object Object]'
 }

package/src/utils/responseUtils.ts

@@ -1,3 +1,5 @@
+import { isPropertyAccessible } from './isPropertyAccessible'
+
 /**
  * Response status codes for responses that cannot have body.
  * @see https://fetch.spec.whatwg.org/#statuses
@@ -37,3 +39,17 @@ export function createServerErrorResponse(body: unknown): Response {
     }
   )
 }
+
+/**
+ * Checks if the given response is a `Response.error()`.
+ *
+ * @note Some environments, like Miniflare (Cloudflare) do not
+ * implement the "Response.type" property and throw on its access.
+ * Safely check if we can access "type" on "Response" before continuing.
+ * @see https://github.com/mswjs/msw/issues/1834
+ */
+export function isResponseError(
+  response: Response
+): response is Response & { type: 'error' } {
+  return isPropertyAccessible(response, 'type') && response.type === 'error'
+}

package/lib/browser/chunk-F2F5QHHJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/glossary.ts","../../src/utils/responseUtils.ts"],"names":[],"mappings":";AAEO,IAAM,oBAAmC,OAAO,iBAAiB;;;ACEjE,IAAM,qCAAqC,oBAAI,IAAI;AAAA,EACxD;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AACtB,CAAC;AAMM,SAAS,sBAAsB,QAAyB;AAC7D,SAAO,mCAAmC,IAAI,MAAM;AACtD;AAKO,SAAS,0BAA0B,MAAyB;AACjE,SAAO,IAAI;AAAA,IACT,KAAK;AAAA,MACH,gBAAgB,QACZ;AAAA,QACE,MAAM,KAAK;AAAA,QACX,SAAS,KAAK;AAAA,QACd,OAAO,KAAK;AAAA,MACd,IACA;AAAA,IACN;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF","sourcesContent":["import type { InteractiveRequest } from './utils/toInteractiveRequest'\n\nexport const IS_PATCHED_MODULE: unique symbol = Symbol('isPatchedModule')\n\nexport type RequestCredentials = 'omit' | 'include' | 'same-origin'\n\nexport type HttpRequestEventMap = {\n  request: [\n    args: {\n      request: InteractiveRequest\n      requestId: string\n    }\n  ]\n  response: [\n    args: {\n      response: Response\n      isMockedResponse: boolean\n      request: Request\n      requestId: string\n    }\n  ]\n}\n","/**\n * Response status codes for responses that cannot have body.\n * @see https://fetch.spec.whatwg.org/#statuses\n */\nexport const RESPONSE_STATUS_CODES_WITHOUT_BODY = new Set([\n  101, 103, 204, 205, 304,\n])\n\n/**\n * Returns a boolean indicating whether the given response status\n * code represents a response that cannot have a body.\n */\nexport function isResponseWithoutBody(status: number): boolean {\n  return RESPONSE_STATUS_CODES_WITHOUT_BODY.has(status)\n}\n\n/**\n * Creates a generic 500 Unhandled Exception response.\n */\nexport function createServerErrorResponse(body: unknown): Response {\n  return new Response(\n    JSON.stringify(\n      body instanceof Error\n        ? {\n            name: body.name,\n            message: body.message,\n            stack: body.stack,\n          }\n        : body\n    ),\n    {\n      status: 500,\n      statusText: 'Unhandled Exception',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    }\n  )\n}\n"]}