Sentry is not working with module federation

[SarathSantoshDamaraju]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

^7.107.0

Framework Version

vue:2.6.12 (HOST APP) , vue:3.2.45 (REMOTE APP)

Link to Sentry event

No response

Reproduction Example/SDK Setup

I am unable to get sentry work with the Module federation setup following this document https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/#automatically-route-errors-to-different-projects-depending-on-module

Things to Note

1. the setup works when tested from the local in DEV mode
2. But then BUILT for STAGING or PRODUCTION and DEPLOYED. It is not working in those env.
3. I have tested there are no filters or related config is passed.

Detailed Notes

1. Our use-case is, we load vue3 apps(REMOTE Apps, with no sentry setup.) into vue2(HOST APP, with Sentry.init()) with the module federation of webpack. Which is already pushed to the prod couple of quarters back.
2. Now, we want to set up individual "projects" for each of these REMOTE federated applications to assign the errors to the correct team using https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/. Which is a blocker (Issue -2)
3. In the process of debugging, We have observed that, if an error logged on the HOST App, it reaches sentry. But an error logged from the REMOTE app Sentry logs are missing and we have seen no api calls from sentry for such errors. So we can assume, they are not reaching sentry in the PROD environment. (Issue -1, may be the underlying cause)
4. This is not working even with "global" or "window" error handlers (Like window.onerror or window.addEventListener('unhandledrejection') nor "sentry.captureError" . So nothing is able to capture the error triggered on the REMOTE(federated apps) when they are deployed to Prod.

Steps to Reproduce

1. Setup a VUE2 HOST APP
2. Load any VUE3 remote app into it with help of module federation with webpack, by following https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/#automatically-route-errors-to-different-projects-depending-on-module
3. Build it and push the code / run in local.
4. try to trigger any error on the REMOTE APP and you see it wont be reaching to sentry

Expected Result

1. As per the docs, sentry on the HOST App should redirect the errors to the right project using the DSN returned from the transporter.

Actual Result

you see no errors are reaching to sentry

[chargome]

Hey @SarathSantoshDamaraju thanks for writing in. Are you using the same SDK version across your microfrontends? To solve your issue more effectively could you please provide your init call of the host app, or even better a small repo to reproduce this issue?

[chargome]

@SarathSantoshDamaraju I got your code snippet from our support team. Some things to mention:

• In your beforeSend callback of your host app you need to return the event at the end, otherwise it will get dropped.
• Can you confirm that all your DSNs are set correctly, e.g. all env vars are passed on correctly to your remote apps?

This is not working even with "global" or "window" error handlers (Like window.onerror or window.addEventListener('unhandledrejection') nor "sentry.captureError" .

Are you referring to unhandled global errors here, meaning you don't get any issues from your remote apps?

[SarathSantoshDamaraju]

Hello @chargome

Firstly, thanks for the quick response.

1. Yes we do return the event in before send. We are filtering some specific errors but we have double checked for this.
2. Yeah, dsn is correct as the errors are coming to correct projects when tested in local.
3. With the global error handler, we tried to register an handler and manually send the errors to sentry, but we observed that the global event handlers are not capturing errors from the child app.

Let me give you a repo with sample code to debug.