xhr.upload.progress not called when using "passthrough()"

[Ahmad-Alzamer]

I am using AXIOS to upload a file to my backend. I configured a callback to be called for the onProgress

 const formData = new FormData();
   formData.append("file", file.files[0]);
   formData.append("json",  JSON.stringify({'test':123}));
   axios.post('https://httpbin.org/post', formData, {
     headers: {
         'Content-Type': 'multipart/form-data'
     },
     onUploadProgress: (e)=>{
         console.info('inside axios on progress',e, e.progress)
     }
 })

when msw is disabled, the 'onUploadProgress' callback is invoked and I see the messages:

inside axios on progress {loaded: 1768500, total: 28916802, progress: 0.06115821521342505, bytes: 1768500, rate: undefined, …}
inside axios on progress {loaded: 23416250, total: 28916802, progress: 0.8097800718073873, bytes: 21647750, rate: undefined, …}
inside axios on progress {loaded: 28916802, total: 28916802, progress: 1, bytes: 5500552, rate: undefined, …}

but when I enable MSW, the callback is not invoked.
I belive this is caused by the passthrough function passing the cloned object to the fetch function which does not have the progress event on the upload.

is there any plan to have the xhr.upload.progress event supported in MSW?

edit:
forgot to mention earlier, MSW version used:

"msw": "^2.0.11",

[kettanaito]

Hi, @Ahmad-Alzamer. Thanks for reporting this. Could you please update your post to include your request handler for this request?

is there any plan to have the xhr.upload.progress event supported in MSW?

The upload event in Axios is meant to be supported in MSW as-is. We have an Axios upload request test but there isn't a case that uses passthrough(). Perhaps the culprit is in that particular usage scenario.

I belive this is caused by the passthrough function passing the cloned object to the fetch function which does not have the progress event on the upload.

Not sure I follow. The passthrough() function doesn't clone the request, it only returns the instruction for MSW to perform the request as-is:

msw/src/core/passthrough.ts

Lines 15 to 23 in ea28bd9

	export function passthrough(): Response {
	return new Response(null, {
	status: 302,
	statusText: 'Passthrough',
	headers: {
	'x-msw-intention': 'passthrough',
	},
	})
	}

This instruction later gets interpreted by the library to not produce any mocked response. There's no request cloning as far as I'm concerned but I may be missing something. Do you have some debugging info that made you conclude the request cloning may be causing this?

[Ahmad-Alzamer]

here is my handler:

// tried once with passthrough
    http.post('https://httpbin.org/post',async ({request,params,cookies})=>{
        return passthrough();
    }),

//also, tried without passthrough
    http.post('https://httpbin.org/post',async ({request,params,cookies})=>{
        // return passthrough();
        const data = await request.formData();
        console.info('msw received data', data.get('json'))
        return HttpResponse.json({
            'status':'success',
            'data':data.get('json')
        });
    }),

but the the axios onUploadProgress callback was never called.
I looked at the test you linked and it looks like it should at least be called one time but that does not happen when I run the application

I was looking at the code in the mockServiceWorker.js:

  function passthrough() {
    const headers = Object.fromEntries(requestClone.headers.entries())

    // Remove internal MSW request header so the passthrough request
    // complies with any potential CORS preflight checks on the server.
    // Some servers forbid unknown request headers.
    delete headers['x-msw-intention']

    return fetch(requestClone, { headers })
  }

also, I checked the network tab in the chrome developer tool, if I use passthrough, it will actually go out as fetch to the real endpoint:

and the initiator tab is showing that the fetch request went out from the mockServiceWorker.js:

I just noticed that the test link that you shared Axios upload request test is for node. my use case is for the browser. could it be that there is a discrepancy in behavior of MSW between the browser and node ?

[williamisnotdefined]

@Ahmad-Alzamer did you find any solution? I'm the same situation..

[Ahmad-Alzamer]

@williamisnotdefined, no.
had to go through through some try and error between my local (where MSW is enabled) and dev environment (where MSW is disabled) to make sure that my code is correct.

[nurzhan-sabitov]

Having kinda same problem with passing through a request as-is.

Versions of used libraries:
"msw": "^2.4.9",
"axios": "^1.6.8".

[Ahmad-Alzamer]

sadly, no.
MSW will use fetch when forwarding the calls.
the progess event is only available in XHR

so, unless MSW is updated to use XHR or EcmaScript is updated so that fetch will have progress events. this issue won't be resolved.

[kettanaito]

The thing is, XMLHttpRequest isn't available in the Service Worker global scope. Neither can you tell that a Request was performed by XMLHttpRequest in the worker. That doesn't seem to be possible by the Service Worker API design, sadly.

[kettanaito]

Solution

For anyone encountering this, here's how to fix this. You have to use the XMLHttpRequestInterceptor from @mswjs/interceptors manually to intercept XHR requests and support upload there. The Service Worker API coerces all intercepted requests to Fetch API requests, and those do not have a concept of upload progress.

Here's an example of how to use Interceptors to resolve your existing request handlers against an XHR interceptor that does support the upload progress:

import { getResponse } from 'msw'
import { XMLHttpRequestInterceptor } from '@mswjs/interceptors/XMLHttpRequest'
import { handlers } from './your/handlers/here'

const interceptor = new XMLHttpRequestInterceptor()
interceptor.on('request', ({ request, controller }) => {
  const response = await getResponse(handlers, request)
  if (response) controller.respondWith(response)
})

interceptor.apply()

Use this alongside the setupWorker() integration. XHR interceptor patches the XMLHttpRequest class, so MSW won't be able to "see" those requests anymore. The XHR interceptor will though.

[kettanaito]

I am mentioning this in the library's Limitations and including the recipe on how to support XMLHttpRequest progress events.