feat(browser): Export Replay integration from Browser SDK

wip

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.25.0",
+    "@sentry/replay": "7.25.0",
     "@sentry/types": "7.25.0",
     "@sentry/utils": "7.25.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://github.com/getsentry/sentry-replay#readme",
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@sentry/browser": "7.25.0",
     "@types/lodash.debounce": "4.0.7",
     "@types/pako": "^2.0.0",
     "jsdom-worker": "^0.2.1",

packages/replay/src/integration.ts

@@ -1,6 +1,5 @@
-import type { BrowserClient, BrowserOptions } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
-import { Integration } from '@sentry/types';
+import { BrowserClientReplayOptions, Integration } from '@sentry/types';
 
 import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE } from './constants';
 import { ReplayContainer } from './replay';
@@ -184,8 +183,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

@@ -15,6 +15,7 @@ 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.
@@ -165,6 +166,34 @@ 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.
+ */
+export function makeExcludeReplayPlugin() {
+  const replacementRegex = /\/\/ __ROLLUP_EXCLUDE_FROM_BUNDLES_BEGIN__(.|\n)*__ROLLUP_EXCLUDE_FROM_BUNDLES_END__/gm;
+
+  const plugin = {
+    transform(code) {
+      if (!replacementRegex.test(code)) {
+        return null;
+      }
+
+      const ms = new MagicString(code);
+      const transformedCode = ms.replace(new RegExp(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 };