handle feedback lazy loading dynamically

Author: mydea

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegrationShim/init.js

@@ -7,6 +7,3 @@ Sentry.init({
   sampleRate: 1,
   integrations: [Sentry.browserTracingIntegration()],
 });
-
-// This should not fail
-Sentry.addTracingExtensions();

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegrationShim/test.ts

@@ -24,7 +24,11 @@ sentryTest(
       });
     });
 
-    const url = await getLocalTestUrl({ testDir: __dirname, skipDsnRouteHandler: true });
+    const url = await getLocalTestUrl({
+      testDir: __dirname,
+      skipDsnRouteHandler: true,
+      handleLazyLoadedFeedback: true,
+    });
 
     await page.goto(url);
 

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

@@ -35,6 +35,7 @@ export type TestFixtures = {
     testDir: string;
     skipRouteHandler?: boolean;
     skipDsnRouteHandler?: boolean;
+    handleLazyLoadedFeedback?: boolean;
   }) => Promise<string>;
   forceFlushReplay: () => Promise<string>;
   enableConsole: () => void;
@@ -58,55 +59,59 @@ const sentryTest = base.extend<TestFixtures>({
   ],
 
   getLocalTestUrl: ({ page }, use) => {
-    return use(async ({ testDir, skipRouteHandler = false, skipDsnRouteHandler = false }) => {
-      const pagePath = `${TEST_HOST}/index.html`;
+    return use(
+      async ({ testDir, skipRouteHandler = false, skipDsnRouteHandler = false, handleLazyLoadedFeedback = false }) => {
+        const pagePath = `${TEST_HOST}/index.html`;
 
-      const tmpDir = path.join(testDir, 'dist', crypto.randomUUID());
+        const tmpDir = path.join(testDir, 'dist', crypto.randomUUID());
 
-      await build(testDir, tmpDir);
+        await build(testDir, tmpDir);
 
-      // If skipping route handlers we return the tmp dir instead of adding the handler
-      // This way, this can be handled by the caller manually
-      if (skipRouteHandler) {
-        return tmpDir;
-      }
+        // If skipping route handlers we return the tmp dir instead of adding the handler
+        // This way, this can be handled by the caller manually
+        if (skipRouteHandler) {
+          return tmpDir;
+        }
 
-      if (!skipDsnRouteHandler) {
-        await page.route('https://dsn.ingest.sentry.io/**/*', route => {
-          return route.fulfill({
-            status: 200,
-            contentType: 'application/json',
-            body: JSON.stringify({ id: 'test-id' }),
+        if (!skipDsnRouteHandler) {
+          await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+            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();
-        const filePath = path.resolve(tmpDir, `./${file}`);
+        await page.route(`${TEST_HOST}/*.*`, route => {
+          const file = route.request().url().split('/').pop();
+          const filePath = path.resolve(tmpDir, `./${file}`);
 
-        return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
-      });
+          return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+        });
 
-      // Ensure feedback can be lazy loaded
-      await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/feedback-modal.min.js`, route => {
-        const filePath = path.resolve(tmpDir, './feedback-modal.bundle.js');
-        if (!fs.existsSync(filePath)) {
-          throw new Error(`Feedback modal bundle (${filePath}) not found`);
-        }
-        return route.fulfill({ path: filePath });
-      });
+        if (handleLazyLoadedFeedback) {
+          // Ensure feedback can be lazy loaded
+          await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/feedback-modal.min.js`, route => {
+            const filePath = path.resolve(tmpDir, './feedback-modal.bundle.js');
+            if (!fs.existsSync(filePath)) {
+              throw new Error(`Feedback modal bundle (${filePath}) not found`);
+            }
+            return route.fulfill({ path: filePath });
+          });
 
-      await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/feedback-screenshot.min.js`, route => {
-        const filePath = path.resolve(tmpDir, './feedback-screenshot.bundle.js');
-        if (!fs.existsSync(filePath)) {
-          throw new Error(`Feedback screenshot bundle (${filePath}) not found`);
+          await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/feedback-screenshot.min.js`, route => {
+            const filePath = path.resolve(tmpDir, './feedback-screenshot.bundle.js');
+            if (!fs.existsSync(filePath)) {
+              throw new Error(`Feedback screenshot bundle (${filePath}) not found`);
+            }
+            return route.fulfill({ path: filePath });
+          });
         }
-        return route.fulfill({ path: filePath });
-      });
 
-      return pagePath;
-    });
+        return pagePath;
+      },
+    );
   },
   runInChromium: ({ runInSingleBrowser }, use) => {
     return use((fn, args) => runInSingleBrowser('chromium', fn, args));