test(loader): Ensure loader handles SDK being loaded in the meanwhile (#7970)

Author: mydea

packages/browser-integration-tests/loader-suites/loader/noOnLoad/sdkLoadedInMeanwhile/subject.js

@@ -0,0 +1,17 @@
+setTimeout(() => {
+  const cdnScript = document.createElement('script');
+  cdnScript.src = '/cdn.bundle.js';
+
+  cdnScript.addEventListener('load', () => {
+    window.Sentry.init({
+      dsn: 'https://[email protected]/1337',
+      replaysSessionSampleRate: 0.42,
+    });
+
+    setTimeout(() => {
+      window.doSomethingWrong();
+    }, 500);
+  });
+
+  document.head.appendChild(cdnScript);
+}, 100);

packages/browser-integration-tests/loader-suites/loader/noOnLoad/sdkLoadedInMeanwhile/test.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+import { sentryTest, TEST_HOST } from '../../../../utils/fixtures';
+import { LOADER_CONFIGS } from '../../../../utils/generatePage';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../utils/helpers';
+
+const bundle = process.env.PW_BUNDLE || '';
+const isLazy = LOADER_CONFIGS[bundle]?.lazy;
+
+sentryTest('it does not download the SDK if the SDK was loaded in the meanwhile', async ({ getLocalTestUrl, page }) => {
+  // When the loader is eager, this does not work and makes no sense
+  if (isLazy !== true) {
+    sentryTest.skip();
+  }
+
+  let cdnLoadedCount = 0;
+  let sentryEventCount = 0;
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    sentryEventCount++;
+
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  await page.route(`${TEST_HOST}/*.*`, route => {
+    const file = route.request().url().split('/').pop();
+
+    if (file === 'cdn.bundle.js') {
+      cdnLoadedCount++;
+    }
+
+    const filePath = path.resolve(__dirname, `./dist/${file}`);
+
+    return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+  });
+
+  const req = waitForErrorRequest(page);
+
+  const url = await getLocalTestUrl({ testDir: __dirname, skipRouteHandler: true });
+
+  await page.goto(url);
+
+  const eventData = envelopeRequestParser(await req);
+
+  await waitForFunction(() => cdnLoadedCount === 2);
+
+  // Still loaded the CDN bundle twice
+  expect(cdnLoadedCount).toBe(2);
+
+  // But only sent to Sentry once
+  expect(sentryEventCount).toBe(1);
+
+  // Ensure loader does not overwrite init/config
+  const options = await page.evaluate(() => (window as any).Sentry.getCurrentHub().getClient()?.getOptions());
+  expect(options?.replaysSessionSampleRate).toBe(0.42);
+
+  expect(eventData.exception?.values?.length).toBe(1);
+  expect(eventData.exception?.values?.[0]?.value).toBe('window.doSomethingWrong is not a function');
+});
+
+async function waitForFunction(cb: () => boolean, timeout = 2000, increment = 100) {
+  while (timeout > 0 && !cb()) {
+    await new Promise(resolve => setTimeout(resolve, increment));
+    await waitForFunction(cb, timeout - increment, increment);
+  }
+}

packages/browser-integration-tests/utils/fixtures.ts

@@ -27,7 +27,7 @@ export type TestFixtures = {
   _autoSnapshotSuffix: void;
   testDir: string;
   getLocalTestPath: (options: { testDir: string }) => Promise<string>;
-  getLocalTestUrl: (options: { testDir: string }) => Promise<string>;
+  getLocalTestUrl: (options: { testDir: string; skipRouteHandler?: boolean }) => Promise<string>;
   forceFlushReplay: () => Promise<string>;
   runInChromium: (fn: (...args: unknown[]) => unknown, args?: unknown[]) => unknown;
   runInFirefox: (fn: (...args: unknown[]) => unknown, args?: unknown[]) => unknown;
@@ -49,19 +49,21 @@ const sentryTest = base.extend<TestFixtures>({
   ],
 
   getLocalTestUrl: ({ page }, use) => {
-    return use(async ({ testDir }) => {
+    return use(async ({ testDir, skipRouteHandler = false }) => {
       const pagePath = `${TEST_HOST}/index.html`;
 
       await build(testDir);
       generateLoader(testDir);
 
       // Serve all assets under
-      await page.route(`${TEST_HOST}/*.*`, route => {
-        const file = route.request().url().split('/').pop();
-        const filePath = path.resolve(testDir, `./dist/${file}`);
+      if (!skipRouteHandler) {
+        await page.route(`${TEST_HOST}/*.*`, route => {
+          const file = route.request().url().split('/').pop();
+          const filePath = path.resolve(testDir, `./dist/${file}`);
 
-        return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
-      });
+          return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+        });
+      }
 
       return pagePath;
     });

packages/browser-integration-tests/utils/generatePage.ts

@@ -9,7 +9,7 @@ import SentryScenarioGenerationPlugin from './generatePlugin';
 
 const LOADER_TEMPLATE = readFileSync(path.join(__dirname, '../fixtures/loader.js'), 'utf-8');
 
-const LOADER_CONFIGS: Record<string, { bundle: string; options: Record<string, unknown>; lazy: boolean }> = {
+export const LOADER_CONFIGS: Record<string, { bundle: string; options: Record<string, unknown>; lazy: boolean }> = {
   loader_base: {
     bundle: 'browser/build/bundles/bundle.es5.min.js',
     options: {},