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: '80 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

@@ -1,5 +1,9 @@
+import replace from '@rollup/plugin-replace';
+
 import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';
 
+import pkg from './package.json';
+
 const builds = [];
 
 ['es5', 'es6'].forEach(jsVersion => {
@@ -14,4 +18,26 @@ const builds = [];
   builds.push(...makeBundleConfigVariants(baseBundleConfig));
 });
 
+// Full bundle incl. replay only avaialable for es6
+const replayBaseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'standalone',
+  entrypoints: ['src/index.bundle.replay.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry/tracing & @sentry/browser & @sentry/replay',
+  outputFileBase: () => 'bundles/bundle.tracing.replay',
+  includeReplay: true,
+  packageSpecificConfig: {
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
+        },
+      }),
+    ],
+  },
+});
+
+builds.push(...makeBundleConfigVariants(replayBaseBundleConfig));
+
 export default builds;

packages/tracing/src/index.bundle.replay.ts

@@ -0,0 +1,7 @@
+import { Replay } from '@sentry/browser';
+
+import * as Sentry from './index.bundle';
+
+Sentry.Integrations.Replay = Replay;
+
+export default Sentry;

packages/tracing/src/index.bundle.ts

@@ -67,7 +67,7 @@ if (GLOBAL_OBJ.Sentry && GLOBAL_OBJ.Sentry.Integrations) {
   windowIntegrations = GLOBAL_OBJ.Sentry.Integrations;
 }
 
-const INTEGRATIONS = {
+const INTEGRATIONS: Record<string, unknown> = {
   ...windowIntegrations,
   ...BrowserIntegrations,
   BrowserTracing,

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;
       }