Skip to content

Commit ee301c3

Browse files
billyvgbillyvg
authored
feat(replay): Upgrade to rrweb@1.102.0 (#7133)
Upgrades rrweb library which will includes: - feat: Add `maskAllText` option - feat: With maskAllText, mask the attributes: placeholder, title, `aria-label` - feat: fix masking on `textarea`
1 parent 26972d3 commit ee301c3

File tree

10 files changed

+27
-46
lines changed

10 files changed

+27
-46
lines changed

‎packages/integration-tests/suites/replay/privacy/test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
8080
type: 2,
8181
tagName: 'button',
8282
attributes: {
83-
'aria-label': 'Click me',
83+
'aria-label': '***** **',
8484
onclick: "console.log('Test log')",
8585
},
8686
childNodes: [
@@ -139,7 +139,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
139139
type: 2,
140140
tagName: 'input',
141141
attributes: {
142-
placeholder: 'Placeholder should be masked',
142+
placeholder: '*********** ****** ** ******',
143143
},
144144
childNodes: [],
145145
id: 18,
@@ -153,7 +153,7 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
153153
type: 2,
154154
tagName: 'div',
155155
attributes: {
156-
title: 'Title should be masked',
156+
title: '***** ****** ** ******',
157157
},
158158
childNodes: [
159159
{

‎packages/replay/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
4747
"devDependencies": {
4848
"@babel/core": "^7.17.5",
49-
"@sentry-internal/rrweb": "1.101.2",
49+
"@sentry-internal/rrweb": "1.102.0",
5050
"@types/pako": "^2.0.0",
5151
"jsdom-worker": "^0.2.1",
5252
"pako": "^2.0.4",

‎packages/replay/src/constants.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@ export const VISIBILITY_CHANGE_TIMEOUT = SESSION_IDLE_DURATION;
2020
// The maximum length of a session
2121
export const MAX_SESSION_LIFE = 3_600_000; // 60 minutes
2222

23-
/** The select to use for the `maskAllText` option */
24-
export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style), body *:not(script)';
25-
2623
/** Default flush delays */
2724
export const DEFAULT_FLUSH_MIN_DELAY = 5_000;
2825
export const DEFAULT_FLUSH_MAX_DELAY = 5_000;

‎packages/replay/src/integration.ts‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { getCurrentHub } from '@sentry/core';
22
import type { BrowserClientReplayOptions, Integration } from '@sentry/types';
33
import { dropUndefinedKeys } from '@sentry/utils';
44

5-
import { DEFAULT_FLUSH_MAX_DELAY, DEFAULT_FLUSH_MIN_DELAY, MASK_ALL_TEXT_SELECTOR } from './constants';
5+
import { DEFAULT_FLUSH_MAX_DELAY, DEFAULT_FLUSH_MIN_DELAY } from './constants';
66
import { ReplayContainer } from './replay';
77
import type { RecordingOptions, ReplayConfiguration, ReplayPluginOptions } from './types';
88
import { getPrivacyOptions } from './util/getPrivacyOptions';
@@ -53,7 +53,7 @@ export class Replay implements Integration {
5353
_experiments = {},
5454
sessionSampleRate,
5555
errorSampleRate,
56-
maskAllText,
56+
maskAllText = true,
5757
maskAllInputs = true,
5858
blockAllMedia = true,
5959

@@ -79,6 +79,7 @@ export class Replay implements Integration {
7979
}: ReplayConfiguration = {}) {
8080
this._recordingOptions = {
8181
maskAllInputs,
82+
maskAllText,
8283
maskInputOptions: { ...(maskInputOptions || {}), password: true },
8384
maskTextFn: maskFn,
8485
maskInputFn: maskFn,
@@ -113,7 +114,6 @@ export class Replay implements Integration {
113114
sessionSampleRate,
114115
errorSampleRate,
115116
useCompression,
116-
maskAllText: typeof maskAllText === 'boolean' ? maskAllText : !maskTextSelector,
117117
blockAllMedia,
118118
_experiments,
119119
};
@@ -142,13 +142,6 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
142142
this._initialOptions.errorSampleRate = errorSampleRate;
143143
}
144144

145-
if (this._initialOptions.maskAllText) {
146-
// `maskAllText` is a more user friendly option to configure
147-
// `maskTextSelector`. This means that all nodes will have their text
148-
// content masked.
149-
this._recordingOptions.maskTextSelector = MASK_ALL_TEXT_SELECTOR;
150-
}
151-
152145
if (this._initialOptions.blockAllMedia) {
153146
// `blockAllMedia` is a more user friendly option to configure blocking
154147
// embedded media elements

‎packages/replay/src/types.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,6 @@ export interface ReplayPluginOptions extends SessionOptions {
9090
*/
9191
useCompression: boolean;
9292

93-
/**
94-
* Mask all text in recordings. All text will be replaced with asterisks by default.
95-
*/
96-
maskAllText: boolean;
97-
9893
/**
9994
* Block all media (e.g. images, svg, video) in recordings.
10095
*/
@@ -180,7 +175,7 @@ export interface ReplayConfiguration
180175
extends ReplayIntegrationPrivacyOptions,
181176
OptionalReplayPluginOptions,
182177
DeprecatedPrivacyOptions,
183-
Pick<RecordingOptions, 'maskAllInputs'> {}
178+
Pick<RecordingOptions, 'maskAllText' | 'maskAllInputs'> {}
184179

185180
interface CommonEventContext {
186181
/**

‎packages/replay/src/types/rrweb.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export type eventWithTime = {
3030
* Record<string, unknown> union type.
3131
*/
3232
export type recordOptions = {
33+
maskAllText?: boolean;
3334
maskAllInputs?: boolean;
3435
blockClass?: blockClass;
3536
ignoreClass?: string;

‎packages/replay/test/integration/integrationSettings.test.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { MASK_ALL_TEXT_SELECTOR } from '../../src/constants';
21
import { mockSdk } from '../index';
32

43
describe('Integration | integrationSettings', () => {
@@ -191,33 +190,28 @@ describe('Integration | integrationSettings', () => {
191190
it('works with default value', async () => {
192191
const { replay } = await mockSdk({ replayOptions: {} });
193192

194-
// Default is true
195-
expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
193+
expect(replay['_recordingOptions'].maskAllText).toBe(true);
196194
});
197195

198196
it('works with true', async () => {
199197
const { replay } = await mockSdk({ replayOptions: { maskAllText: true } });
200198

201-
expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
199+
expect(replay['_recordingOptions'].maskAllText).toBe(true);
202200
});
203201

204202
it('works with false', async () => {
205203
const { replay } = await mockSdk({ replayOptions: { maskAllText: false } });
206204

207-
expect(replay['_recordingOptions'].maskTextSelector).toBe('.sentry-mask,[data-sentry-mask]');
205+
expect(replay['_recordingOptions'].maskAllText).toBe(false);
208206
});
207+
});
209208

210-
it('maskTextSelector takes precedence over maskAllText when not specifiying maskAllText:true', async () => {
209+
describe('maskTextSelector', () => {
210+
it('can have custom mask selector', async () => {
211211
const { replay } = await mockSdk({ replayOptions: { maskTextSelector: '[custom]' } });
212212

213213
expect(replay['_recordingOptions'].maskTextSelector).toBe('[custom],.sentry-mask,[data-sentry-mask]');
214214
});
215-
216-
it('maskAllText takes precedence over maskTextSelector when specifiying maskAllText:true', async () => {
217-
const { replay } = await mockSdk({ replayOptions: { maskAllText: true, maskTextSelector: '[custom]' } });
218-
219-
expect(replay['_recordingOptions'].maskTextSelector).toBe(MASK_ALL_TEXT_SELECTOR);
220-
});
221215
});
222216

223217
describe('_experiments', () => {

‎packages/replay/test/integration/rrweb.test.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ describe('Integration | rrweb', () => {
2424
"inlineImages": false,
2525
"inlineStylesheet": true,
2626
"maskAllInputs": true,
27+
"maskAllText": true,
2728
"maskInputFn": undefined,
2829
"maskInputOptions": Object {
2930
"password": true,
3031
},
3132
"maskInputSelector": ".sentry-mask,[data-sentry-mask]",
3233
"maskTextFn": undefined,
33-
"maskTextSelector": "body *:not(style), body *:not(script)",
34+
"maskTextSelector": ".sentry-mask,[data-sentry-mask]",
3435
"slimDOMOptions": "all",
3536
"unblockSelector": ".sentry-unblock,[data-sentry-unblock]",
3637
"unmaskInputSelector": ".sentry-unmask,[data-sentry-unmask]",

‎packages/replay/test/utils/setupReplayContainer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ export function setupReplayContainer({
1616
sessionSampleRate: 0,
1717
errorSampleRate: 1,
1818
useCompression: false,
19-
maskAllText: true,
2019
blockAllMedia: true,
2120
_experiments: {},
2221
...options,
2322
},
2423
recordingOptions: {
24+
maskAllText: true,
2525
...recordingOptions,
2626
},
2727
});

‎yarn.lock‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3158,17 +3158,17 @@
31583158
semver "7.3.2"
31593159
semver-intersect "1.4.0"
31603160

3161-
"@sentry-internal/rrweb-snapshot@1.101.2":
3162-
version "1.101.2"
3163-
resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-1.101.2.tgz#cf73629374812f110ab7271f9da65f1afc6c08c3"
3164-
integrity sha512-wbc/lQ4ta7zXZGFU3sFfTz8PVcfOTeI2H2l2bo4BehZiQEEDTrqhGSFe5Nzq6Noi38CZyPT0kweGI4fUk1u0KQ==
3161+
"@sentry-internal/rrweb-snapshot@1.102.0":
3162+
version "1.102.0"
3163+
resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-1.102.0.tgz#d9a68fe89a51feda1fe1a5385ef3ae84c773dbac"
3164+
integrity sha512-DLAKilL1/xr3OlC9VYBF5p1YbmU4WgKv4j9NBsUw/dM8qLcLLxZaS6oBKunoSQrMvZn4BtvTn7REzBb8lUt9Vw==
31653165

3166-
"@sentry-internal/rrweb@1.101.2":
3167-
version "1.101.2"
3168-
resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-1.101.2.tgz#65e5d80745e1c01c2f66031fb807b36837283944"
3169-
integrity sha512-IaDgoo9kxnwC6xn25yLU0ymKLVBAWGEH90iMdweTC7Izhza6k4oTy01t4/wy7ORCnfCeHZYJ4gkNJJyi4J1XHQ==
3166+
"@sentry-internal/rrweb@1.102.0":
3167+
version "1.102.0"
3168+
resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-1.102.0.tgz#85bbd35594c4ef25427502be6e34c994b66559bc"
3169+
integrity sha512-GyU6UPN8RLlDQFyW0CRL30Gv+q02Qk01C83wSDuwnMRUeFufU5Ybj2zqlnh4HCali/JMaKmQlLT+C0EVPpwmwA==
31703170
dependencies:
3171-
"@sentry-internal/rrweb-snapshot" "1.101.2"
3171+
"@sentry-internal/rrweb-snapshot" "1.102.0"
31723172
"@types/css-font-loading-module" "0.0.7"
31733173
"@xstate/fsm" "^1.4.0"
31743174
base64-arraybuffer "^1.0.1"

0 commit comments

Comments
 (0)