Console flooded with RESPONSE LISTENER objects and image loading warnings on new v2.x project

[reintroducing]

I've just started a new project with Vite and am using the latest version of msw (used v1.32 previously on an older project) and am setting it up to handle requests. I haven't even made a request yet, just getting the setup completed to be able to take requests (I have two handlers registered but haven't actually called those APIs in the app yet). I'm immediately seeing a flood of these in the console after i finished the setup:

What exactly is going on here and how do I disable this? Or is this telling me I have an issue somewhere that I need to resolve?

I'm using this to get set up:

async function enableMocking() {
  if (import.meta.env.PROD) {
    return Promise.resolve();
  }

  const {worker} = await import('./mocks/browser');

  return worker.start({quiet: true, onUnhandledRequest: 'bypass'});
}

On another note, I had to set onUnhandledRequest: 'bypass' because if I didn't, i also got a bunch of the following warnings for images my project is loading:

Our images are .avif format. We're also loading some .ttf fonts which are also showing these warnings.

Can anyone help me figure out what's going on with these two issues?

[reintroducing]

@kettanaito I was able to change the enableMocking method to the following which got rid of the second screenshot (warnings):

async function enableMocking() {
  if (import.meta.env.PROD) {
    return Promise.resolve();
  }

  const {worker} = await import('./mocks/browser');

  return worker.start({
    quiet: true,
    onUnhandledRequest: (request, print) => {
      if (request.url.toString().startsWith(DEV_BASE_API_URL)) {
        print.error();
      }
    },
  });
}

However, the first logs are still happening. I looked at the source and it looks like they are originating here (

msw/src/browser/setupWorker/start/createResponseListener.ts

Line 24 in a33d9e5

console.log('RESPONSE LISTENER', responseJson, context.requests)

) but i don't see anywhere that you can disable that log. How can i disable that so that I don't get flooded with these requests, especially since i'm now pinpointing the unhandled responses to my API url (the API is at 'http://localhost:3000/api' while these requests come from 'http://localhost:3000/images/*' and 'http://localhost:3000/fonts/*' (these are paths in the public directory where my Vite assets are being pulled from during development).

[kettanaito]

Thanks for letting me know about this! Fixed in #2099.

[reintroducing]

@kettanaito awesome, thank you! when will a release with that fix go out?

Additionally, is the way that I'm handling that second screenshot correct? or should I do something differently?

[kettanaito]

@reintroducing, regarding the second screenshot, bypass is not the solution. You still want to be warned about the requests you don't handle so they don't slip past your eyes.

Instead, use a custom onUnhandledRequest() predicate function:

• Documentation
• Whitelist a request #1231 (comment)

[reintroducing]

@kettanaito yep, totally, and I tried to do that in this reply: #2096 (comment) (first bit of code), so i THINK that's the way I want to go about it?

[kettanaito]

Yes, that sounds reasonable to me!

[reintroducing]

Awesome, appreciate your help.