getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.95k stars 1.56k forks source link

Unable to use @sentry/react v8 in module federated React app. #14017

Open MegaDhakse2 opened 3 hours ago

MegaDhakse2 commented 3 hours ago

Is there an existing issue for this?

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: "18.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/react@8.34.0 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.

Image

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.

Image

chargome commented 2 hours ago

Hey @MegaDhakse2 this rather looks like a webpack error for module federation. The only thing I spotted here is that you have set a required version 18.34.0 for @sentry/reactwhich does not exist.