Faulty source maps with micro frontend architecture

[shakedhagag]

Debug IDs arent matching

Hi,

1. I have a micro-frontend architecture app written in react, and I'm currently trying to integrate sentry with some of my modules.
2. I created a SentryWrapper library with react and vite to handle some data related stuff and ease my implementation inside each module.
3. I Installed the SentryWrapper ("fed-sentry-reporter") inside one of my modules, configured the sentryWebpackPlugin according to the documentation, and errors propagate correctly to the right dashboard.
4. In regards to the source maps, im facing some issues. Tried many things and read many discussions but nothing looks like my situation. It seems like the source maps debug_id's are not correct, none of them matches the debug id in my artifacts bundle.

I suspect it has something to do with the way I implemented things, or maybe the fact that I use two different bundlers (webpack, vite).
Note I have used the sentry wizard in both module and Wrapper library, to configure the source maps, and also checked config files are matching the manual installation documentation.

Any idea on what should I do?

my debug_meta for reference:
{ "debug_meta": { "images": [ { "type": "sourcemap", "code_file": " .... fed-sentry-reporter_dist_index_js-bundle.js", "debug_id": "1abb6ea2-893c-4c50-bc31-15b206550ea4" }, { "type": "sourcemap", "code_file": " ... app_conversation_components_Main_tsx-app_conversation_components_conversation-footer_feedback-eb8219-bundle.js", "debug_id": "1abb6ea2-893c-4c50-bc31-15b206550ea4" } ] } }

(replaced the url with "...")

[berg-dennis]

How was this solved? Facing the same issue atm 🤔