Sentry into Microfrontend

[seema-0611]

How do we integrate Sentry into a microfrontend project built with React and Rspack as the bundler?

[markmssd]

Have you tried https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends?

[seema-0611]

I am not sure , if I am doing it in correct way.
In the shell repo , I have initialized Sentry like this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { BaseLayout } from './components';
import { GlobalProvider } from './context';
import ErrorBoundary from './ErrorBoundary';
import './index.css';
import {
init,
makeFetchTransport,
moduleMetadataIntegration,
makeMultiplexedTransport,
} from "@sentry/browser";

const EXTRA_KEY = "ROUTE_TO";

const transport = makeMultiplexedTransport(makeFetchTransport, (args) => {
const event = args.getEvent();
if (
event &&
event.extra &&
EXTRA_KEY in event.extra &&
Array.isArray(event.extra[EXTRA_KEY])
) {
return event.extra[EXTRA_KEY];
}
return [];
});

init({
dsn: "_DEFAULT_DSN",
environment: process.env.NODE_ENV,
integrations: [moduleMetadataIntegration()],
transport,
beforeSend: (event) => {
if (event?.exception?.values?.[0].stacktrace.frames) {
const frames = event.exception.values[0].stacktrace.frames;
// Find the last frame with module metadata containing a DSN
const routeTo = frames
.filter(
(frame) => frame.module_metadata && frame.module_metadata.dsn,
)
.map((v) => v.module_metadata)
.slice(-1); // using top frame only - you may want to customize this according to your needs

  if (routeTo.length) {
    event.extra = {
      ...event.extra,
      [EXTRA_KEY]: routeTo,
    };
  }
}

return event;

},
});

const rootEl = document.getElementById('root');
if (rootEl) {
const root = ReactDOM.createRoot(rootEl);
root.render(
<React.StrictMode>









</React.StrictMode>
);
}
In webpack.config.ts
const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

module.exports = {
// ... other options
devtool: "source-map", // Source map generation must be turned on
plugins: [
// Put the Sentry Webpack plugin after all other plugins
sentryWebpackPlugin({
authToken: process.env.SENTRY_AUTH_TOKEN,
org: "org",
project: "project,
moduleMetadata: ({ release }) => ({
dsn: "_MODULE_DSN",
release,
}),

}),

],
and in another microfrontend project , I have only add webpack.config file with different DSN.

The issue is that if I am throwing error in my other microfrontend project , It is captured by DSN of shell project.It is not differentiating among the microfronted.

[markmssd]

You can try to console.log(routeTo) in the frontend, and see if it correctly has the release/dsn from the other microfrontend.

[markmssd]

Also, make sure that you have selected the Latest issue in the dropdown, it might help seeing what you're expecting:

[seema-0611]

I have checked it , stack trace frame do not have module_metadata property in it. I guess metadata is not correctly injected.
As a result , toroute is an empty array.

[markmssd]

Make sure you're on the latest version of the plugin, and if it's still not working, you should open an issue in their repo!