feat(replay): Upgrade to rrweb 2.0 (#8760)

This is fully backwards compatible with prior versions of the Replay
SDK. The only breaking change that we will making is to not be masking
`aria-label` by default. The reason for this change is to align with our
core SDK which also does not mask `aria-label`. This change also enables
better support of searching by clicks.

Another change that needs to be highlighted is the 13% bundle size
increase. This bundle size increase is necessary to bring improved
recording performance and improved replay fidelity, especially in
regards to web components and iframes. We will be investigating the
reduction of the bundle size in [this
PR](#8815).

Here are benchmarks comparing the version 1 of rrweb to version 2

| metric    | v1         | v2         |
| --------- | ---------- | ---------- |
| lcp       | 1486.06 ms | 1529.11 ms |
| cls       | 0.40 ms    | 0.40 ms    |
| fid       | 1.53 ms    | 1.50 ms    |
| tbt       | 3207.22 ms | 3036.80 ms |
| memoryAvg | 131.83 MB  | 124.84 MB  |
| memoryMax | 324.8 MB   | 339.03 MB  |
| netTx     | 282.67 KB  | 272.51 KB  |
| netRx     | 8.02 MB    | 8.07 MB    |

Author: billyvg

.size-limit.js

@@ -5,7 +5,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, Replay, BrowserTracing }',
     gzip: true,
-    limit: '80 KB',
+    limit: '90 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing) - Webpack (gzipped)',
@@ -47,7 +47,7 @@ module.exports = [
     name: '@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)',
     path: 'packages/browser/build/bundles/bundle.tracing.replay.min.js',
     gzip: false,
-    limit: '250 KB',
+    limit: '260 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)',
@@ -77,7 +77,7 @@ module.exports = [
     path: 'packages/react/build/esm/index.js',
     import: '{ init, BrowserTracing, Replay }',
     gzip: true,
-    limit: '80 KB',
+    limit: '90 KB',
   },
   {
     name: '@sentry/react - Webpack (gzipped)',
@@ -93,7 +93,7 @@ module.exports = [
     path: 'packages/nextjs/build/esm/client/index.js',
     import: '{ init, BrowserTracing, Replay }',
     gzip: true,
-    limit: '100 KB',
+    limit: '110 KB',
   },
   {
     name: '@sentry/nextjs Client - Webpack (gzipped)',

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+### Important Changes
+
+- **feat(replay): Upgrade to rrweb2**
+
+This is fully backwards compatible with prior versions of the Replay SDK. The only breaking change that we will making is to not be masking `aria-label` by default. The reason for this change is to align with our core SDK which also does not mask `aria-label`. This change also enables better support of searching by clicks.
+
+Another change that needs to be highlighted is the 13% bundle size increase. This bundle size increase is necessary to bring improved recording performance and improved replay fidelity, especially in regards to web components and iframes. We will be investigating the reduction of the bundle size in [this PR](https://github.com/getsentry/sentry-javascript/issues/8815).
+
+Here are benchmarks comparing the version 1 of rrweb to version 2
+
+| metric    | v1         | v2         |
+| --------- | ---------- | ---------- |
+| lcp       | 1486.06 ms | 1529.11 ms |
+| cls       | 0.40 ms    | 0.40 ms    |
+| fid       | 1.53 ms    | 1.50 ms    |
+| tbt       | 3207.22 ms | 3036.80 ms |
+| memoryAvg | 131.83 MB  | 124.84 MB  |
+| memoryMax | 324.8 MB   | 339.03 MB  |
+| netTx     | 282.67 KB  | 272.51 KB  |
+| netRx     | 8.02 MB    | 8.07 MB    |
+
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
 ## 7.72.0

packages/browser-integration-tests/suites/replay/customEvents/test.ts

@@ -117,7 +117,7 @@ sentryTest(
             nodeId: expect.any(Number),
             node: {
               attributes: {
-                'aria-label': '** ***** ** **********',
+                'aria-label': 'An Error in aria-label',
                 class: 'btn btn-error',
                 id: 'error',
                 role: 'button',

packages/browser-integration-tests/suites/replay/fileInput/test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
+import type { inputData } from '@sentry-internal/rrweb';
 import { IncrementalSource } from '@sentry-internal/rrweb';
-import type { inputData } from '@sentry-internal/rrweb/typings/types';
 
 import { sentryTest } from '../../../utils/fixtures';
 import type { IncrementalRecordingSnapshot } from '../../../utils/replayHelpers';

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 9,
       "x": 41,
-      "y": 18
+      "y": 18,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental-chromium

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 9,
       "x": 41,
-      "y": 18
+      "y": 18,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 9,
       "x": 41,
-      "y": 18
+      "y": 18,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental-chromium

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 9,
-      "x": 41,
-      "y": 18
+      "x": 41.810001373291016,
+      "y": 18.479999542236328
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 9,
       "x": 41,
-      "y": 18
+      "y": 18,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 12,
       "x": 41,
-      "y": 90
+      "y": 90,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

packages/browser-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental-chromium

@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -25,8 +25,8 @@
       "source": 2,
       "type": 0,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -37,7 +37,8 @@
       "type": 2,
       "id": 12,
       "x": 41,
-      "y": 90
+      "y": 90,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }