concrete replay options

Author: billyvg

packages/replay/src/integration.ts

@@ -47,34 +47,109 @@ export class Replay implements Integration {
     initialFlushDelay = INITIAL_FLUSH_DELAY,
     stickySession = true,
     useCompression = true,
+    _experiments = {},
     sessionSampleRate,
     errorSampleRate,
     maskAllText,
-    maskTextSelector,
     maskAllInputs = true,
     blockAllMedia = true,
-    _experiments = {},
-    blockClass = 'sentry-block',
-    ignoreClass = 'sentry-ignore',
-    maskTextClass = 'sentry-mask',
-    unmaskTextSelector = '.sentry-unmask',
-    blockSelector = '[data-sentry-block]',
-    ...recordingOptions
+
+    mask = [],
+    unmask = [],
+    block= [],
+    unblock= [],
+    ignore = [],
+    maskFn,
+
+    // @deprecated
+    blockClass,
+    blockSelector,
+    maskTextClass,
+    maskTextSelector,
+    ignoreClass,
   }: ReplayConfiguration = {}) {
+
+    const blockSelectors = [
+      ...block,
+      // @deprecated
+      ...blockSelector.split(','),
+
+      // sentry defaults
+      '.sentry-block',
+      '[data-sentry-block]',
+    ];
+
+    // @deprecated
+    if (blockClass) {
+      blockSelectors.push(`.${blockClass}`);
+    }
+
+    const unblockSelectors = [
+      ...unblock,
+
+      // sentry defaults
+      '.sentry-unblock',
+    ]
+
+    const ignoreSelectors = [
+      ...ignore,
+      // sentry defaults
+      '.sentry-ignore',
+    ];
+
+    // @deprecated
+    if (ignoreClass) {
+      ignoreSelectors.push(`.${ignoreClass}`)
+    }
+
+    const maskTextSelectors = [
+      ...mask,
+
+      // sentry defaults
+      '.sentry-mask',
+    ]
+
+    // @deprecated
+    if (maskTextClass) {
+      maskTextSelectors.push(maskTextClass);
+    }
+
+
+    const unmaskTextSelectors = [
+      ...unmask,
+
+      // sentry defaults
+      '.sentry-unmask',
+    ];
+
+    const unblockSelector = unblockSelectors.join(',');
+    const ignoreSelector = ignoreSelectors.join(',');
+    const maskSelector = maskTextSelectors.join(',');
+    const unmaskSelector = unmaskTextSelectors.join(',');
+
+
     this.recordingOptions = {
       maskAllInputs,
-      blockClass,
-      blockSelector,
-      ignoreClass,
-      maskTextClass,
-      maskTextSelector,
-      unmaskTextSelector,
+      blockSelector: blockSelectors.join(','),
+      // @TODO
+      unblockSelector,
+      // @TODO
+      ignoreSelector,
+      maskTextSelector: maskSelector,
+      unmaskTextSelector: unmaskSelector,
+      maskTextFn: maskFn,
 
       // We are making the decision to make these selectors the same
-      unmaskInputSelector: unmaskTextSelector,
-      maskInputSelector: maskTextSelector,
-
-      ...recordingOptions,
+      maskInputSelector: maskSelector,
+      unmaskInputSelector: unmaskSelector,
+      maskInputFn: maskFn,
+
+      // Our defaults
+      slimDOMOptions: 'all',
+      inlineStylesheet: true,
+      // Disable inline images/fonts as it can cause CORS, also increases segment size
+      inlineImages: false,
+      collectFonts: false,
     };
 
     this.options = {

packages/replay/src/types.ts

@@ -119,12 +119,66 @@ export interface ReplayPluginOptions extends SessionOptions {
     captureExceptions: boolean;
     traceInternals: boolean;
   }>;
+
+  /**
+   * Mask text content for elements that match the CSS selectors in the list.
+   */
+  mask: string[];
+
+  /**
+   * Unmask text content for elements that match the CSS selectors in the list.
+   */
+  unmask: string[];
+
+  /**
+   * Block elements that match the CSS selectors in the list. Blocking replaces
+   * the element with an empty placeholder with the same dimensions.
+   */
+  block: string[];
+
+  /**
+   * Unblock elements that match the CSS selectors in the list. This is useful when using `blockAllMedia`.
+   */
+  unblock: string[];
+
+  /**
+   * Ignore input events for elements that match the CSS selectors in the list.
+   */
+  ignore: string[];
+
+  /**
+   * A callback function to customize how your text is masked.
+   */
+  maskFn: Pick<RecordingOptions, 'maskTextFn'>;
 }
 
 // These are optional for ReplayPluginOptions because the plugin sets default values
 type OptionalReplayPluginOptions = Partial<ReplayPluginOptions>;
 
-export interface ReplayConfiguration extends OptionalReplayPluginOptions, RecordingOptions {}
+interface DeprecatedRecordingOptions {
+  /**
+   * @deprecated Use `block` which accepts an array of CSS selectors
+   */
+  blockSelector: RecordingOptions['blockSelector'];
+  /**
+   * @deprecated Use `block` which accepts an array of CSS selectors
+   */
+  blockClass: RecordingOptions['blockClass'];
+  /**
+   * @deprecated Use `mask` which accepts an array of CSS selectors
+   */
+  maskTextClass: RecordingOptions['maskTextClass'];
+  /**
+   * @deprecated Use `mask` which accepts an array of CSS selectors
+   */
+  maskTextSelector: RecordingOptions['maskTextSelector'];
+  /**
+   * @deprecated Use `ignore` which accepts an array of CSS selectors
+   */
+  ignoreClass: RecordingOptions['ignoreClass'];
+}
+
+export interface ReplayConfiguration extends OptionalReplayPluginOptions, DeprecatedRecordingOptions, Pick<RecordingOptions, 'maskAllInputs'>{}
 
 interface CommonEventContext {
   /**