build(replay): Provide full browser+tracing+replay bundle

Author: mydea

.size-limit.js

@@ -78,4 +78,10 @@ module.exports = [
     limit: '48 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
   },
+  {
+    name: '@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)',
+    path: 'packages/tracing/build/bundles/bundle.tracing.replay.min.js',
+    gzip: true,
+    limit: '100 KB',
+  },
 ];

packages/replay/README.md

@@ -98,13 +98,7 @@ You have to add it in addition to the Sentry Browser SDK bundle:
 ```js
 // Browser SDK bundle
 <script
-  src="https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js"
-  crossorigin="anonymous"
-></script>
-
-// Replay integration bundle
-<script
-  src="https://browser.sentry-cdn.com/7.24.1/replay.min.js"
+  src="https://browser.sentry-cdn.com/7.31.0/bundle.tracing.replay.min.js"
   crossorigin="anonymous"
 ></script>
 

packages/tracing/rollup.bundle.config.js

@@ -14,4 +14,16 @@ const builds = [];
   builds.push(...makeBundleConfigVariants(baseBundleConfig));
 });
 
+// Full bundle incl. replay only avaialable for es6
+const replayBaseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'standalone',
+  entrypoints: ['src/index.bundle.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry/tracing & @sentry/browser & @sentry/replay',
+  outputFileBase: () => 'bundles/bundle.tracing.replay',
+  includeReplay: true,
+});
+
+builds.push(...makeBundleConfigVariants(replayBaseBundleConfig));
+
 export default builds;

packages/tracing/src/index.bundle.ts

@@ -84,3 +84,12 @@ export { BrowserTracing };
 addExtensionMethods();
 
 export { addExtensionMethods };
+
+// DO NOT DELETE THESE COMMENTS!
+// We want to exclude Replay from CDN bundles, so we remove the block below with our
+// excludeReplay Rollup plugin when generating bundles. Everything between
+// ROLLUP_EXCLUDE_FROM_BUNDLES_BEGIN and _END__ is removed for bundles.
+
+// __ROLLUP_EXCLUDE_FROM_BUNDLES_BEGIN__
+export { Replay } from '@sentry/browser';
+// __ROLLUP_EXCLUDE_FROM_BUNDLES_END__

rollup/bundleHelpers.js

@@ -23,7 +23,8 @@ import { mergePlugins } from './utils';
 const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];
 
 export function makeBaseBundleConfig(options) {
-  const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig } = options;
+  const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig, includeReplay } =
+    options;
 
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin();
@@ -45,9 +46,13 @@ export function makeBaseBundleConfig(options) {
       name: 'Sentry',
     },
     context: 'window',
-    plugins: [markAsBrowserBuildPlugin, excludeReplayPlugin],
+    plugins: [markAsBrowserBuildPlugin],
   };
 
+  if (!includeReplay) {
+    standAloneBundleConfig.plugins.push(excludeReplayPlugin);
+  }
+
   // used by `@sentry/integrations` and `@sentry/wasm` (bundles which need to be combined with a stand-alone SDK bundle)
   const addOnBundleConfig = {
     // These output settings are designed to mimic an IIFE. We don't use Rollup's `iife` format because we don't want to

rollup/plugins/bundlePlugins.js

@@ -173,11 +173,14 @@ export function makeTSPlugin(jsVersion) {
  */
 export function makeExcludeReplayPlugin() {
   const replacementRegex = /\/\/ __ROLLUP_EXCLUDE_FROM_BUNDLES_BEGIN__(.|\n)*__ROLLUP_EXCLUDE_FROM_BUNDLES_END__/m;
-  const browserIndexFilePath = path.resolve(__dirname, '../../packages/browser/src/index.ts');
+  const filePathsToMatch = [
+    path.resolve(__dirname, '../../packages/browser/src/index.ts'),
+    path.resolve(__dirname, '../../packages/tracing/src/index.bundle.ts'),
+  ];
 
   const plugin = {
     transform(code, id) {
-      const isBrowserIndexFile = path.resolve(id) === browserIndexFilePath;
+      const isBrowserIndexFile = filePathsToMatch.includes(path.resolve(id));
       if (!isBrowserIndexFile || !replacementRegex.test(code)) {
         return null;
       }