fix(replay): Make maskAllText selector more specific

Sometimes, we seemed to be masking e.g. content of style tags. This new selector should be more specific to not mask anything that we know is not actually text.

Author: mydea

packages/replay/src/constants.ts

@@ -25,3 +25,6 @@ export const MAX_SESSION_LIFE = 1_800_000; // 30 minutes
  */
 export const DEFAULT_SESSION_SAMPLE_RATE = 0.1;
 export const DEFAULT_ERROR_SAMPLE_RATE = 1.0;
+
+/** The select to use for the `maskAllText` option  */
+export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style,script)';

packages/replay/src/integration.ts

@@ -2,7 +2,7 @@ import type { BrowserClient, BrowserOptions } from '@sentry/browser';
 import { getCurrentHub } from '@sentry/core';
 import { Integration } from '@sentry/types';
 
-import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE } from './constants';
+import { DEFAULT_ERROR_SAMPLE_RATE, DEFAULT_SESSION_SAMPLE_RATE, MASK_ALL_TEXT_SELECTOR } from './constants';
 import { ReplayContainer } from './replay';
 import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from './types';
 import { isBrowser } from './util/isBrowser';
@@ -107,7 +107,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       // `maskAllText` is a more user friendly option to configure
       // `maskTextSelector`. This means that all nodes will have their text
       // content masked.
-      this.recordingOptions.maskTextSelector = '*';
+      this.recordingOptions.maskTextSelector = MASK_ALL_TEXT_SELECTOR;
     }
 
     if (this.options.blockAllMedia) {

packages/replay/test/unit/index-integrationSettings.test.ts

@@ -1,4 +1,5 @@
 import { mockSdk } from './../index';
+import { MASK_ALL_TEXT_SELECTOR } from '../../src/constants';
 
 describe('integration settings', () => {
   beforeEach(() => {
@@ -168,13 +169,13 @@ describe('integration settings', () => {
       const { replay } = await mockSdk({ replayOptions: {} });
 
       // Default is true
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
 
     it('works with true', async () => {
       const { replay } = await mockSdk({ replayOptions: { maskAllText: true } });
 
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
 
     it('works with false', async () => {
@@ -186,7 +187,7 @@ describe('integration settings', () => {
     it('overwrites custom maskTextSelector option', async () => {
       const { replay } = await mockSdk({ replayOptions: { maskAllText: true, maskTextSelector: '[custom]' } });
 
-      expect(replay['_recordingOptions'].maskTextSelector).toBe('*');
+      expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
     });
   });