Using source maps in a microfrontend architecture

[jezzdk]

We are currently running a React host app that are integrating a number of microfrontends.
The host app and the microfrontends are built individually using Webpack and Module Federation.
Sentry is initialized in the host app only, and we have only one Sentry project that receives all events (no routing to other projects).

I can't figure out how to handle source maps correctly. The source maps from the host app is uploaded using the SentryWebpackPlugin and works just fine, but the source code for the microfrontends are all minified.

What do I do with the source maps of each of the microfrontends? Do I upload each artifact to the one project in Sentry, together with the host app source maps? Do I need to tag the release with the same name across all artifacts?

I've checked the documentation here, but it only describes how to route events to other projects, not how to handle the source maps.

[lforst]

Ideally you use the newest version of the webpack plugin to upload sourcemaps for all of the individual MFEs to the same project. Make sure to use the debug ID process, otherwise this is gonna be painful af.

[jezzdk]

Ideally you use the newest version of the webpack plugin to upload sourcemaps for all of the individual MFEs to the same project. Make sure to use the debug ID process, otherwise this is gonna be painful af.

Does that mean that as long as the sourcesmaps has a debug ID, Sentry will be able to map the code?

I'm current using the simple snippet below to upload the source maps to the same project. Are there any special considerations about the release name?

sentryWebpackPlugin({
  org: '[ORG]',
  project: '[PROJECT]',
  authToken: '[AUTH_TOKEN]',
  release: {
    name: `[APP_NAME]@[VERSION]`,
  },
  moduleMetadata: ({ release }) => ({
    release,
  }),
}),

[lforst]

The source files need to contain debug ID snippets and the the .js files and .js.map files that you generate need to be uploaded. Those are the only requirements. In theory, the way you have the webpack plugin set up, this should already be the case. Just make sure all your webpack plugins are pointing to the same project and you're also using the same DSN (pointing to the project) for all of the MFEs.