Unable to use @sentry/react v8 in module federated React app. #14017
Description
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?
Self-hosted/on-premise
Which SDK are you using?
@sentry/react
SDK Version
8.34.0
Framework Version
React 18.3.1
Link to Sentry event
No response
Reproduction Example/SDK Setup
import React, { StrictMode } from "react";
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { authRoutes } from "./routes/auth";
import { profile_routes } from "./routes/profile";
import { dash_routes } from "./routes/dash";
import * as Sentry from "@sentry/react";
const router = createBrowserRouter([
{
path: "/",
// element: <Layout />,
children: [
...authRoutes,
...profile_routes,
...dash_routes,
],
},
]);
Sentry.init({
dsn: "https://0af5d5d3a68b61bcf9ddbf6cf37bc16a@o4508091178483712.ingest.us.sentry.io/4508138187653120",
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
// Tracing
tracesSampleRate: 1.0, // Capture 100% of the transactions
// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Session Replay
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
)
Here,
I have three react apps namely AuthApp, ProfileApp & DashApp, where all routes are serving from AuthApp and sentry is also configured in AuthApp.. Those remaining apps ProfileApp & DashApp getting from module federation. That's the problem here. If i disabled those module federation connected apps, it works fine. If i included it getting the below warning
WARNING in shared module @sentry/react -> /usr/src/app/node_modules/@sentry/react/build/esm/index.js
No version specified and unable to automatically determine one. No version in description file (usually package.json).
Add version to description file /usr/src/app/node_modules/@sentry/react/build/esm/package.json,
or manually specify version in shared config.
Connecting other react apps using Module Federation Configuration:
In webpack config file:
const { ModuleFederationPlugin } = require("webpack").container;
new ModuleFederationPlugin({
name: "loginApp",
remotes: {
profileApp: `profileApp@${domain}:4002/remoteProfileEntry.js`,
dashApp: `dashApp@${domain}:4001/remoteCommonEntry.js`,
},
shared: {
react: {
requiredVersion: "17.0.2",
singleton: true,
eager: true,
},
"react-dom": {
requiredVersion: "17.0.2",
singleton: true,
eager: true,
},
"@sentry/react": {
requiredVersion: "8.34.0",
singleton: true,
eager: true,
},
},
}),
Steps to Reproduce
Step1: Create two or more react dummy apps.
Step2: Connect all three apps using Module Federation in webpack config file as above.
const { ModuleFederationPlugin } = require("webpack").container;
Step3: Make one app as main and serve your react routes from there.
Step4: Finally integrate the @sentry/[email protected] to the main app where all the routes are serving.
Step5: If you did the above steps correctly, you will notice a waring in the UI.. All works fine the errors are catching by it, getting email and displaying in account issues dashboard.. But getting warning on the SCREEN which we can't move further.
Step6: Disabling that modully connected apps all works fine without the error.
Expected Result
Need to avoid the below warning in react module federation connected apps, like how it works in standalone react apps.
Disabling that modully connected apps all works fine without the error. But i need use sentry/react in module federation apps also without any errors.
Actual Result
need use sentry/react in module federation apps also without any errors.
