From 4841ffa7ab89b7eac8251d3937f8910330528f3b Mon Sep 17 00:00:00 2001 From: David Newell Date: Fri, 5 Apr 2024 09:12:00 +0100 Subject: [PATCH 1/4] chore: upgrade rrweb to 2.0.0-alpha.12 --- package.json | 8 ++-- patches/rrweb@2.0.0-alpha.12.patch | 69 ++++++++++++++++++++++++++++++ pnpm-lock.yaml | 44 +++++++++---------- 3 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 patches/rrweb@2.0.0-alpha.12.patch diff --git a/package.json b/package.json index 6692baaed..8704731eb 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.6", - "@rrweb/types": "2.0.0-alpha.11", + "@rrweb/types": "2.0.0-alpha.12", "@sentry/types": "7.37.2", "@testing-library/dom": "^9.3.0", "@types/eslint": "^8.44.6", @@ -86,8 +86,8 @@ "rollup": "^4.9.6", "rollup-plugin-dts": "^6.1.0", "rollup-plugin-visualizer": "^5.12.0", - "rrweb": "2.0.0-alpha.11", - "rrweb-snapshot": "2.0.0-alpha.11", + "rrweb": "2.0.0-alpha.12", + "rrweb-snapshot": "2.0.0-alpha.12", "sinon": "9.0.2", "testcafe": "1.19.0", "testcafe-browser-provider-browserstack": "1.14.0", @@ -107,7 +107,7 @@ ], "pnpm": { "patchedDependencies": { - "rrweb@2.0.0-alpha.11": "patches/rrweb@2.0.0-alpha.11.patch" + "rrweb@2.0.0-alpha.12": "patches/rrweb@2.0.0-alpha.12.patch" } } } diff --git a/patches/rrweb@2.0.0-alpha.12.patch b/patches/rrweb@2.0.0-alpha.12.patch new file mode 100644 index 000000000..485b5a3d0 --- /dev/null +++ b/patches/rrweb@2.0.0-alpha.12.patch @@ -0,0 +1,69 @@ +diff --git a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..45c0076c7c36c75861cfc4234839ea621514cdff 100644 +--- a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js ++++ b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +@@ -91,11 +91,21 @@ class CanvasManager { + let rafId; + const getCanvas = () => { + const matchedCanvas = []; +- win.document.querySelectorAll('canvas').forEach((canvas) => { +- if (!isBlocked(canvas, blockClass, blockSelector, true)) { +- matchedCanvas.push(canvas); +- } +- }); ++ const searchCanvas = (root) => { ++ root.querySelectorAll('canvas').forEach((canvas) => { ++ if (!isBlocked(canvas, blockClass, blockSelector, true)) { ++ matchedCanvas.push(canvas); ++ } ++ }); ++ root.querySelectorAll('*').forEach((elem) => { ++ if (elem.shadowRoot) { ++ searchCanvas(elem.shadowRoot); ++ } ++ }); ++ }; ++ ++ searchCanvas(win.document); ++ + return matchedCanvas; + }; + const takeCanvasSnapshots = (timestamp) => { +@@ -111,6 +121,12 @@ class CanvasManager { + const id = this.mirror.getId(canvas); + if (snapshotInProgressMap.get(id)) + return; ++ ++ // The browser throws if the canvas is 0 in size ++ // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0. ++ // Assuming the same happens with height ++ if (canvas.width === 0 || canvas.height === 0) return; ++ + snapshotInProgressMap.set(id, true); + if (['webgl', 'webgl2'].includes(canvas.__context)) { + const context = canvas.getContext(canvas.__context); +@@ -118,12 +134,20 @@ class CanvasManager { + context.clear(context.COLOR_BUFFER_BIT); + } + } +- const bitmap = yield createImageBitmap(canvas); +- worker.postMessage({ ++ ++ const width = canvas.clientWidth; ++ const height = canvas.clientHeight; ++ ++ const bitmap = yield createImageBitmap(canvas, { ++ resizeWidth: width, ++ resizeHeight: height ++ }) ++ ++ worker.postMessage({ + id, + bitmap, +- width: canvas.width, +- height: canvas.height, ++ width: width, ++ height: height, + dataURLOptions: options.dataURLOptions, + }, [bitmap]); + })); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac11bc352..2570b0300 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,9 +5,9 @@ settings: excludeLinksFromLockfile: false patchedDependencies: - rrweb@2.0.0-alpha.11: - hash: ldhsspyvwscjgedotm5w5frkg4 - path: patches/rrweb@2.0.0-alpha.11.patch + rrweb@2.0.0-alpha.12: + hash: 4v4svmdpv3y774u35bgut7mqzy + path: patches/rrweb@2.0.0-alpha.12.patch dependencies: fflate: @@ -49,8 +49,8 @@ devDependencies: specifier: ^11.1.6 version: 11.1.6(rollup@4.9.6)(tslib@2.5.0)(typescript@4.9.5) '@rrweb/types': - specifier: 2.0.0-alpha.11 - version: 2.0.0-alpha.11 + specifier: 2.0.0-alpha.12 + version: 2.0.0-alpha.12 '@sentry/types': specifier: 7.37.2 version: 7.37.2 @@ -169,11 +169,11 @@ devDependencies: specifier: ^5.12.0 version: 5.12.0(rollup@4.9.6) rrweb: - specifier: 2.0.0-alpha.11 - version: 2.0.0-alpha.11(patch_hash=ldhsspyvwscjgedotm5w5frkg4) + specifier: 2.0.0-alpha.12 + version: 2.0.0-alpha.12(patch_hash=4v4svmdpv3y774u35bgut7mqzy) rrweb-snapshot: - specifier: 2.0.0-alpha.11 - version: 2.0.0-alpha.11 + specifier: 2.0.0-alpha.12 + version: 2.0.0-alpha.12 sinon: specifier: 9.0.2 version: 9.0.2 @@ -2649,10 +2649,10 @@ packages: dev: true optional: true - /@rrweb/types@2.0.0-alpha.11: - resolution: {integrity: sha512-8ccocIkT5J/bfNRQY85qR/g6p5YQFpgFO2cMt4+Ex7w31Lq0yqZBRaoYEsawQKpLrn5KOHkdn2UTUrna7WMQuA==} + /@rrweb/types@2.0.0-alpha.12: + resolution: {integrity: sha512-dHFMvVBA9JD8MBV+waHtJs8lIeTPCVeT3h+WZ5s8a+EX42TQ08t+ObFMK0OYEszvWgJMJ5WZi5lXTvF46P27Hg==} dependencies: - rrweb-snapshot: 2.0.0-alpha.11 + rrweb-snapshot: 2.0.0-alpha.12 dev: true /@sentry/types@7.37.2: @@ -9184,27 +9184,27 @@ packages: fsevents: 2.3.3 dev: true - /rrdom@2.0.0-alpha.11: - resolution: {integrity: sha512-U37m0t4jTz63wnVRcOQ5qFzSTrI5RdNgeXnHAha2Fmh9+1K+XuCx421a8D1wZk3WcDc2sFz/04FVdM0OD2caHg==} + /rrdom@2.0.0-alpha.12: + resolution: {integrity: sha512-xdl51tE/ruN+zO0iEalEyyaQtbb4lb2HLULA6ug/zyApQjIVevaDc3BJnyXbDhd0eYgY9flBXTZ2gM64htUwHQ==} dependencies: - rrweb-snapshot: 2.0.0-alpha.11 + rrweb-snapshot: 2.0.0-alpha.12 dev: true - /rrweb-snapshot@2.0.0-alpha.11: - resolution: {integrity: sha512-N0dzeJA2VhrlSOadkKwCVmV/DuNOwBH+Lhx89hAf9PQK4lCS8AP4AaylhqUdZOYHqwVjqsYel/uZ4hN79vuLhw==} + /rrweb-snapshot@2.0.0-alpha.12: + resolution: {integrity: sha512-i4sz9469dbsEGFiBzCkq+7I7M+imPeC3NrKgrrdJ2tXu9H+/eegNe4SrQgCsLBeSZHZDHU0o9L5rxTAiapWbGg==} dev: true - /rrweb@2.0.0-alpha.11(patch_hash=ldhsspyvwscjgedotm5w5frkg4): - resolution: {integrity: sha512-vJ2gNvF+pUG9C2aaau7iSNqhWBSc4BwtUO4FpegOtDObuH4PIaxNJOlgHz82+WxKr9XPm93ER0LqmNpy0KYdKg==} + /rrweb@2.0.0-alpha.12(patch_hash=4v4svmdpv3y774u35bgut7mqzy): + resolution: {integrity: sha512-lUGwBV7gmbwz1dIgzo9EEayIVyxoTIF6NBF6+Jctqs4Uy45QkyARtikpQlCUfxVCGTCQ0FOee9jeVYsG39oq1g==} dependencies: - '@rrweb/types': 2.0.0-alpha.11 + '@rrweb/types': 2.0.0-alpha.12 '@types/css-font-loading-module': 0.0.7 '@xstate/fsm': 1.5.2 base64-arraybuffer: 1.0.2 fflate: 0.4.8 mitt: 3.0.0 - rrdom: 2.0.0-alpha.11 - rrweb-snapshot: 2.0.0-alpha.11 + rrdom: 2.0.0-alpha.12 + rrweb-snapshot: 2.0.0-alpha.12 dev: true patched: true From 9811328f12da89f58dee2ef5792fb2061a182017 Mon Sep 17 00:00:00 2001 From: David Newell Date: Fri, 5 Apr 2024 09:20:25 +0100 Subject: [PATCH 2/4] fix indentation --- patches/rrweb@2.0.0-alpha.12.patch | 5 ++--- pnpm-lock.yaml | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/patches/rrweb@2.0.0-alpha.12.patch b/patches/rrweb@2.0.0-alpha.12.patch index 485b5a3d0..1736296be 100644 --- a/patches/rrweb@2.0.0-alpha.12.patch +++ b/patches/rrweb@2.0.0-alpha.12.patch @@ -1,5 +1,5 @@ diff --git a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js -index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..45c0076c7c36c75861cfc4234839ea621514cdff 100644 +index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..d4a23978d4d6ee5d060c281e1cc8459b2a76885c 100644 --- a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +++ b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js @@ -91,11 +91,21 @@ class CanvasManager { @@ -47,7 +47,6 @@ index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..45c0076c7c36c75861cfc4234839ea62 } } - const bitmap = yield createImageBitmap(canvas); -- worker.postMessage({ + + const width = canvas.clientWidth; + const height = canvas.clientHeight; @@ -57,7 +56,7 @@ index 8746997c9b849ac5c952fdbe0a8dd608d6680a3a..45c0076c7c36c75861cfc4234839ea62 + resizeHeight: height + }) + -+ worker.postMessage({ + worker.postMessage({ id, bitmap, - width: canvas.width, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2570b0300..c8ecdfbb5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,7 +6,7 @@ settings: patchedDependencies: rrweb@2.0.0-alpha.12: - hash: 4v4svmdpv3y774u35bgut7mqzy + hash: nyylzlnsejqdkzdjaj3uehgqdm path: patches/rrweb@2.0.0-alpha.12.patch dependencies: @@ -170,7 +170,7 @@ devDependencies: version: 5.12.0(rollup@4.9.6) rrweb: specifier: 2.0.0-alpha.12 - version: 2.0.0-alpha.12(patch_hash=4v4svmdpv3y774u35bgut7mqzy) + version: 2.0.0-alpha.12(patch_hash=nyylzlnsejqdkzdjaj3uehgqdm) rrweb-snapshot: specifier: 2.0.0-alpha.12 version: 2.0.0-alpha.12 @@ -9194,7 +9194,7 @@ packages: resolution: {integrity: sha512-i4sz9469dbsEGFiBzCkq+7I7M+imPeC3NrKgrrdJ2tXu9H+/eegNe4SrQgCsLBeSZHZDHU0o9L5rxTAiapWbGg==} dev: true - /rrweb@2.0.0-alpha.12(patch_hash=4v4svmdpv3y774u35bgut7mqzy): + /rrweb@2.0.0-alpha.12(patch_hash=nyylzlnsejqdkzdjaj3uehgqdm): resolution: {integrity: sha512-lUGwBV7gmbwz1dIgzo9EEayIVyxoTIF6NBF6+Jctqs4Uy45QkyARtikpQlCUfxVCGTCQ0FOee9jeVYsG39oq1g==} dependencies: '@rrweb/types': 2.0.0-alpha.12 From 6794f3e14c90f2367fb303e5831b88a78f680b43 Mon Sep 17 00:00:00 2001 From: David Newell Date: Fri, 5 Apr 2024 16:11:57 +0100 Subject: [PATCH 3/4] Trigger Build From a17d5eeac215177f6d4176ce315371dba82a5256 Mon Sep 17 00:00:00 2001 From: David Newell Date: Fri, 5 Apr 2024 19:09:04 +0100 Subject: [PATCH 4/4] fix typing error --- src/extensions/replay/sessionrecording.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/extensions/replay/sessionrecording.ts b/src/extensions/replay/sessionrecording.ts index 5feea6f14..117b2d947 100644 --- a/src/extensions/replay/sessionrecording.ts +++ b/src/extensions/replay/sessionrecording.ts @@ -459,7 +459,10 @@ export class SessionRecording { } private _isInteractiveEvent(event: eventWithTime) { - return event.type === INCREMENTAL_SNAPSHOT_EVENT_TYPE && ACTIVE_SOURCES.indexOf(event.data?.source) !== -1 + return ( + event.type === INCREMENTAL_SNAPSHOT_EVENT_TYPE && + ACTIVE_SOURCES.indexOf(event.data?.source as IncrementalSource) !== -1 + ) } private _updateWindowAndSessionIds(event: eventWithTime) {