feat(browser): Add moduleMetadataIntegration lazy loading support (#1…

…3817)

This PR fixes #13803, and adds support for `moduleMetadataIntegration`
to be lazy loaded, in
[this](https://docs.sentry.io/platforms/javascript/configuration/integrations/#2-load-from-cdn-with-lazyloadintegration)
manner.
This integration is crucial for the [micro-frontend recommended
solution](https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/#automatically-route-errors-to-different-projects-depending-on-module).

dev-packages/browser-integration-tests/suites/integrations/lazyLoad/moduleMetadataIntegration/init.js

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [],
+});
+
+window.Sentry = {
+  ...Sentry,
+  // Ensure this is _not_ set
+  moduleMetadataIntegration: undefined,
+};

dev-packages/browser-integration-tests/suites/integrations/lazyLoad/moduleMetadataIntegration/subject.js

@@ -0,0 +1,7 @@
+window._testLazyLoadIntegration = async function run() {
+  const integration = await window.Sentry.lazyLoadIntegration('moduleMetadataIntegration');
+
+  window.Sentry.getClient()?.addIntegration(integration());
+
+  window._integrationLoaded = true;
+};

dev-packages/browser-integration-tests/suites/integrations/lazyLoad/moduleMetadataIntegration/test.ts

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { SDK_VERSION } from '@sentry/browser';
+
+import { sentryTest } from '../../../../utils/fixtures';
+
+sentryTest('it allows to lazy load the moduleMetadata integration', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/modulemetadata.min.js`, route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/javascript;',
+      body: "window.Sentry.moduleMetadataIntegration = () => ({ name: 'ModuleMetadata' })",
+    });
+  });
+
+  await page.goto(url);
+
+  const hasIntegration = await page.evaluate('!!window.Sentry.getClient()?.getIntegrationByName("ModuleMetadata")');
+  expect(hasIntegration).toBe(false);
+
+  const scriptTagsBefore = await page.evaluate<number>('document.querySelectorAll("script").length');
+
+  await page.evaluate('window._testLazyLoadIntegration()');
+  await page.waitForFunction('window._integrationLoaded');
+
+  const scriptTagsAfter = await page.evaluate<number>('document.querySelectorAll("script").length');
+
+  const hasIntegration2 = await page.evaluate('!!window.Sentry.getClient()?.getIntegrationByName("ModuleMetadata")');
+  expect(hasIntegration2).toBe(true);
+
+  expect(scriptTagsAfter).toBe(scriptTagsBefore + 1);
+});

dev-packages/browser-integration-tests/utils/generatePlugin.ts

@@ -37,6 +37,7 @@ const IMPORTED_INTEGRATION_CDN_BUNDLE_PATHS: Record<string, string> = {
   reportingObserverIntegration: 'reportingobserver',
   sessionTimingIntegration: 'sessiontiming',
   feedbackIntegration: 'feedback',
+  moduleMetadataIntegration: 'modulemetadata',
 };
 
 const BUNDLE_PATHS: Record<string, Record<string, string>> = {

packages/browser/rollup.bundle.config.mjs

@@ -12,6 +12,7 @@ const reexportedPluggableIntegrationFiles = [
   'rewriteframes',
   'sessiontiming',
   'feedback',
+  'modulemetadata',
 ];
 
 browserPluggableIntegrationFiles.forEach(integrationName => {

packages/browser/src/integrations-bundle/index.modulemetadata.ts

@@ -0,0 +1 @@
+export { moduleMetadataIntegration } from '@sentry/core';

packages/browser/src/utils/lazyLoadIntegration.ts

@@ -21,6 +21,7 @@ const LazyLoadableIntegrations = {
   rewriteFramesIntegration: 'rewriteframes',
   sessionTimingIntegration: 'sessiontiming',
   browserProfilingIntegration: 'browserprofiling',
+  moduleMetadataIntegration: 'modulemetadata',
 } as const;
 
 const WindowWithMaybeIntegration = WINDOW as {