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 |
getsentry · Sep 27, 2023 · bab1849 · bab1849
1 parent bbff156
commit bab1849
Show file tree

Hide file tree

Showing 49 changed files with 599 additions and 323 deletions.
diff --git a/.size-limit.js b/.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)',

diff --git a/CHANGELOG.md b/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

diff --git a/packages/browser-integration-tests/suites/replay/customEvents/test.ts b/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',

diff --git a/packages/browser-integration-tests/suites/replay/fileInput/test.ts b/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';

diff --git a/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental b/...r-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]
   }

diff --git a/...tion-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental-chromium b/...tion-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]
   }

diff --git a/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental b/...r-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]
   }

diff --git a/...tion-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental-chromium b/...tion-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]
   }

diff --git a/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental b/...r-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]
   }

diff --git a/...tion-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental-chromium b/...tion-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]
   }

diff --git a/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental b/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental
@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 15,
-      "x": 157,
-      "y": 90
+      "x": 157.13999938964844,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -34,8 +34,8 @@
       "source": 2,
       "type": 0,
       "id": 15,
-      "x": 157,
-      "y": 90
+      "x": 157.13999938964844,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -46,7 +46,8 @@
       "type": 2,
       "id": 15,
       "x": 157,
-      "y": 90
+      "y": 90,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

diff --git a/...tion-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental-chromium b/...tion-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental-chromium
@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 15,
-      "x": 157,
-      "y": 90
+      "x": 157.13999938964844,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -34,8 +34,8 @@
       "source": 2,
       "type": 0,
       "id": 15,
-      "x": 157,
-      "y": 90
+      "x": 157.13999938964844,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -46,7 +46,8 @@
       "type": 2,
       "id": 15,
       "x": 157,
-      "y": 90
+      "y": 90,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }

diff --git a/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental b/...r-integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental
@@ -5,8 +5,8 @@
       "source": 2,
       "type": 1,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -34,8 +34,8 @@
       "source": 2,
       "type": 0,
       "id": 12,
-      "x": 41,
-      "y": 90
+      "x": 41.810001373291016,
+      "y": 90.37000274658203
     },
     "timestamp": [timestamp]
   },
@@ -46,7 +46,8 @@
       "type": 2,
       "id": 12,
       "x": 41,
-      "y": 90
+      "y": 90,
+      "pointerType": 0
     },
     "timestamp": [timestamp]
   }