feat(replay): Upgrade rrweb packages to v2 (#56088)

This upgrades our rrweb packages to v2, this will affect the player. It
should be backwards compatible with old SDK versions

package.json

@@ -48,8 +48,9 @@
     "@react-types/shared": "^3.18.1",
     "@sentry-internal/global-search": "^0.5.7",
     "@sentry-internal/react-inspector": "6.0.1-4",
-    "@sentry-internal/rrweb": "1.108.0",
-    "@sentry-internal/rrweb-player": "1.108.0",
+    "@sentry-internal/rrweb": "2.0.0-beta11.0",
+    "@sentry-internal/rrweb-player": "2.0.0-beta11.0",
+    "@sentry-internal/rrweb-snapshot": "2.0.0-beta11.0",
     "@sentry/integrations": "7.70.0-beta.1",
     "@sentry/node": "7.70.0-beta.1",
     "@sentry/react": "7.70.0-beta.1",

static/app/utils/replays/extractDomNodes.tsx

@@ -1,5 +1,5 @@
-import type {Mirror} from '@sentry-internal/rrweb';
 import {Replayer} from '@sentry-internal/rrweb';
+import type {Mirror} from '@sentry-internal/rrweb-snapshot';
 
 import type {RecordingFrame, ReplayFrame} from 'sentry/utils/replays/types';
 

static/app/utils/replays/highlightNode.tsx

@@ -82,8 +82,14 @@ export function highlightNode(replayer: Replayer, props: AddHighlightParams) {
   // want on top of the replay. We may need to revisit this strategy as we
   // create a new canvas for every highlight. See additional notes in
   // removeHighlight() method.
+  const element = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
+
+  if (!element) {
+    return null;
+  }
+
   const canvas = mouseTail.cloneNode();
-  const boundingClientRect = node.getBoundingClientRect();
+  const boundingClientRect = element.getBoundingClientRect();
   const drawProps = {
     annotation: props.annotation ?? '',
     color: props.color ?? DEFAULT_HIGHLIGHT_COLOR,

yarn.lock

@@ -2379,30 +2379,46 @@
   resolved "https://registry.yarnpkg.com/@sentry-internal/react-inspector/-/react-inspector-6.0.1-4.tgz#10758f3461cf2cf48df8c80f0514c55ca18872c5"
   integrity sha512-uL2RyvW8EqDEchnbo8Hu/c4IpBqM3LLxUpZPHs8o40kynerzPset6bC/m5SU124gEhy4PqjdvJ7DhTYR75NetQ==
 
-"@sentry-internal/rrweb-player@1.108.0":
-  version "1.108.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-player/-/rrweb-player-1.108.0.tgz#52ccb6f8adc65f0032136a43d02439c43dbbdde6"
-  integrity sha512-KYu75z493qhg8Km9BsjlkA1rr6qx+vF5YHVSMF4e9udsFcYezK3SMp+IFuMVugN/s0uuKIx+FZuVppq18zIyTg==
+"@sentry-internal/rrdom@2.0.0-beta11.0":
+  version "2.0.0-beta11.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/rrdom/-/rrdom-2.0.0-beta11.0.tgz#83110a5db9434383eba3c7506aaa6a5f8b32ea78"
+  integrity sha512-6yL23XeauKi4FtRewFnX5SL22HOVirwgCj9VYb31It8kVaE+aFWxcMo8bkkgxO9orokox2iW4fjr+zsuvGkTgg==
   dependencies:
-    "@sentry-internal/rrweb" "1.108.0"
-    "@tsconfig/svelte" "^3.0.0"
+    "@sentry-internal/rrweb-snapshot" "2.0.0-beta11.0"
 
-"@sentry-internal/rrweb-snapshot@1.108.0":
-  version "1.108.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-1.108.0.tgz#9b09b7e5d6b13d4d7493017ee190b097f9916284"
-  integrity sha512-ypR/4oBB8s7d5+7JTkdk+VvlMPRRhbuz3xSFMXShCH2LJ6kINGfYBAYr6rr6o2Bko9j5rVHjYDDrVWkTw4CXSg==
+"@sentry-internal/rrweb-player@2.0.0-beta11.0":
+  version "2.0.0-beta11.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-player/-/rrweb-player-2.0.0-beta11.0.tgz#518f8003ae398c7694148b12da30d9f37b4cafb0"
+  integrity sha512-/uPw1jP8Dkqwz8QsmaY4xQcIJH/ukFt60h1CUtQjJ8Cf3uvcdyvmYPMCGksU6azDVAOG8hy/ElvJQDxFM5Pj+g==
+  dependencies:
+    "@sentry-internal/rrweb" "2.0.0-beta11.0"
+    "@tsconfig/svelte" "^1.0.0"
+
+"@sentry-internal/rrweb-snapshot@2.0.0-beta11.0":
+  version "2.0.0-beta11.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-2.0.0-beta11.0.tgz#54a5f54a0b5ae66927ef77d21be6750bceac692a"
+  integrity sha512-IF0NuVja+f5PrRYy5xwMZlv3gNmm46ODti3ECLuuxqZ0n93DKnicZ/Bc03sHpne2cVla+6x0+lGk6eHX4fqauw==
+
+"@sentry-internal/rrweb-types@2.0.0-beta11.0":
+  version "2.0.0-beta11.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-types/-/rrweb-types-2.0.0-beta11.0.tgz#12ebea406a2813deab534b35ccc7a7081466ec21"
+  integrity sha512-LzaVyUOnd1SDMVeO9Mo8KndHIAMxBNPn972/rx+pB4lxOWUQiV627ymu9uUZR5XzvBUDmtpeEQalBsoFHJDDJQ==
+  dependencies:
+    "@sentry-internal/rrweb-snapshot" "2.0.0-beta11.0"
 
-"@sentry-internal/rrweb@1.108.0":
-  version "1.108.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-1.108.0.tgz#4b724c1fff44fb4705723c121ca424c00fabc398"
-  integrity sha512-IuRuA1k2N23e6oTRnV9866mauoOvesYFZFlQHgOvt7p3pJDfXhDUZj1DKaQZJrbooTUUIh7YrpZ2Vukoq0wCFw==
+"@sentry-internal/rrweb@2.0.0-beta11.0":
+  version "2.0.0-beta11.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-2.0.0-beta11.0.tgz#9bcc760bd8b494ea87eea9ead54226146d8c27c6"
+  integrity sha512-9nLYk2ks+cdAKRQNycKhypPHMcF2f/N+yrcaqLVESotEbOgiJlH5CbNjW7XHNTXw6rWLkFtulBveghC4vSInlg==
   dependencies:
-    "@sentry-internal/rrweb-snapshot" "1.108.0"
+    "@sentry-internal/rrdom" "2.0.0-beta11.0"
+    "@sentry-internal/rrweb-snapshot" "2.0.0-beta11.0"
+    "@sentry-internal/rrweb-types" "2.0.0-beta11.0"
     "@types/css-font-loading-module" "0.0.7"
     "@xstate/fsm" "^1.4.0"
     base64-arraybuffer "^1.0.1"
     fflate "^0.4.4"
-    mitt "^1.1.3"
+    mitt "^3.0.0"
 
 "@sentry-internal/tracing@7.66.0":
   version "7.66.0"
@@ -2709,10 +2725,10 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.2.tgz#423c77877d0569db20e1fc80885ac4118314010e"
   integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
 
-"@tsconfig/svelte@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-3.0.0.tgz#b06e059209f04c414de0069f2f0e2796d979fc6f"
-  integrity sha512-pYrtLtOwku/7r1i9AMONsJMVYAtk3hzOfiGNekhtq5tYBGA7unMve8RvUclKLMT3PrihvJqUmzsRGh0RP84hKg==
+"@tsconfig/svelte@^1.0.0":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-1.0.13.tgz#2fa34376627192c0d643ce54964915e2bd3a58e4"
+  integrity sha512-5lYJP45Xllo4yE/RUBccBT32eBlRDbqN8r1/MIvQbKxW3aFqaYPCNgm8D5V20X4ShHcwvYWNlKg3liDh1MlBoA==
 
 "@types/aria-query@^4.2.0":
   version "4.2.1"
@@ -8424,10 +8440,10 @@ minizlib@^2.1.1, minizlib@^2.1.2:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
-mitt@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
-  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
+mitt@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
 mkdirp@^1.0.3, mkdirp@^1.0.4:
   version "1.0.4"