vite-plugin-federation mfe e2e test

chargome · chargome · commit c1021cabd968 · 2026-03-12T13:19:38.000+01:00
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/.npmrc b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/.npmrc
@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/index.html b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/package.json b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@browser-mfe-vite/mfe-header",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview --port 3032"
+  },
+  "dependencies": {
+    "@sentry/browser": "latest || *",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@originjs/vite-plugin-federation": "^1.3.6",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/src/App.tsx b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/src/App.tsx
@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import * as Sentry from '@sentry/browser';
+
+function MfeHeader() {
+  useEffect(() => {
+    Sentry.withScope(scope => {
+      scope.setTag('mfe.name', 'mfe-header');
+      fetch('http://localhost:6969/api/header-data');
+    });
+  }, []);
+
+  return <div id="mfe-header">Header MFE</div>;
+}
+
+export default MfeHeader;
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/vite.config.ts b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import federation from '@originjs/vite-plugin-federation';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    federation({
+      name: 'mfe_header',
+      filename: 'remoteEntry.js',
+      exposes: { './App': './src/App.tsx' },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    minify: false,
+  },
+  preview: { port: 3032 },
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/index.html b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/package.json b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@browser-mfe-vite/mfe-one",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview --port 3033"
+  },
+  "dependencies": {
+    "@sentry/browser": "latest || *",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@originjs/vite-plugin-federation": "^1.3.6",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/src/App.tsx b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/src/App.tsx
@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import * as Sentry from '@sentry/browser';
+
+function MfeOne() {
+  useEffect(() => {
+    Sentry.withScope(scope => {
+      scope.setTag('mfe.name', 'mfe-one');
+      fetch('http://localhost:6969/api/mfe-one-data');
+    });
+  }, []);
+
+  return <div id="mfe-one">MFE One</div>;
+}
+
+export default MfeOne;
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/vite.config.ts b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import federation from '@originjs/vite-plugin-federation';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    federation({
+      name: 'mfe_one',
+      filename: 'remoteEntry.js',
+      exposes: { './App': './src/App.tsx' },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    minify: false,
+  },
+  preview: { port: 3033 },
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/index.html b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MFE Shell</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/package.json b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@browser-mfe-vite/shell",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview --port 3030"
+  },
+  "dependencies": {
+    "@sentry/browser": "latest || *",
+    "@sentry/react": "latest || *",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@originjs/vite-plugin-federation": "^1.3.6",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/src/declarations.d.ts b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/src/declarations.d.ts
@@ -0,0 +1,11 @@
+declare module 'mfe_header/App' {
+  import type { ComponentType } from 'react';
+  const App: ComponentType;
+  export default App;
+}
+
+declare module 'mfe_one/App' {
+  import type { ComponentType } from 'react';
+  const App: ComponentType;
+  export default App;
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/src/main.tsx b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/src/main.tsx
@@ -0,0 +1,47 @@
+import React, { lazy, Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  environment: import.meta.env.MODE || 'development',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1.0,
+  tunnel: 'http://localhost:3031/',
+});
+
+// Workaround: propagate MFE identity from current scope to span attributes
+const client = Sentry.getClient()!;
+client.on('spanStart', span => {
+  const mfeName = Sentry.getCurrentScope().getScopeData().tags['mfe.name'];
+  if (typeof mfeName === 'string') {
+    span.setAttribute('mfe.name', mfeName);
+  }
+});
+
+// Load MFEs via Module Federation (React.lazy + dynamic import)
+const MfeHeader = lazy(() => import('mfe_header/App'));
+const MfeOne = lazy(() => import('mfe_one/App'));
+
+function App() {
+  return (
+    <div id="app">
+      <h1>Shell</h1>
+      <Suspense fallback={<div>Loading header...</div>}>
+        <MfeHeader />
+      </Suspense>
+      <Suspense fallback={<div>Loading mfe-one...</div>}>
+        <MfeOne />
+      </Suspense>
+    </div>
+  );
+}
+
+// Shell's own fetch — no MFE scope
+fetch('http://localhost:6969/api/shell-config');
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/tsconfig.json b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "strict": true,
+    "erasableSyntaxOnly": true
+  },
+  "include": ["src"]
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/vite.config.ts b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import federation from '@originjs/vite-plugin-federation';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    federation({
+      name: 'shell',
+      remotes: {
+        mfe_header: 'http://localhost:3032/assets/remoteEntry.js',
+        mfe_one: 'http://localhost:3033/assets/remoteEntry.js',
+      },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    minify: false,
+    envPrefix: ['PUBLIC_'],
+  },
+  envPrefix: ['PUBLIC_'],
+  preview: { port: 3030 },
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/package.json b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "browser-mfe-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm build:mfes && pnpm build:shell",
+    "build:mfes": "cd apps/mfe-header && pnpm build && cd ../mfe-one && pnpm build",
+    "build:shell": "cd apps/shell && pnpm build",
+    "preview": "concurrently \"cd apps/mfe-header && pnpm preview\" \"cd apps/mfe-one && pnpm preview\" \"cd apps/shell && pnpm preview\"",
+    "test": "playwright test",
+    "test:build": "pnpm install && pnpm build",
+    "test:assert": "pnpm test"
+  },
+  "devDependencies": {
+    "@playwright/test": "~1.56.0",
+    "@sentry-internal/test-utils": "link:../../../test-utils",
+    "concurrently": "^8.2.2"
+  },
+  "volta": {
+    "node": "20.19.2",
+    "yarn": "1.22.22",
+    "pnpm": "9.15.9"
+  }
+}
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/playwright.config.mjs
@@ -0,0 +1,41 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+
+const config = getPlaywrightConfig(
+  {
+    startCommand: 'pnpm preview',
+    eventProxyFile: 'start-event-proxy.mjs',
+    eventProxyPort: 3031,
+    port: 3030,
+  },
+  {
+    // Wait for all three servers to be ready
+    webServer: [
+      {
+        command: 'node start-event-proxy.mjs',
+        port: 3031,
+        stdout: 'pipe',
+        stderr: 'pipe',
+      },
+      {
+        command: 'cd apps/mfe-header && pnpm preview',
+        port: 3032,
+        stdout: 'pipe',
+        stderr: 'pipe',
+      },
+      {
+        command: 'cd apps/mfe-one && pnpm preview',
+        port: 3033,
+        stdout: 'pipe',
+        stderr: 'pipe',
+      },
+      {
+        command: 'cd apps/shell && pnpm preview',
+        port: 3030,
+        stdout: 'pipe',
+        stderr: 'pipe',
+      },
+    ],
+  },
+);
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/pnpm-workspace.yaml b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+packages:
+  - 'apps/*'
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/start-event-proxy.mjs
@@ -0,0 +1,6 @@
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+startEventProxyServer({
+  port: 3031,
+  proxyServerName: 'browser-mfe-vite',
+});
diff --git a/dev-packages/e2e-tests/test-applications/browser-mfe-vite/tests/mfe-span-attribution.test.ts b/dev-packages/e2e-tests/test-applications/browser-mfe-vite/tests/mfe-span-attribution.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('attributes fetch spans to their originating microfrontend', async ({ page }) => {
+  const transactionPromise = waitForTransaction('browser-mfe-vite', transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/');
+
+  const transactionEvent = await transactionPromise;
+  const httpSpans = transactionEvent.spans?.filter(span => span.op === 'http.client') || [];
+
+  // MFE spans carry the mfe.name attribute set via withScope + spanStart hook
+  const headerSpan = httpSpans.find(s => s.description?.includes('/api/header-data'));
+  const mfeOneSpan = httpSpans.find(s => s.description?.includes('/api/mfe-one-data'));
+  const shellSpan = httpSpans.find(s => s.description?.includes('/api/shell-config'));
+
+  expect(headerSpan).toBeDefined();
+  expect(mfeOneSpan).toBeDefined();
+  expect(shellSpan).toBeDefined();
+
+  expect(headerSpan?.data?.['mfe.name']).toBe('mfe-header');
+  expect(mfeOneSpan?.data?.['mfe.name']).toBe('mfe-one');
+
+  // Shell span has no MFE tag
+  expect(shellSpan?.data?.['mfe.name']).toBeUndefined();
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@sentry:registry=http://127.0.0.1:4873`
	`2`	`+@sentry-internal:registry=http://127.0.0.1:4873`