feat(replay): Allow to define sample rates on SDK level (#6387)

Author: mydea

packages/browser/src/client.ts

@@ -8,11 +8,26 @@ 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.
+   */
+  replaysSampleRate?: 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.
  */
-export type BrowserOptions = Options<BrowserTransportOptions>;
+export type BrowserOptions = Options<BrowserTransportOptions> & BrowserClientReplayOptions;
 
 /**
  * Configuration options for the Sentry Browser SDK Client class

packages/replay/jest.setup.ts

@@ -24,7 +24,13 @@ afterEach(() => {
   }
 
   const client = hub?.getClient();
-  if (typeof client?.getTransport !== 'function') {
+  // This can be weirded up by mocks/tests
+  if (
+    !client ||
+    !client.getTransport ||
+    typeof client.getTransport !== 'function' ||
+    typeof client.getTransport()?.send !== 'function'
+  ) {
     return;
   }
 

packages/replay/src/index.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
+import type { BrowserClient, BrowserOptions } from '@sentry/browser';
 import { addGlobalEventProcessor, getCurrentHub, Scope, setContext } from '@sentry/core';
 import { Breadcrumb, Client, Event, Integration } from '@sentry/types';
 import { addInstrumentationHandler, createEnvelope, logger } from '@sentry/utils';
@@ -213,6 +214,10 @@ export class Replay implements Integration {
     if (!isBrowser()) {
       return;
     }
+
+    // Client is not available in constructor, so we need to wait until setupOnce
+    this._loadReplayOptionsFromClient();
+
     // XXX: See method comments above
     setTimeout(() => this.start());
   }
@@ -1333,4 +1338,18 @@ export class Replay implements Integration {
       saveSession(this.session);
     }
   }
+
+  /** 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);
+
+    if (opt && opt.replaysSampleRate) {
+      this.options.sessionSampleRate = opt.replaysSampleRate;
+    }
+
+    if (opt && opt.replaysOnErrorSampleRate) {
+      this.options.errorSampleRate = opt.replaysOnErrorSampleRate;
+    }
+  }
 }

packages/replay/test/mocks/mockSdk.ts

@@ -54,5 +54,12 @@ export async function mockSdk({
 
   init({ ...sentryOptions, integrations: [replay] });
 
+  // setupOnce is only called the first time, so we ensure to re-parse the options every time
+  replay['_loadReplayOptionsFromClient']();
+
+  // The first time the integration is used, `start()` is called (in setupOnce)
+  // For consistency, we want to stop that
+  replay.stop();
+
   return { replay };
 }

packages/replay/test/unit/blockAllMedia.test.ts

@@ -0,0 +1,108 @@
+import { mockSdk } from '@test';
+
+import { Replay } from '../../src';
+
+let replay: Replay;
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe('blockAllMedia', () => {
+  it('sets the correct configuration when `blockAllMedia` is disabled', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { blockAllMedia: false } }));
+
+    expect(replay.recordingOptions.blockSelector).toBe('[data-sentry-block]');
+  });
+
+  it('sets the correct configuration when `blockSelector` is empty and `blockAllMedia` is enabled', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { blockSelector: '' } }));
+
+    expect(replay.recordingOptions.blockSelector).toMatchInlineSnapshot(
+      '"img,image,svg,path,rect,area,video,object,picture,embed,map,audio"',
+    );
+  });
+
+  it('preserves `blockSelector` when `blockAllMedia` is enabled', async () => {
+    ({ replay } = await mockSdk({
+      replayOptions: { blockSelector: '[data-test-blockSelector]' },
+    }));
+
+    expect(replay.recordingOptions.blockSelector).toMatchInlineSnapshot(
+      '"[data-test-blockSelector],img,image,svg,path,rect,area,video,object,picture,embed,map,audio"',
+    );
+  });
+});
+
+describe('replaysSampleRate', () => {
+  it('works with defining settings in integration', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { sessionSampleRate: 0.5 } }));
+
+    expect(replay.options.sessionSampleRate).toBe(0.5);
+  });
+
+  it('works with defining settings in SDK', async () => {
+    ({ replay } = await mockSdk({ sentryOptions: { replaysSampleRate: 0.5 } }));
+
+    expect(replay.options.sessionSampleRate).toBe(0.5);
+  });
+
+  it('SDK option takes precedence', async () => {
+    ({ replay } = await mockSdk({
+      sentryOptions: { replaysSampleRate: 0.5 },
+      replayOptions: { sessionSampleRate: 0.1 },
+    }));
+
+    expect(replay.options.sessionSampleRate).toBe(0.5);
+  });
+});
+
+describe('replaysOnErrorSampleRate', () => {
+  it('works with defining settings in integration', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { errorSampleRate: 0.5 } }));
+
+    expect(replay.options.errorSampleRate).toBe(0.5);
+  });
+
+  it('works with defining settings in SDK', async () => {
+    ({ replay } = await mockSdk({ sentryOptions: { replaysOnErrorSampleRate: 0.5 } }));
+
+    expect(replay.options.errorSampleRate).toBe(0.5);
+  });
+
+  it('SDK option takes precedence', async () => {
+    ({ replay } = await mockSdk({
+      sentryOptions: { replaysOnErrorSampleRate: 0.5 },
+      replayOptions: { errorSampleRate: 0.1 },
+    }));
+
+    expect(replay.options.errorSampleRate).toBe(0.5);
+  });
+});
+
+describe('maskAllText', () => {
+  it('works with default value', async () => {
+    ({ replay } = await mockSdk({ replayOptions: {} }));
+
+    // Default is true
+    expect(replay.recordingOptions.maskTextSelector).toBe('*');
+  });
+
+  it('works with true', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { maskAllText: true } }));
+
+    expect(replay.recordingOptions.maskTextSelector).toBe('*');
+  });
+
+  it('works with false', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { maskAllText: false } }));
+
+    expect(replay.recordingOptions.maskTextSelector).toBe(undefined);
+  });
+
+  it('overwrites custom maskTextSelector option', async () => {
+    ({ replay } = await mockSdk({ replayOptions: { maskAllText: true, maskTextSelector: '[custom]' } }));
+
+    expect(replay.recordingOptions.maskTextSelector).toBe('*');
+  });
+});