feat(replay): Update rrweb to 1.105.0 & add breadcrumb when encountering large mutation (#7314)

---------

Co-authored-by: Billy Vong <[email protected]>

Author: mydea

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+- fix(replay): Ensure `<input type='submit' value='Btn text'>` is masked ([#69](https://github.com/getsentry/rrweb/pull/69))
+
 ## 7.41.0
 
 - feat: Ensure we use the same default `environment` everywhere (#7327)

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"
   },

packages/replay/src/replay.ts

@@ -208,6 +208,23 @@ 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[]) => {
+          if (this._options._experiments.captureMutationSize) {
+            const count = mutations.length;
+
+            if (count > 500) {
+              const breadcrumb = createBreadcrumb({
+                category: 'replay.mutations',
+                data: {
+                  count,
+                },
+              });
+              this._createCustomBreadcrumb(breadcrumb);
+            }
+          }
+          // `true` means we use the regular mutation handling by rrweb
+          return true;
+        },
       });
     } catch (err) {
       this._handleException(err);

packages/replay/src/types.ts

@@ -110,6 +110,7 @@ export interface ReplayPluginOptions extends SessionOptions {
   _experiments: Partial<{
     captureExceptions: boolean;
     traceInternals: boolean;
+    captureMutationSize: boolean;
   }>;
 }
 

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]",

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"