fetchEvent.respondWith Receives an Error in Safari Only

[wilbooorn]

Environment

Name	Version
msw	0.25.0
browser	Safari 14.0.2
OS	MacOS Catalina

Request handlers

// Example of declaration. Provide your code here.
import { setupWorker } from 'msw'

const handlers = [
  graphql.query('MeQuery', (_req, res, ctx) => {
    return res(
      ctx.data({
        ...
      }),
    );
  }),
  ...
];

const worker = setupWorker(...handlers)

worker.start()

Actual request

// Example of making a request. Provide your code here.
export const getMe = async () => {
  try {
    const response = await fetch(MOCK_URL, {
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      body: meQuery(),
    });
    ...
  } catch {
    ...
  }
};

Current behavior

On Chrome & Firefox, everything is fine. In Safari, it seems like the request gets intercepted, as I see the mock response in the console, but then the service worker throws an error, causing the fetch call to catch with error
[Error] FetchEvent.respondWith received an error: Returned response is null. (see screenshot). Not sure why it's trying to connect to localhost:8642. That's the local server I run when not using mocks.

Expected behavior

The fetch should return the mock response and not throw an error.

Screenshots

[teknotica]

I'm having the same issue on my React project 😢 (using the latest version of Create React App)

Chrome seems to return the mocks data ok even after showing this error:

FF & Safari don't work for me.

[kettanaito]

While the root cause of the issue is related to #529, there's a different client retrieval logic happening in Safari. The following expression throws in Safari only:

msw/src/mockServiceWorker.js

Line 193 in c45cf14

const client = await event.target.clients.get(clientId)

This can be fixed by determining the worker's client once, on the parent scope of the "fetch" event, and then reusing in both event.respondWith() and in the .then() chain responsible for sending back the original/mocked response to the client. I'll issue a pull request later today/tomorrow.

[kettanaito]

Upon further investigation, I can conclude that event.target is null in Safari for (?) opaque responses. It's possible to get the current client from the global service worker scope:

-event.target.clients.get(clientId)
+this.clients.get(clientId)

That returns the same client instance, as we are requesting it by clientId. The value of evet.target equals to this (global service worker scope) in other browsers (i.e. Chrome, Firefox).

[dagadbm]

this is still happening... I am on safari Version 14.0.3 (16610.4.3.1.4) and "msw": "^0.25.0", on package json

[kettanaito]

@dagadbm please update the msw package, you're using the same version that reported this issue. Generally, aim towards using the latest package versions.

[dagadbm]

Oh wow that was fast. Didn't know it was fixed so soon honestly. But I thought the real problem was safari not supporting the respondwith method. Also it is really not feasible for projects to be constantly updating their dependencies. Msw I give it a pass since it's a local host only thing but for other things it's not really high on anyone's priority list due to time constraints and so on. Anyways keep up the good work here looking forward for 1.0!

…

On Mon, Mar 1, 2021, 19:36 Artem Zakharchenko ***@***.***> wrote: @dagadbm <https://github.com/dagadbm> please update the msw package, you're using the same version that reported this issue. Generally, aim towards using the latest package versions. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#558 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD7WGR7YRPSYKLDF3RNBPSLTBPUFBANCNFSM4WNK4ZJA> .

[kodai3]

@kettanaito

Hi, thank you for your works.

I'm experiencing this issue on Safari 15.3(17612.4.9.1.8) with msw 0.42.3
Is it possible that it has recurred on updated Safari or msw?

[fillie]

We seem to be having the same issue on a later version of msw.

MSW v0.44.1

Firefox & Chrome work fine.

Seem to only have issues with Safari 15.3 and below.

[kettanaito]

@kodai3, perhaps. As always, I'd suggest updating msw to the latest version, and then let me know if the issue is gone. Hunting all the different browser quirks is rather daunting.

@fillie, what about Safari 15? We don't really promise support on all versions of all browsers, as those versions can implement the Service Worker spec differently. There isn't enough manpower to promise such support, sorry. If it works on the latest version, then I conclude it working.