[instrumentation-fetch] Use msw for fetch instrumentation tests

[chancancode]

Which problem is this PR solving?

Currently the test suite heavily relies on mocking to work, specifically it uses sinon.stub(window, 'fetch') to replace it with a custom function that is intended to work similarly to the real one. However, the actual behavior of fetch is very complicated and is very difficult to get right, with a lot of subtle interactions around CORS, redirects, resource timing, etc.

Issues like #5122 is kind of an extreme example of the problem (assuming the report is correct), where the current code and the "fake fetch" are assuming a browser behavior that didn't actually exist, and the current tests are explicitly confirming that non-existent behavior based on the bad stub.

This is a problem, considering that the point of the this package (and consequently, what we are trying to test) is:

1. replace the globals with an instrumented version without introducing any breakages
2. extract the relevant information from the browser into the spans

Essentially, we are testing that "if our assumptions about how the browser works is correct, then our instrumentation code behaves correctly".

The current factoring of the tests – a big setup block that needs to handle all the various edge cases under test – is also quite difficult to work with. It would be quite complex to add additional test coverage for things like redirects and opaque responses.

In the case of fetch, there is a better way to go about this and use as much of the real browser functionalities as possible.

Service Workers allows webpages to intercept network requests (like fetch() and XHR, but also other resources), and msw is a library to make that work nicely for testing/development workflows. Essentially, it allows for mocking/intercepting any fetch() requests in the tests while still invoking the actual native fetch() function in the browser.

Improvements Made

• Completely refactored all fetch instrumentation tests
• Use Service Worker via msw
• No longer mocks/stubs browser functionalities in these tests – all fetch() requests are actually made, and all timing information came from the real resource-timing browser APIs
• Broke up the setup code into smaller pieces specific to each group of test
• Removed incorrect/unrealistic CORS tests (CORS Preflight Requests not accounted for #5122)
• Improved type safety (no more any)
• General small improvements along the way

Future Improvements

Potentially these tests can be run in additional browsers (e.g. Firefox) to improve coverage by changing the karma config. This will ensure we aren't accidentally targeting any chrome-specific behavior in the instrumentation code.

This approach also works with XHR, so we could also do the same refactor to those tests. (I'm unsure if I'll personally have time to finish that, but I think set up a good foundation/framework to follow if someone wants to do that.)

TODOs

• Code review(s) – for your convenience, I broke up this PR into a series of commits, each porting one group of related tests, I'd recommend reviewing it that way (I also mostly kept the tests in the same order, if you want to just open both files side-by-side and review that way)
• Determine how to proceed with fix(inst-fetch,inst-xhr) Ignore network events with zero-timing #5332 and either
  • Merge fix(inst-fetch,inst-xhr) Ignore network events with zero-timing #5332 and remove the placeholder fix here
  • Merge a conservative fix similar to the one in this PR
  • Disable or tweak the unstable tests for the time being
• Remove the 500ms timeout in each test – currently, these tests are a bit slow because I added an artificial 500ms timeout to each call to fetch() to ensure the resource-timing information made it to the instrumentation's PerformanceObserver (plus the instrumentation code also has its own 300ms artificial timeout)

[chancancode]

Discussed this at the Dec 18 SIG meeting, the group seems generally onboard with trying this out, so I'll keep pushing forward on this and report any issues with the approach

[chancancode]

Discussed in the SIG meeting today, the group is generally in favor with the approach, I'll clean it up and get things ready for merge.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.58%. Comparing base (fc0edd8) to head (9f8149c).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5282   +/-   ##
=======================================
  Coverage   94.58%   94.58%           
=======================================
  Files         318      318           
  Lines        8069     8069           
  Branches     1701     1701           
=======================================
  Hits         7632     7632           
  Misses        437      437           

[chancancode]

@pichlermarc and other reviewers, this is not ready for merge just yet (see TODOs) but the code should be ready for review!

For your convenience, I broke up this PR into a series of commits, each porting one group of related tests, I'd recommend reviewing it that way. I also mostly kept the tests in the same order, if you want to just open both files side-by-side and review that way.

Would appreciate it if anyone has time to do a pass, even if incomplete, so we can discuss any issues/feedback on the Wednesday SIG 🙏🏼