feat(browser): Export Replay integration from Browser SDK (#6508)

Export the `Replay` integration from `@sentry/replay` in `@sentry/browser`.  This will eliminate the need for users to separately install the `@sentry/replay` package as they have to do right now. Instead, they can just use Replay like it's part of the core Browser SDK or any FE Framework SDK that builds on top of Browser:

```js
import * as Sentry from '@sentry/browser'; // or @sentry/react, ...

Sentry.init({
  // dsn, other options, etc
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [new Sentry.Replay()]
});
```
Alternatively, `import { Replay } from '@sentry/browser'` works, too. 

Note: This does not affect users who imported the integration from `@sentry/replay` so it should be fully backwards compatible.

Author: Lms24

package.json

@@ -87,6 +87,7 @@
     "karma-firefox-launcher": "^1.1.0",
     "lerna": "3.13.4",
     "madge": "4.0.2",
+    "magic-string": "^0.27.0",
     "mocha": "^6.1.4",
     "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",

packages/browser/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@sentry/core": "7.26.0",
+    "@sentry/replay": "7.26.0",
     "@sentry/types": "7.26.0",
     "@sentry/utils": "7.26.0",
     "tslib": "^1.9.3"

packages/browser/src/client.ts

@@ -1,28 +1,20 @@
 import { BaseClient, getEnvelopeEndpointWithUrlEncodedAuth, Scope, SDK_VERSION } from '@sentry/core';
-import { ClientOptions, Event, EventHint, Options, Severity, SeverityLevel } from '@sentry/types';
+import {
+  BrowserClientReplayOptions,
+  ClientOptions,
+  Event,
+  EventHint,
+  Options,
+  Severity,
+  SeverityLevel,
+} from '@sentry/types';
 import { createClientReportEnvelope, dsnToString, logger, serializeEnvelope } from '@sentry/utils';
 
 import { eventFromException, eventFromMessage } from './eventbuilder';
 import { WINDOW } from './helpers';
 import { Breadcrumbs } from './integrations';
 import { BREADCRUMB_INTEGRATION_ID } from './integrations/breadcrumbs';
 import { BrowserTransportOptions } from './transports/types';
-
-type BrowserClientReplayOptions = {
-  /**
-   * The sample rate for session-long replays.
-   * 1.0 will record all sessions and 0 will record none.
-   */
-  replaysSessionSampleRate?: number;
-
-  /**
-   * The sample rate for sessions that has had an error occur.
-   * This is independent of `sessionSampleRate`.
-   * 1.0 will record all sessions and 0 will record none.
-   */
-  replaysOnErrorSampleRate?: number;
-};
-
 /**
  * Configuration options for the Sentry Browser SDK.
  * @see @sentry/types Options for more information.

packages/browser/src/index.ts

@@ -19,3 +19,12 @@ const INTEGRATIONS = {
 };
 
 export { INTEGRATIONS as Integrations };
+
+// 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/replay';
+// __ROLLUP_EXCLUDE_FROM_BUNDLES_END__

packages/replay/package.json

@@ -46,7 +46,6 @@
   "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@sentry/browser": "7.26.0",
     "@types/lodash.debounce": "4.0.7",
     "@types/pako": "^2.0.0",
     "jsdom-worker": "^0.2.1",

packages/replay/src/integration.ts

@@ -1,5 +1,5 @@
-import type { BrowserClient, BrowserOptions } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
+import type { BrowserClientReplayOptions } from '@sentry/types';
 import { Integration } from '@sentry/types';
 
 import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE, MASK_ALL_TEXT_SELECTOR } from './constants';
@@ -184,8 +184,8 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
 
   /** Parse Replay-related options from SDK options */
   private _loadReplayOptionsFromClient(): void {
-    const client = getCurrentHub().getClient() as BrowserClient | undefined;
-    const opt = client && (client.getOptions() as BrowserOptions | undefined);
+    const client = getCurrentHub().getClient();
+    const opt = client && (client.getOptions() as BrowserClientReplayOptions | undefined);
 
     if (opt && typeof opt.replaysSessionSampleRate === 'number') {
       this.options.sessionSampleRate = opt.replaysSessionSampleRate;

packages/types/src/browseroptions.ts

@@ -0,0 +1,18 @@
+/**
+ * Options added to the Browser SDK's init options that are specific for Replay.
+ * Note: This type was moved to @sentry/types to avoid a circular dependency between Browser and Replay.
+ */
+export type BrowserClientReplayOptions = {
+  /**
+   * The sample rate for session-long replays.
+   * 1.0 will record all sessions and 0 will record none.
+   */
+  replaysSessionSampleRate?: number;
+
+  /**
+   * The sample rate for sessions that has had an error occur.
+   * This is independent of `sessionSampleRate`.
+   * 1.0 will record all sessions and 0 will record none.
+   */
+  replaysOnErrorSampleRate?: number;
+};

packages/types/src/index.ts

@@ -93,3 +93,5 @@ export type {
 export type { User, UserFeedback } from './user';
 export type { WrappedFunction } from './wrappedfunction';
 export type { Instrumenter } from './instrumenter';
+
+export type { BrowserClientReplayOptions } from './browseroptions';

rollup/bundleHelpers.js

@@ -16,6 +16,7 @@ import {
   makeSucrasePlugin,
   makeTerserPlugin,
   makeTSPlugin,
+  makeExcludeReplayPlugin,
 } from './plugins/index.js';
 import { mergePlugins } from './utils';
 
@@ -30,6 +31,7 @@ export function makeBaseBundleConfig(options) {
   const markAsBrowserBuildPlugin = makeBrowserBuildPlugin(true);
   const licensePlugin = makeLicensePlugin(licenseTitle);
   const tsPlugin = makeTSPlugin(jsVersion.toLowerCase());
+  const excludeReplayPlugin = makeExcludeReplayPlugin();
 
   // The `commonjs` plugin is the `esModuleInterop` of the bundling world. When used with `transformMixedEsModules`, it
   // will include all dependencies, imported or required, in the final bundle. (Without it, CJS modules aren't included
@@ -43,7 +45,7 @@ export function makeBaseBundleConfig(options) {
       name: 'Sentry',
     },
     context: 'window',
-    plugins: [markAsBrowserBuildPlugin],
+    plugins: [markAsBrowserBuildPlugin, excludeReplayPlugin],
   };
 
   // used by `@sentry/integrations` and `@sentry/wasm` (bundles which need to be combined with a stand-alone SDK bundle)

rollup/plugins/bundlePlugins.js

@@ -8,13 +8,16 @@
  * Typescript plugin docs: https://github.com/ezolenko/rollup-plugin-typescript2
  */
 
+import path from 'path';
+
 import commonjs from '@rollup/plugin-commonjs';
 import deepMerge from 'deepmerge';
 import license from 'rollup-plugin-license';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
+import MagicString from 'magic-string';
 
 /**
  * Create a plugin to add an identification banner to the top of stand-alone bundles.
@@ -164,6 +167,37 @@ export function makeTSPlugin(jsVersion) {
   return plugin;
 }
 
+/**
+ * Creates a Rollup plugin that removes all code between the `__ROLLUP_EXCLUDE_FROM_BUNDLES_BEGIN__`
+ * and `__ROLLUP_EXCLUDE_FROM_BUNDLES_END__` comment guards. This is used to exclude the Replay integration
+ * from the browser and browser+tracing bundles.
+ * If we need to add more such guards in the future, we might want to refactor this into a more generic plugin.
+ */
+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 plugin = {
+    transform(code, id) {
+      const isBrowserIndexFile = path.resolve(id) === browserIndexFilePath;
+      if (!isBrowserIndexFile || !replacementRegex.test(code)) {
+        return null;
+      }
+
+      const ms = new MagicString(code);
+      const transformedCode = ms.replace(replacementRegex, '');
+      return {
+        code: transformedCode.toString(),
+        map: transformedCode.generateMap({ hires: true }),
+      };
+    },
+  };
+
+  plugin.name = 'excludeReplay';
+
+  return plugin;
+}
+
 // We don't pass these plugins any options which need to be calculated or changed by us, so no need to wrap them in
 // another factory function, as they are themselves already factory functions.
 export { resolve as makeNodeResolvePlugin };