Sentry support in Module Federation

[geralt-debugs]

Webpack recently released module federation. Using this plugin, one can deploy multiple web apps(which may or may not be related framework wise) in a single webpage seamlessly.

Though this is great, it is now not possible to track JS errors as errors may occur in any part of the code. Sentry intercepts errors at a global level. That error is tagged with a release version and the sourcemaps related to that release is used for displaying the real source.

But now since error source can be any part of the code and that part can have different release versions, how can I communicate the release version to sentry so that my error can get successfuly decoded by the sourcemap.

Currently is there any way to tackle this problem?

Issue in webpack's repository webpack/webpack#12706

[ScriptedAlchemy]

Ahhh yes here it is! As the creator of module federation, this is a biiiig area of opportunity to support

[devbucket]

We have the same issue here in our company.
We moved our product to full site federation with ModuleFederation.
(thank @ScriptedAlchemy for that! Really awesome!)

[ScriptedAlchemy]

Looking to bump this.. is it possible to update the DSN or have a part of the react tree point to another sentry DSN. Since my components are loaded from different teams, I want sentry to report back to the various DSNs that represent the workstreams

For example:
I have a product page hosted by one application. It can run "standalone" and SSr itself.
I have another app with checkout.

instead of reinstalling a npm package or something to distribute the code, creating drifting duplicates. Im able to use module federation to import the checkout-modal from checkout and render it inside product page. Now id an error is thrown in the checkout modal, the checkout team likely needs to be paged because the consuming team just places the <Modal>

So when a team-owned component fails, I need to report to the owning team that its errored and where.

[JoseMartinC]

Hello there!

Is there any progress or official statement from the Sentry team on giving support to Module Federation any time soon?

Maybe any workaround allowing us to use multiple DSNs within the same app?

Cheers!

[ScriptedAlchemy]

Also looking for an update on this.

[kamilogorek]

We haven't look into this yet, so there's nothing I can say tbh.

Looking to bump this.. is it possible to update the DSN or have a part of the react tree point to another sentry DSN. Since my components are loaded from different teams, I want sentry to report back to the various DSNs that represent the workstreams

This would currently require multiple clients, as detailed here: https://docs.sentry.io/platforms/javascript/troubleshooting/#using-a-client-directly
It won't play nicely with propagating breadcrumbs throughout all those clients. This is something that we are working on, and there's currently no easy workaround for this.

[ScriptedAlchemy]

Solved this problem. https://scriptedalchemy.medium.com/distributed-logging-in-federated-applications-with-sentry-f4249aa66e20

[mroswald]

Solved this problem. https://scriptedalchemy.medium.com/distributed-logging-in-federated-applications-with-sentry-f4249aa66e20

We use a similar approach of binding hubs to error boundaries on the micro-frontend level. Does your approach work with breadcrumbs? We managed to send them via integrations and building a custom integration to catch breadcrumbs in hubs instead of the global scope, but it's a lot of custom code. Would be really nice to get such functionality from the library itself.