From 355be042a4eb3f734a6e5894d1706d93702857ee Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 1 Mar 2023 16:30:34 +0100 Subject: [PATCH 1/6] fix(replay): Update rrweb to 1.105.0 --- CHANGELOG.md | 2 ++ packages/replay/package.json | 2 +- yarn.lock | 18 +++++++++--------- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f1da348c3fb..2e30b3c97422 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott +- fix(replay): Ensure `` is masked ([#69](https://github.com/getsentry/rrweb/pull/69)) + ## 7.41.0 - feat: Ensure we use the same default `environment` everywhere (#7327) diff --git a/packages/replay/package.json b/packages/replay/package.json index dc607ff7b0f1..3a3e6025343b 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -44,7 +44,7 @@ "devDependencies": { "@babel/core": "^7.17.5", "@sentry-internal/replay-worker": "7.41.0", - "@sentry-internal/rrweb": "1.104.1", + "@sentry-internal/rrweb": "1.105.0", "jsdom-worker": "^0.2.1", "tslib": "^1.9.3" }, diff --git a/yarn.lock b/yarn.lock index aa778db88c85..6de62b92a4ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3917,17 +3917,17 @@ semver "7.3.2" semver-intersect "1.4.0" -"@sentry-internal/rrweb-snapshot@1.104.1": - version "1.104.1" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-1.104.1.tgz#baa1e951be432b8b8345833f5ed926144c62601f" - integrity sha512-IefNuRsyG8xoo6RNqTRoIaaarhjV1NO7JPiohYyyeSWDu26hK4mKlwDLlY41A5fRq8i49fiISoLU1EKueYFGOA== +"@sentry-internal/rrweb-snapshot@1.105.0": + version "1.105.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-1.105.0.tgz#b95d056e3602ab075049b31354942051137f3de2" + integrity sha512-UsrCVB5PVKTd3nXidUQSFQPjMHi2p5RzcujdBVuZfOJmRAqkHW6fN3CM4H6vJh0L5bgs+O/MFTNSv+iiAyVrBQ== -"@sentry-internal/rrweb@1.104.1": - version "1.104.1" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-1.104.1.tgz#a4c25f8daf59327d528540f872d301f4bc866dcc" - integrity sha512-kdf/tfMsIr3mr6IGZwpBcrS05GWyKbkAhv/4GkFevw9VSeHozTn2pPx6gU9M4WskN7NiZp4wvJ+4uLgwWdZSwg== +"@sentry-internal/rrweb@1.105.0": + version "1.105.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-1.105.0.tgz#c4238692753ed910d0fc23887361cc4d5d5112ab" + integrity sha512-RwJiQXaYzvLhqkAJtvwxu6WuO3OnedTpWtfdJX73kYujleSzoIBRNUXBs03Ir9E48UN5gzKu/eRG76QdH+e8Ow== dependencies: - "@sentry-internal/rrweb-snapshot" "1.104.1" + "@sentry-internal/rrweb-snapshot" "1.105.0" "@types/css-font-loading-module" "0.0.7" "@xstate/fsm" "^1.4.0" base64-arraybuffer "^1.0.1" From 624ffb74fe543c3fbe5db93b9e37212b6a4cadbb Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 1 Mar 2023 16:37:48 +0100 Subject: [PATCH 2/6] feat(replay): Add breadcrumb when encountering large mutations --- packages/replay/src/replay.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts index 505d53410d1f..f9c0cc59dbed 100644 --- a/packages/replay/src/replay.ts +++ b/packages/replay/src/replay.ts @@ -198,6 +198,21 @@ export class ReplayContainer implements ReplayContainerInterface { // instead, we'll always keep the last 60 seconds of replay before an error happened ...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }), emit: this._handleRecordingEmit, + onMutation: (mutations: unknown[]) => { + const count = mutations.length; + + if (count > 500) { + const breadcrumb = createBreadcrumb({ + category: 'replay.mutations', + message: `A mutation with ${count} changes was recorded, which indicate slow performance.`, + data: { + mutationsCount: count, + }, + }); + this._createCustomBreadcrumb(breadcrumb); + } + return true; + }, }); } catch (err) { this._handleException(err); From fd732a511286bebd18f4dd90689317803ab88016 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 1 Mar 2023 18:30:06 +0100 Subject: [PATCH 3/6] Apply suggestions from code review --- packages/replay/src/replay.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts index f9c0cc59dbed..9983e41bf2ad 100644 --- a/packages/replay/src/replay.ts +++ b/packages/replay/src/replay.ts @@ -204,13 +204,14 @@ export class ReplayContainer implements ReplayContainerInterface { if (count > 500) { const breadcrumb = createBreadcrumb({ category: 'replay.mutations', - message: `A mutation with ${count} changes was recorded, which indicate slow performance.`, + message: `A mutation with ${count} changes was recorded, which may indicate slow performance.`, data: { mutationsCount: count, }, }); this._createCustomBreadcrumb(breadcrumb); } + // `true` means we use the regular mutation handling by rrweb return true; }, }); From 6d60303b982c2a4e13b346f2b198013cb8844258 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 3 Mar 2023 09:43:15 +0100 Subject: [PATCH 4/6] add experiment --- packages/replay/src/replay.ts | 23 ++++++++++++----------- packages/replay/src/types.ts | 1 + 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts index 9983e41bf2ad..5123d94bae36 100644 --- a/packages/replay/src/replay.ts +++ b/packages/replay/src/replay.ts @@ -199,17 +199,18 @@ export class ReplayContainer implements ReplayContainerInterface { ...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }), emit: this._handleRecordingEmit, onMutation: (mutations: unknown[]) => { - const count = mutations.length; - - if (count > 500) { - const breadcrumb = createBreadcrumb({ - category: 'replay.mutations', - message: `A mutation with ${count} changes was recorded, which may indicate slow performance.`, - data: { - mutationsCount: count, - }, - }); - this._createCustomBreadcrumb(breadcrumb); + if (this._options._experiments.captureMutationSize) { + const count = mutations.length; + + if (count > 500) { + const breadcrumb = createBreadcrumb({ + category: 'replay.mutations', + data: { + length: count, + }, + }); + this._createCustomBreadcrumb(breadcrumb); + } } // `true` means we use the regular mutation handling by rrweb return true; diff --git a/packages/replay/src/types.ts b/packages/replay/src/types.ts index 174f1da240f8..8a8ff22bc987 100644 --- a/packages/replay/src/types.ts +++ b/packages/replay/src/types.ts @@ -105,6 +105,7 @@ export interface ReplayPluginOptions extends SessionOptions { _experiments: Partial<{ captureExceptions: boolean; traceInternals: boolean; + captureMutationSize: boolean; }>; } From e29e310b9f6887af4d8a86c049861f8de48897ad Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 3 Mar 2023 10:26:45 +0100 Subject: [PATCH 5/6] fix test --- packages/replay/test/integration/rrweb.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/replay/test/integration/rrweb.test.ts b/packages/replay/test/integration/rrweb.test.ts index 6d324d96208e..3e37df5f2910 100644 --- a/packages/replay/test/integration/rrweb.test.ts +++ b/packages/replay/test/integration/rrweb.test.ts @@ -32,6 +32,7 @@ describe('Integration | rrweb', () => { "maskInputSelector": ".sentry-mask,[data-sentry-mask]", "maskTextFn": undefined, "maskTextSelector": ".sentry-mask,[data-sentry-mask]", + "onMutation": [Function], "slimDOMOptions": "all", "unblockSelector": ".sentry-unblock,[data-sentry-unblock]", "unmaskInputSelector": ".sentry-unmask,[data-sentry-unmask]", From dc19c9fb3987fb6d567b341329b9988694fae19e Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 7 Mar 2023 09:15:52 +0100 Subject: [PATCH 6/6] Update packages/replay/src/replay.ts Co-authored-by: Billy Vong --- packages/replay/src/replay.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts index 5123d94bae36..08c1a685af8b 100644 --- a/packages/replay/src/replay.ts +++ b/packages/replay/src/replay.ts @@ -206,7 +206,7 @@ export class ReplayContainer implements ReplayContainerInterface { const breadcrumb = createBreadcrumb({ category: 'replay.mutations', data: { - length: count, + count, }, }); this._createCustomBreadcrumb(breadcrumb);