From 4b12f76bc4cf500fab11ec13bc694fb35cbeaa72 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Fri, 19 Jan 2024 13:41:19 +0000 Subject: [PATCH] feat: patch canvas export into rrweb (#19861) * feat: patch canvas export into rrweb * like that? * like that? --- package.json | 7 ++- patches/rrweb@2.0.0-alpha.11.patch | 87 ++++++++++++++++++++++++++++++ pnpm-lock.yaml | 14 +++-- production.Dockerfile | 1 + 4 files changed, 103 insertions(+), 6 deletions(-) create mode 100644 patches/rrweb@2.0.0-alpha.11.patch diff --git a/package.json b/package.json index f860db3fd69..f62adc0daa2 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@posthog/icons": "0.4.17", "@posthog/plugin-scaffold": "^1.4.4", "@react-hook/size": "^2.1.2", - "@rrweb/types": "^2.0.0-alpha.11", + "@rrweb/types": "2.0.0-alpha.11", "@sentry/react": "7.22.0", "@tailwindcss/container-queries": "^0.1.1", "@testing-library/dom": ">=7.21.4", @@ -168,7 +168,7 @@ "react-virtualized": "^9.22.5", "require-from-string": "^2.0.2", "resize-observer-polyfill": "^1.5.1", - "rrweb": "^2.0.0-alpha.11", + "rrweb": "2.0.0-alpha.11", "sass": "^1.26.2", "tailwindcss": "^3.4.0", "use-debounce": "^9.0.3", @@ -304,6 +304,9 @@ "pnpm": { "overrides": { "playwright": "1.32.2" + }, + "patchedDependencies": { + "rrweb@2.0.0-alpha.11": "patches/rrweb@2.0.0-alpha.11.patch" } }, "lint-staged": { diff --git a/patches/rrweb@2.0.0-alpha.11.patch b/patches/rrweb@2.0.0-alpha.11.patch new file mode 100644 index 00000000000..b0ee5a1c2d0 --- /dev/null +++ b/patches/rrweb@2.0.0-alpha.11.patch @@ -0,0 +1,87 @@ +diff --git a/es/rrweb/packages/rrweb/src/replay/canvas/index.js b/es/rrweb/packages/rrweb/src/replay/canvas/index.js +index 47f3fe3e1aca7efe8cded4b0da8bb917317c485b..6ccda6ab9eff683d143ced68f7aea15d6fe4526f 100644 +--- a/es/rrweb/packages/rrweb/src/replay/canvas/index.js ++++ b/es/rrweb/packages/rrweb/src/replay/canvas/index.js +@@ -1,40 +1,47 @@ +-import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js'; +-import { CanvasContext } from '../../../../types/dist/types.js'; +-import webglMutation from './webgl.js'; +-import canvasMutation$1 from './2d.js'; ++import { __awaiter } from "./../../../../../ext/tslib/tslib.es6.js"; ++import { CanvasContext } from "../../../../types/dist/types.js"; ++import webglMutation from "./webgl.js"; ++import canvasMutation$1 from "./2d.js"; + +-function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }) { +- return __awaiter(this, void 0, void 0, function* () { +- try { +- const precomputedMutation = canvasEventMap.get(event) || mutation; +- const commands = 'commands' in precomputedMutation +- ? precomputedMutation.commands +- : [precomputedMutation]; +- if ([CanvasContext.WebGL, CanvasContext.WebGL2].includes(mutation.type)) { +- for (let i = 0; i < commands.length; i++) { +- const command = commands[i]; +- yield webglMutation({ +- mutation: command, +- type: mutation.type, +- target, +- imageMap, +- errorHandler, +- }); +- } +- return; +- } +- yield canvasMutation$1({ +- event, +- mutations: commands, +- target, +- imageMap, +- errorHandler, +- }); ++export function canvasMutation({ ++ event, ++ mutation, ++ target, ++ imageMap, ++ canvasEventMap, ++ errorHandler, ++}) { ++ return __awaiter(this, void 0, void 0, function* () { ++ try { ++ const precomputedMutation = canvasEventMap.get(event) || mutation; ++ const commands = ++ "commands" in precomputedMutation ++ ? precomputedMutation.commands ++ : [precomputedMutation]; ++ if ([CanvasContext.WebGL, CanvasContext.WebGL2].includes(mutation.type)) { ++ for (let i = 0; i < commands.length; i++) { ++ const command = commands[i]; ++ yield webglMutation({ ++ mutation: command, ++ type: mutation.type, ++ target, ++ imageMap, ++ errorHandler, ++ }); + } +- catch (error) { +- errorHandler(mutation, error); +- } +- }); ++ return; ++ } ++ yield canvasMutation$1({ ++ event, ++ mutations: commands, ++ target, ++ imageMap, ++ errorHandler, ++ }); ++ } catch (error) { ++ errorHandler(mutation, error); ++ } ++ }); + } + + export { canvasMutation as default }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3399b8efb1d..ed2aceecb7c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,11 @@ settings: overrides: playwright: 1.32.2 +patchedDependencies: + rrweb@2.0.0-alpha.11: + hash: wtihnhsbrvhsseahzoxzsqwdqu + path: patches/rrweb@2.0.0-alpha.11.patch + dependencies: '@ant-design/icons': specifier: ^4.7.0 @@ -48,7 +53,7 @@ dependencies: specifier: ^2.1.2 version: 2.1.2(react@18.2.0) '@rrweb/types': - specifier: ^2.0.0-alpha.11 + specifier: 2.0.0-alpha.11 version: 2.0.0-alpha.11 '@sentry/react': specifier: 7.22.0 @@ -321,8 +326,8 @@ dependencies: specifier: ^1.5.1 version: 1.5.1 rrweb: - specifier: ^2.0.0-alpha.11 - version: 2.0.0-alpha.11 + specifier: 2.0.0-alpha.11 + version: 2.0.0-alpha.11(patch_hash=wtihnhsbrvhsseahzoxzsqwdqu) sass: specifier: ^1.26.2 version: 1.56.0 @@ -18894,7 +18899,7 @@ packages: resolution: {integrity: sha512-N0dzeJA2VhrlSOadkKwCVmV/DuNOwBH+Lhx89hAf9PQK4lCS8AP4AaylhqUdZOYHqwVjqsYel/uZ4hN79vuLhw==} dev: false - /rrweb@2.0.0-alpha.11: + /rrweb@2.0.0-alpha.11(patch_hash=wtihnhsbrvhsseahzoxzsqwdqu): resolution: {integrity: sha512-vJ2gNvF+pUG9C2aaau7iSNqhWBSc4BwtUO4FpegOtDObuH4PIaxNJOlgHz82+WxKr9XPm93ER0LqmNpy0KYdKg==} dependencies: '@rrweb/types': 2.0.0-alpha.11 @@ -18906,6 +18911,7 @@ packages: rrdom: 2.0.0-alpha.11 rrweb-snapshot: 2.0.0-alpha.11 dev: false + patched: true /run-applescript@5.0.0: resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==} diff --git a/production.Dockerfile b/production.Dockerfile index 1853b8f113d..9b71e97f34b 100644 --- a/production.Dockerfile +++ b/production.Dockerfile @@ -26,6 +26,7 @@ WORKDIR /code SHELL ["/bin/bash", "-o", "pipefail", "-c"] COPY package.json pnpm-lock.yaml ./ +COPY patches/ patches/ RUN corepack enable && pnpm --version && \ mkdir /tmp/pnpm-store && \ pnpm install --frozen-lockfile --store-dir /tmp/pnpm-store --prod && \