Do not listen to all messages posted on broswer

Describe the bug

MSW reads all posted messages as MSW messages. However, anything can post a message. In particular, the react dev tools posts messages all the time. With MSW installed, MSW will throw uncaught exceptions.

Environment

• msw@0.24.4
• nodejs: v14.15.1
• npm: 6.14.4

Google Chrome Version 87.0.4280.141 (Official Build) (x86_64) macOS Big Sur 11.1

To Reproduce

Steps to reproduce the behavior:

1. Install React Developer Tools
2. Run test suite (on a browser) with MSW
3. See error in console

Expected behavior

There shouldn’t be any errors.

Screenshots

Here is a screenshot of the failing line in MSW:

And more stack traces (which all seem to be related to react-dev-tools):

[juanca]

An observation:

The test does not fail because MSW handles all desired requests successfully. The undesired requests (from other sources) throw an exception but it does not affect the outcome of the test.

While it is not blocking test development, it is annoying to see a few unhandled exceptions per test. When you have a codebase with 1k+ tests, this can become overwhelming.

[marcosvega91]

I think that to replicate the issue you can simply call window.postMessage on a page of puppeteer using page.evaluate

const runtime = await runBrowserWith(path.resolve(__dirname, 'mocks.ts'))

runtime.page.evaluate(() => {
   window.postMessage({
       source: 'external-message',
   });
})