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

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

@@ -99,19 +99,11 @@ replay.start();
 ## Loading Replay as a CDN Bundle
 
 As an alternative to the NPM package, you can load the Replay integration bundle from our CDN.
-Note that the Replay bundle **only contains the Replay integration** and not the entire Sentry SDK.
-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>
 
@@ -132,6 +124,19 @@ Sentry.init({
 
 The Replay initilialization [configuration](#configuration) options are identical to the options of the NPM package.
 
+Alternatively, you can also load the Replay integration separately from other bundles:
+
+```html
+<script
+  src="https://browser.sentry-cdn.com/7.31.0/bundle.min.js"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/7.31.0/replay.min.js"
+  crossorigin="anonymous"
+></script>
+```
+
 Please visit our [CDN bundle docs](https://docs.sentry.io/platforms/javascript/install/cdn/#available-bundles) to get the correct `integrity` checksums for your version.
 Note that the two bundle versions always have to match.
 

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

@@ -53,6 +53,7 @@ export {
 export { SDK_VERSION } from '@sentry/browser';
 
 import { Integrations as BrowserIntegrations } from '@sentry/browser';
+import type { Integration } from '@sentry/types';
 import { GLOBAL_OBJ } from '@sentry/utils';
 
 import { BrowserTracing } from './browser';
@@ -67,7 +68,11 @@ if (GLOBAL_OBJ.Sentry && GLOBAL_OBJ.Sentry.Integrations) {
   windowIntegrations = GLOBAL_OBJ.Sentry.Integrations;
 }
 
-const INTEGRATIONS = {
+// For whatever reason, it does not recognize BrowserTracing or some of the BrowserIntegrations as Integration
+const INTEGRATIONS: Record<
+  string,
+  Integration | typeof BrowserTracing | typeof BrowserIntegrations[keyof typeof BrowserIntegrations]
+> = {
   ...windowIntegrations,
   ...BrowserIntegrations,
   BrowserTracing,

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

@@ -0,0 +1,19 @@
+import Sentry from '../src/index.bundle.replay';
+
+// Because of the way how we re-export stuff for the replay bundle, we only have a single default export
+const { Integrations } = Sentry;
+
+describe('Integrations export', () => {
+  it('is exported correctly', () => {
+    Object.keys(Integrations).forEach(key => {
+      // Skip BrowserTracing because it doesn't have a static id field.
+      if (key === 'BrowserTracing') {
+        return;
+      }
+
+      expect((Integrations[key] as any).id).toStrictEqual(expect.any(String));
+    });
+
+    expect(Integrations.Replay).toBeDefined();
+  });
+});

packages/tracing/test/index.bundle.test.ts

@@ -8,9 +8,9 @@ describe('Integrations export', () => {
         return;
       }
 
-      expect(Integrations[key as keyof Omit<typeof Integrations, 'BrowserTracing'>].id).toStrictEqual(
-        expect.any(String),
-      );
+      expect((Integrations[key] as any).id).toStrictEqual(expect.any(String));
     });
   });
+
+  expect(Integrations.Replay).toBeUndefined();
 });

packages/tracing/tsconfig.types.json

@@ -5,7 +5,7 @@
   // the fact that it introduces a dependency on `@sentry/browser` which doesn't exist anywhere else in the SDK, which
   // then prevents us from building that and this at the same time when doing a parallellized build from the repo root
   // level.
-  "exclude": ["src/index.bundle.ts"],
+  "exclude": ["src/index.bundle.ts", "src/index.bundle.replay.ts"],
 
   "compilerOptions": {
     "declaration": true,

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