Single-SPA 2 applications example

[philearley]

Hey, apologies if this question should be asked in a different forum.

I am using Single-SPA https://single-spa.js.org/

We have 2 repos loaded in this environment and while we wait for the api's to be written, we're using the browser to demo what we have in master.

We have two challenges:

1. Although there are two registered service workers for repo 1 and another for repo 2, they both intercept the requests meaning one overrides the other should they also mock the same end point.
2. As they are both being loaded, both repos need to be on the same version of msw otherwise we encounter the error of running the init command. If we need to, we can have an internal way of enforcing a specific version of msw for all apps, although we'd like to avoid if possible.

Have I missed something in the documentation that can cater for the above?
Or do you have some ideas in handling this scenario?

[kettanaito]

Hey, @philearley. Thanks for reaching out.

I don't have experience with Single SPA, but from what I can gather it looks like both of your "micro-services" register the worker from MSW, and that causes the problem. Since each such service is a standalone app, it makes sense to have an MSW setup individually, especially if those apps are in different repositories.

However, no matter how many apps this frameworks puts together, it's still a single client (tab) from the worker's perspective. Having multiple same-purposed workers on a single client isn't a good idea, as it subjects their operation to race conditions and all sorts of strange behavior, which I think you're experiencing.

What to do

Check the clients

I don't have an exact setup to recommend here, so we'd have to experiment. I wonder if the map of client IDs is different in those two workers? You can check that by modifying your both worker scripts to log out this variable into the browser's console:

msw/src/mockServiceWorker.js

Line 13 in 5d842c5

let clients = {}

Each worker instance keeps a map of client IDs (tab IDs) controlled by that worker. In other words, those are references to tabs that registered/activated that worker. Upon each request the running worker checks if the client that sends a request is present in the map of clients relevant to the worker, and handles the request only if it's present:

msw/src/mockServiceWorker.js

Lines 95 to 96 in 5d842c5

	// Bypass mocking if the current client has mocking disabled
	!clients[clientId] ||

Technically, if each app registers it own worker and produces a unique client ID, there should be no issue. What I'm afraid is happening is that the client ID is assigned per tab, and since you're loading both apps in a single tab, both workers will store that tab as their controlled client. If that's the case, I don't think there's much we can do, as that's not how service worker are designed to be used.

Versioning

As they are both being loaded, both repos need to be on the same version of msw otherwise we encounter the error of running the init command

Could you please share the exact error you get?

[philearley]

@kettanaito thank you for responding.

In regards to the error we get it's this one,

msw/src/setupWorker/start/utils/getWorkerInstance.ts

Lines 78 to 80 in 2943c08

	[MSW] Failed to register a Service Worker for scope ('${scopeUrl.href}') with script ('${absoluteWorkerUrl}'): Service Worker script does not exist at the given path.
	Did you forget to run "npx msw init <PUBLIC_DIR>"?

As you mentioned, because both workers are present both handlers are intercepting the request.
App 1 will be fine when worker 1 intercepts, but when worker 2 intercepts, the above error will be displayed. The same if it was App 2 finding worker 1. (I hope that makes sense)

I think both issues are linked though, based on what you're saying about the id's being based on the tab they are generated from.

I should have some more time to investigate this week, I'll see what is happening around the id's and see if we can find a solution/work around. Will report back findings and go from there.

[kettanaito]

Sorry, but I don't have a proper suggestion for this at the moment. Feel free to contribute here if you find out the right way to integrate MSW into a Single-SPA project. Most of the time it's the issue with properly placing or serving the worker script.

[cliffordfajardo]

@philearley - were you able to get micro-frontend / federated frontend setup to work with MSW?

Other References

• Discussion's: msw in a module federation setup #1078