test(feedback): Re-add feedback CDN tests (#11890)

This reverts #11888,
and ensures the feedback tests actually work on CDN.

For this, we now ensure to serve this locally, so this will work also on
release branches. It means you have to use `getLocalTestUrl` instead of
`getLocalTestPath` to work. (side note: We can/should probably just
remove `getLocalTestPath` overall 🤔 URL based is much more realistic and
IMHO better. I'll do that in a follow up, maybe.

Author: mydea

dev-packages/browser-integration-tests/suites/feedback/captureFeedback/test.ts

@@ -1,9 +1,9 @@
 import { expect } from '@playwright/test';
 
-import { sentryTest } from '../../../utils/fixtures';
+import { TEST_HOST, sentryTest } from '../../../utils/fixtures';
 import { envelopeRequestParser, getEnvelopeType, shouldSkipFeedbackTest } from '../../../utils/helpers';
 
-sentryTest('should capture feedback', async ({ getLocalTestPath, page }) => {
+sentryTest('should capture feedback', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipFeedbackTest()) {
     sentryTest.skip();
   }
@@ -31,7 +31,7 @@ sentryTest('should capture feedback', async ({ getLocalTestPath, page }) => {
     });
   });
 
-  const url = await getLocalTestPath({ testDir: __dirname });
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await page.goto(url);
   await page.getByText('Report a Bug').click();
@@ -51,7 +51,7 @@ sentryTest('should capture feedback', async ({ getLocalTestPath, page }) => {
         message: 'my example feedback',
         name: 'Jane Doe',
         source: 'widget',
-        url: expect.stringContaining('/dist/index.html'),
+        url: `${TEST_HOST}/index.html`,
       },
       trace: {
         trace_id: expect.stringMatching(/\w{32}/),
@@ -69,7 +69,7 @@ sentryTest('should capture feedback', async ({ getLocalTestPath, page }) => {
       packages: expect.anything(),
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: `${TEST_HOST}/index.html`,
       headers: {
         'User-Agent': expect.stringContaining(''),
       },

dev-packages/browser-integration-tests/suites/feedback/captureFeedbackAndReplay/hasSampling/test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 
-import { sentryTest } from '../../../../utils/fixtures';
+import { TEST_HOST, sentryTest } from '../../../../utils/fixtures';
 import { envelopeRequestParser, getEnvelopeType, shouldSkipFeedbackTest } from '../../../../utils/helpers';
 import {
   collectReplayRequests,
@@ -9,7 +9,7 @@ import {
   waitForReplayRequest,
 } from '../../../../utils/replayHelpers';
 
-sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestPath, page }) => {
+sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestUrl, page }) => {
   if (shouldSkipFeedbackTest() || shouldSkipReplayTest()) {
     sentryTest.skip();
   }
@@ -39,7 +39,7 @@ sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestPat
     });
   });
 
-  const url = await getLocalTestPath({ testDir: __dirname });
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   await Promise.all([page.goto(url), page.getByText('Report a Bug').click(), reqPromise0]);
 
@@ -87,7 +87,7 @@ sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestPat
         name: 'Jane Doe',
         replay_id: replayEvent.event_id,
         source: 'widget',
-        url: expect.stringContaining('/dist/index.html'),
+        url: `${TEST_HOST}/index.html`,
       },
       trace: {
         trace_id: expect.stringMatching(/\w{32}/),
@@ -105,7 +105,7 @@ sentryTest('should capture feedback', async ({ forceFlushReplay, getLocalTestPat
       packages: expect.anything(),
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: `${TEST_HOST}/index.html`,
       headers: {
         'User-Agent': expect.stringContaining(''),
       },

dev-packages/browser-integration-tests/suites/replay/slowClick/windowOpen/test.ts

@@ -16,6 +16,14 @@ sentryTest('window.open() is considered for slow click', async ({ getLocalTestUr
     });
   });
 
+  await page.route('http://example.com/', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({}),
+    });
+  });
+
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/navigation/test.ts

@@ -311,12 +311,12 @@ sentryTest(
 
 sentryTest(
   'user feedback event after navigation has navigation traceId in headers',
-  async ({ getLocalTestPath, page }) => {
+  async ({ getLocalTestUrl, page }) => {
     if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
       sentryTest.skip();
     }
 
-    const url = await getLocalTestPath({ testDir: __dirname });
+    const url = await getLocalTestUrl({ testDir: __dirname });
 
     // ensure pageload transaction is finished
     await getFirstSentryEnvelopeRequest<Event>(page, url);

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload-meta/test.ts

@@ -297,12 +297,12 @@ sentryTest(
   },
 );
 
-sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestPath, page }) => {
+sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
     sentryTest.skip();
   }
 
-  const url = await getLocalTestPath({ testDir: __dirname });
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   const pageloadEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
   const pageloadTraceContext = pageloadEvent.contexts?.trace;

dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/pageload/test.ts

@@ -294,12 +294,12 @@ sentryTest(
   },
 );
 
-sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestPath, page }) => {
+sentryTest('user feedback event after pageload has pageload traceId in headers', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipTracingTest() || shouldSkipFeedbackTest()) {
     sentryTest.skip();
   }
 
-  const url = await getLocalTestPath({ testDir: __dirname });
+  const url = await getLocalTestUrl({ testDir: __dirname });
 
   const pageloadEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
   const pageloadTraceContext = pageloadEvent.contexts?.trace;

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

@@ -3,6 +3,7 @@ import path from 'path';
 /* eslint-disable no-empty-pattern */
 import { test as base } from '@playwright/test';
 
+import { SDK_VERSION } from '@sentry/browser';
 import { generatePage } from './generatePage';
 
 export const TEST_HOST = 'http://sentry-test.io';
@@ -63,6 +64,17 @@ const sentryTest = base.extend<TestFixtures>({
 
           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(testDir, './dist/feedback-modal.bundle.js');
+          return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+        });
+
+        await page.route(`https://browser.sentry-cdn.com/${SDK_VERSION}/feedback-screenshot.min.js`, route => {
+          const filePath = path.resolve(testDir, './dist/feedback-screenshot.bundle.js');
+          return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
+        });
       }
 
       return pagePath;

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

@@ -63,6 +63,10 @@ const BUNDLE_PATHS: Record<string, Record<string, string>> = {
     bundle: 'build/bundles/[INTEGRATION_NAME].js',
     bundle_min: 'build/bundles/[INTEGRATION_NAME].min.js',
   },
+  feedback: {
+    bundle: 'build/bundles/[INTEGRATION_NAME].js',
+    bundle_min: 'build/bundles/[INTEGRATION_NAME].min.js',
+  },
   wasm: {
     cjs: 'build/npm/cjs/index.js',
     esm: 'build/npm/esm/index.js',
@@ -225,6 +229,24 @@ class SentryScenarioGenerationPlugin {
             .replace('_tracing', '')
             .replace('_feedback', '');
 
+          // For feedback bundle, make sure to add modal & screenshot integrations
+          if (bundleKey.includes('_feedback')) {
+            ['feedback-modal', 'feedback-screenshot'].forEach(integration => {
+              const fileName = `${integration}.bundle.js`;
+
+              // We add the files, but not a script tag - they are lazy-loaded
+              addStaticAssetSymlink(
+                this.localOutPath,
+                path.resolve(
+                  PACKAGES_DIR,
+                  'feedback',
+                  BUNDLE_PATHS['feedback'][integrationBundleKey].replace('[INTEGRATION_NAME]', integration),
+                ),
+                fileName,
+              );
+            });
+          }
+
           this.requiredIntegrations.forEach(integration => {
             const fileName = `${integration}.bundle.js`;
             addStaticAssetSymlink(

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

@@ -248,10 +248,8 @@ export function shouldSkipTracingTest(): boolean {
  * @returns `true` if we should skip the feedback test
  */
 export function shouldSkipFeedbackTest(): boolean {
-  // TODO(fn): For now we are skipping feedback tests in all bundles, until we have a proper way to test them.
-  // We need to make sure lazy loading works on release branches...
   const bundle = process.env.PW_BUNDLE as string | undefined;
-  return !!bundle && bundle.startsWith('bundle');
+  return bundle != null && !bundle.includes('feedback') && !bundle.includes('esm') && !bundle.includes('cjs');
 }
 
 /**