A utility to drive requests handlers through a .har web-archive file for the Mock Service Worker library. This utility allows you to mock server handlers by using .har web-archive file which can be created by using applications like Charles, ProxyMan or the Chrome Developer Tools.

We have been using it during the development of web-applications, while the backend API endpoints weren't available yet or when we want to reproduce a problem of a customer. This way we can request the customer to send us a .har web-archive file and let this file drive the network requests to our back-end, this has greatly eased reproducing problems reported.

To use this library you need to have a HAR (*.har) file generated from the network traffic of your application. Follow the instructions below to learn how to do that.

npm install @tapico/msw-webarchive --save-dev

Follow the Installation instructions from the Mock Service Worker documentation.

• Open the DevTools in Chrome (Option + Command + I / Shift + CTRL + J).
• Go to the "Network" tab in the DevTools.
• Click on the downward-facing arrow icon to "Export HAR".
• Save the HAR archive on your disk.

• Open the DevTools in Firefox (Option + Command + I / Shift + CTRL + I).
• Go to the "Network" tab in the DevTools.
• Click on the cog icon on the left of the top bar.
• Click "Save All As HAR" option in the dropdown menu.
• Save the HAR archive on your disk.

import { setupWorker } from 'msw'
import { setRequestHandlersByWebarchive } from '@tapico/msw-webarchive'
import * as traffic from './example.har'

const worker = setupWorker()
setRequestHandlersByWebarchive(worker, traffic)

worker.start()

• Default: false

Disables the logging of debugging messages of the library.

setRequestHandlersByWebarchive(worker, har, {
  quiet: true,
})

• Default: true

Stricly match a request URL query parameters during request URL matching. When set to false, request URL query parameters are ignored during matching.

setRequestHandlersByWebarchive(worker, har, {
  strictQueryString: false,
})

• Default: undefined

Override the Access-Control-Allow-Origin response header whenever it's present.

setRequestHandlersByWebarchive(worker, har, {
  resolveCrossOrigins(origin) {
    return '*'
  },
})

• Default: undefined

Allow mapping the domains in your har file to something else. This may be useful if you are making relative requests against the origin (eg. fetch('/hello')), you may want to use a domainMapping configuration like:

setRequestHandlersByWebarchive(worker, har, {
  domainMappings: {
    'https://example.com': 'https://localhost',
  },
})

• Default: real

Controls the mock response delay behavior.

• real: Responses will be delayed based on the time property in the HAR
• none: Responses will not be delayed
• ResponseDelayFunction: Responses will be delayed by the value returned by the function
  • Signature: (timeDelay: number, requestContext: Request) => number
  • Parameters:
    • timeDelay: the value of the time property in the HAR, or 0 if there is no time property
    • requestContext: the request intercepted by Mock Service Worker
  • Return value:
    • The amount of time that the response should be delayed, in milliseconds. The response will not be delayed if a value <= 0 is returned

setRequestHandlersByWebarchive(worker, har, {
  responseDelay: 'none'
})

setRequestHandlersByWebarchive(worker, har, {
  responseDelay: (timeDelay: number, requestContext: Request) => {
    if (requestContext.url === 'http://example.com') {
      return timeDelay * 2
    }
    return 0
  }
})