test(replay): Test against CDN bundles in Playwright integration tests

Author: Lms24

packages/integration-tests/suites/replay/captureReplay/test.ts

@@ -6,8 +6,8 @@ import { sentryTest } from '../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
 
 sentryTest('captureReplay', async ({ getLocalTestPath, page }) => {
-  // Currently bundle tests are not supported for replay
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
+  // Replay bundles are es6 only
+  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
     sentryTest.skip();
   }
 

packages/integration-tests/suites/replay/init.js

@@ -1,7 +1,8 @@
 import * as Sentry from '@sentry/browser';
+import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Sentry.Replay({
+window.Replay = new Replay({
   flushMinDelay: 200,
   initialFlushDelay: 200,
 });

packages/integration-tests/suites/replay/sampling/init.js

@@ -1,7 +1,8 @@
 import * as Sentry from '@sentry/browser';
+import { Replay } from '@sentry/replay';
 
 window.Sentry = Sentry;
-window.Replay = new Sentry.Replay({
+window.Replay = new Replay({
   flushMinDelay: 200,
   initialFlushDelay: 200,
 });

packages/integration-tests/suites/replay/sampling/test.ts

@@ -4,8 +4,8 @@ import { sentryTest } from '../../../utils/fixtures';
 import { getReplaySnapshot } from '../../../utils/helpers';
 
 sentryTest('sampling', async ({ getLocalTestPath, page }) => {
-  // Currently bundle tests are not supported for replay
-  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
+  // Replay bundles are es6 only
+  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
     sentryTest.skip();
   }
 

packages/integration-tests/utils/generatePlugin.ts

@@ -40,6 +40,12 @@ const BUNDLE_PATHS: Record<string, Record<string, string>> = {
     bundle_es6: 'build/bundles/[INTEGRATION_NAME].js',
     bundle_es6_min: 'build/bundles/[INTEGRATION_NAME].min.js',
   },
+  replay: {
+    cjs: 'build/npm/cjs/index.js',
+    esm: 'build/npm/esm/index.js',
+    bundle_es6: 'build/bundles/replay.js',
+    bundle_es6_min: 'build/bundles/replay.min.js',
+  },
 };
 
 /*
@@ -87,6 +93,7 @@ function generateSentryAlias(): Record<string, string> {
 class SentryScenarioGenerationPlugin {
   public requiresTracing: boolean = false;
   public requiredIntegrations: string[] = [];
+  public requiresReplay = false;
 
   private _name: string = 'SentryScenarioGenerationPlugin';
 
@@ -99,6 +106,7 @@ class SentryScenarioGenerationPlugin {
             '@sentry/browser': 'Sentry',
             '@sentry/tracing': 'Sentry',
             '@sentry/integrations': 'Sentry.Integrations',
+            '@sentry/replay': 'Sentry.Integrations',
           }
         : {};
 
@@ -113,6 +121,8 @@ class SentryScenarioGenerationPlugin {
               this.requiresTracing = true;
             } else if (source === '@sentry/integrations') {
               this.requiredIntegrations.push(statement.specifiers[0].imported.name.toLowerCase());
+            } else if (source === '@sentry/replay') {
+              this.requiresReplay = true;
             }
           },
         );
@@ -140,6 +150,14 @@ class SentryScenarioGenerationPlugin {
             data.assetTags.scripts.unshift(integrationObject);
           });
 
+          if (this.requiresReplay && BUNDLE_PATHS['replay'][bundleKey]) {
+            const replayObject = createHtmlTagObject('script', {
+              src: path.resolve(PACKAGES_DIR, 'replay', BUNDLE_PATHS['replay'][bundleKey]),
+            });
+
+            data.assetTags.scripts.unshift(replayObject);
+          }
+
           data.assetTags.scripts.unshift(bundleObject);
         }
 

rollup/plugins/bundlePlugins.js

@@ -107,6 +107,8 @@ export function makeTerserPlugin() {
           '_driver',
           '_initStorage',
           '_support',
+          // We want to keept he _replay variable unmangled to enable integration tests to access it
+          '_replay',
         ],
       },
     },