fix(browser): Ensure lazyLoadIntegration works in NPM mode

Author: mydea

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

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+// So we can use this in subject.js
+// We specifically DO NOT set this on window.Sentry as we want to test a non-CDN bundle environment,
+// where window.Sentry is usually not available
+window._testSentry = { ...Sentry };
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [],
+});

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

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

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

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { SDK_VERSION } from '@sentry/browser';
+
+import { sentryTest } from '../../../../utils/fixtures';
+
+sentryTest('it allows to lazy load an integration when using the NPM package', async ({ getLocalTestUrl, page }) => {
+  const bundle = process.env.PW_BUNDLE || '';
+  // We only want to run this in non-CDN bundle mode
+  if (bundle.startsWith('bundle')) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/httpclient.min.js`, route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/javascript;',
+      body: "window.Sentry = window.Sentry || {};window.Sentry.httpClientIntegration = () => ({ name: 'HttpClient' })",
+    });
+  });
+
+  await page.goto(url);
+
+  const hasIntegration = await page.evaluate('!!window._testSentry.getClient().getIntegrationByName("HttpClient")');
+  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._testSentry.getClient().getIntegrationByName("HttpClient")');
+  expect(hasIntegration2).toBe(true);
+
+  expect(scriptTagsAfter).toBe(scriptTagsBefore + 1);
+});

packages/browser/src/utils/lazyLoadIntegration.ts

@@ -33,12 +33,15 @@ const WindowWithMaybeIntegration = WINDOW as {
 export async function lazyLoadIntegration(name: keyof typeof LazyLoadableIntegrations): Promise<IntegrationFn> {
   const bundle = LazyLoadableIntegrations[name];
 
-  if (!bundle || !WindowWithMaybeIntegration.Sentry) {
+  // `window.Sentry` is only set when using a CDN bundle, but this method can also be used via the NPM package
+  const sentryOnWindow = (WindowWithMaybeIntegration.Sentry = WindowWithMaybeIntegration.Sentry || {});
+
+  if (!bundle) {
     throw new Error(`Cannot lazy load integration: ${name}`);
   }
 
   // Bail if the integration already exists
-  const existing = WindowWithMaybeIntegration.Sentry[name];
+  const existing = sentryOnWindow[name];
   if (typeof existing === 'function') {
     return existing;
   }
@@ -61,7 +64,7 @@ export async function lazyLoadIntegration(name: keyof typeof LazyLoadableIntegra
     throw new Error(`Error when loading integration: ${name}`);
   }
 
-  const integrationFn = WindowWithMaybeIntegration.Sentry[name];
+  const integrationFn = sentryOnWindow[name];
 
   if (typeof integrationFn !== 'function') {
     throw new Error(`Could not load integration: ${name}`);