From d84fc57597d459905e1c7356718a274d8a7c231a Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 19 Dec 2023 13:30:26 +0100 Subject: [PATCH 1/3] feat: Bundle canvas worker manually --- packages/rrdom-nodejs/package.json | 1 - packages/rrdom-nodejs/rollup.config.js | 5 -- packages/rrdom-nodejs/tsconfig.json | 1 - packages/rrdom/package.json | 1 - packages/rrdom/rollup.config.js | 5 -- packages/rrdom/tsconfig.json | 1 - packages/rrweb-player/package.json | 1 - packages/rrweb-player/rollup.config.js | 4 - packages/rrweb-player/tsconfig.json | 1 - packages/rrweb-worker/.eslintrc.json | 7 ++ packages/rrweb-worker/.gitignore | 18 ++++ packages/rrweb-worker/package.json | 32 +++++++ packages/rrweb-worker/rollup.config.js | 83 +++++++++++++++++++ .../src/_image-bitmap-data-url-worker.ts} | 2 +- .../src/image-bitmap-data-url-worker.ts | 3 + packages/rrweb-worker/src/index.ts | 9 ++ packages/rrweb-worker/tsconfig.json | 24 ++++++ packages/rrweb-worker/tsconfig.types.json | 9 ++ packages/rrweb/package.json | 2 +- packages/rrweb/rollup.config.js | 9 -- .../record/observers/canvas/canvas-manager.ts | 38 +++++---- .../rrweb/src/record/workers/tsconfig.json | 7 -- .../rrweb/src/record/workers/workers.d.ts | 4 - packages/rrweb/tsconfig.json | 3 + tsconfig.json | 5 +- yarn.lock | 5 -- 26 files changed, 215 insertions(+), 65 deletions(-) create mode 100644 packages/rrweb-worker/.eslintrc.json create mode 100644 packages/rrweb-worker/.gitignore create mode 100644 packages/rrweb-worker/package.json create mode 100644 packages/rrweb-worker/rollup.config.js rename packages/{rrweb/src/record/workers/image-bitmap-data-url-worker.ts => rrweb-worker/src/_image-bitmap-data-url-worker.ts} (98%) create mode 100644 packages/rrweb-worker/src/image-bitmap-data-url-worker.ts create mode 100644 packages/rrweb-worker/src/index.ts create mode 100644 packages/rrweb-worker/tsconfig.json create mode 100644 packages/rrweb-worker/tsconfig.types.json delete mode 100644 packages/rrweb/src/record/workers/tsconfig.json delete mode 100644 packages/rrweb/src/record/workers/workers.d.ts diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index e99ed2de61..08169034ce 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -41,7 +41,6 @@ "rollup": "^2.56.3", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", - "rollup-plugin-web-worker-loader": "^1.6.1", "ts-jest": "^27.1.3" }, "dependencies": { diff --git a/packages/rrdom-nodejs/rollup.config.js b/packages/rrdom-nodejs/rollup.config.js index 233b0f1f3f..c105f87cb7 100644 --- a/packages/rrdom-nodejs/rollup.config.js +++ b/packages/rrdom-nodejs/rollup.config.js @@ -2,7 +2,6 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; import typescript from 'rollup-plugin-typescript2'; -import webWorkerLoader from 'rollup-plugin-web-worker-loader'; import pkg from './package.json'; function toMinPath(path) { @@ -12,10 +11,6 @@ function toMinPath(path) { const basePlugins = [ resolve({ browser: true }), commonjs(), - - // supports bundling `web-worker:..filename` from rrweb - webWorkerLoader(), - typescript({ tsconfigOverride: { compilerOptions: { module: 'ESNext' } }, }), diff --git a/packages/rrdom-nodejs/tsconfig.json b/packages/rrdom-nodejs/tsconfig.json index d8dee80523..e793668356 100644 --- a/packages/rrdom-nodejs/tsconfig.json +++ b/packages/rrdom-nodejs/tsconfig.json @@ -25,7 +25,6 @@ "include": [ "src", "test.d.ts", - "../rrweb/src/record/workers/workers.d.ts", "../rrweb/src/record/constructable-stylesheets.d.ts" ], "references": [ diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 5989eadc0a..da5345bf31 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -45,7 +45,6 @@ "rollup": "^2.56.3", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", - "rollup-plugin-web-worker-loader": "^1.6.1", "ts-jest": "^27.1.3" }, "dependencies": { diff --git a/packages/rrdom/rollup.config.js b/packages/rrdom/rollup.config.js index af7d6fa597..a4344a41b2 100644 --- a/packages/rrdom/rollup.config.js +++ b/packages/rrdom/rollup.config.js @@ -2,7 +2,6 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; import typescript from 'rollup-plugin-typescript2'; -import webWorkerLoader from 'rollup-plugin-web-worker-loader'; import pkg from './package.json'; function toMinPath(path) { @@ -12,10 +11,6 @@ function toMinPath(path) { const basePlugins = [ resolve({ browser: true }), commonjs(), - - // supports bundling `web-worker:..filename` from rrweb - webWorkerLoader(), - typescript({ tsconfigOverride: { compilerOptions: { module: 'ESNext' } }, }), diff --git a/packages/rrdom/tsconfig.json b/packages/rrdom/tsconfig.json index 72748793aa..f6198d9d58 100644 --- a/packages/rrdom/tsconfig.json +++ b/packages/rrdom/tsconfig.json @@ -32,7 +32,6 @@ ], "include": [ "src", - "../rrweb/src/record/workers/workers.d.ts", "../rrweb/src/record/constructable-stylesheets.d.ts" ] } diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index 7584b5f147..4f8d8c6683 100644 --- a/packages/rrweb-player/package.json +++ b/packages/rrweb-player/package.json @@ -15,7 +15,6 @@ "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", - "rollup-plugin-web-worker-loader": "^1.6.1", "sirv-cli": "^0.4.4", "svelte": "^3.59.2", "svelte-check": "^3.0.1", diff --git a/packages/rrweb-player/rollup.config.js b/packages/rrweb-player/rollup.config.js index 67aebc8052..e7f616953a 100644 --- a/packages/rrweb-player/rollup.config.js +++ b/packages/rrweb-player/rollup.config.js @@ -4,7 +4,6 @@ import commonjs from '@rollup/plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import sveltePreprocess from 'svelte-preprocess'; -import webWorkerLoader from 'rollup-plugin-web-worker-loader'; import typescript from 'rollup-plugin-typescript2'; import pkg from './package.json'; import css from 'rollup-plugin-css-only'; @@ -69,9 +68,6 @@ export default entries.map((output) => ({ commonjs(), - // supports bundling `web-worker:..filename` from rrweb - webWorkerLoader(), - typescript(), css({ diff --git a/packages/rrweb-player/tsconfig.json b/packages/rrweb-player/tsconfig.json index 4b7d4a575a..01ee276382 100644 --- a/packages/rrweb-player/tsconfig.json +++ b/packages/rrweb-player/tsconfig.json @@ -7,7 +7,6 @@ "node_modules/*", "__sapper__/*", "public/*", - "../rrweb/src/record/workers/workers.d.ts" ], "compilerOptions": { "composite": true diff --git a/packages/rrweb-worker/.eslintrc.json b/packages/rrweb-worker/.eslintrc.json new file mode 100644 index 0000000000..ebc4c1765e --- /dev/null +++ b/packages/rrweb-worker/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["../../.eslintrc.js"], + "rules": { + "prefer-template": "off", + "@typescript-eslint/restrict-plus-operands": "off" + } +} \ No newline at end of file diff --git a/packages/rrweb-worker/.gitignore b/packages/rrweb-worker/.gitignore new file mode 100644 index 0000000000..6c08e7579f --- /dev/null +++ b/packages/rrweb-worker/.gitignore @@ -0,0 +1,18 @@ +.vscode +.idea +node_modules +package-lock.json +# yarn.lock +*.tsbuildinfo +build +dist +es +lib +typings + +temp + +*.log + +.env +__diff_output__ \ No newline at end of file diff --git a/packages/rrweb-worker/package.json b/packages/rrweb-worker/package.json new file mode 100644 index 0000000000..47c4f310de --- /dev/null +++ b/packages/rrweb-worker/package.json @@ -0,0 +1,32 @@ +{ + "name": "@sentry-internal/rrweb-worker", + "version": "2.6.0", + "description": "Worker for rrweb", + "main": "lib/rrweb-worker/index.cjs", + "module": "es/rrweb-worker/index.js", + "types": "typings/index.d.ts", + "sideEffects": false, + "private": true, + "scripts": { + "dev": "yarn bundle --watch", + "build:tarball": "npm pack", + "bundle": "rollup --config", + "typings": "tsc -p tsconfig.types.json", + "prepare": "npm run typings && npm run bundle", + "check-types": "tsc -noEmit", + "lint": "yarn eslint src" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/getsentry/rrweb.git" + }, + "author": "Sentry", + "license": "MIT", + "bugs": { + "url": "https://github.com/getsentry/rrweb/issues" + }, + "dependencies": {}, + "engines": { + "node": ">=12" + } +} diff --git a/packages/rrweb-worker/rollup.config.js b/packages/rrweb-worker/rollup.config.js new file mode 100644 index 0000000000..23cd6d9659 --- /dev/null +++ b/packages/rrweb-worker/rollup.config.js @@ -0,0 +1,83 @@ +import commonjs from '@rollup/plugin-commonjs'; +import resolve from '@rollup/plugin-node-resolve'; +import typescript from 'rollup-plugin-typescript2'; +import { defineConfig } from 'rollup'; +import { terser } from 'rollup-plugin-terser'; + +const workerStrBaseConfig = { + input: ['./src/_image-bitmap-data-url-worker.ts'], + treeshake: 'smallest', + plugins: [ + commonjs(), + typescript({ + tsconfig: './tsconfig.json', + inlineSourceMap: false, + sourceMap: false, + inlineSources: false, + }), + resolve(), + terser({ + mangle: { + module: true, + }, + }), + { + name: 'worker-to-string', + renderChunk(code) { + return `export default \`${code}\`;`; + }, + }, + ], +}; + +const indexBaseConfig = { + input: ['./src/index.ts'], + treeshake: 'smallest', + external: ['./image-bitmap-data-url-worker'], + plugins: [ + typescript({ + tsconfig: './tsconfig.json', + inlineSourceMap: false, + sourceMap: false, + inlineSources: false, + }), + terser({ + mangle: { + module: true, + }, + }), + ], +}; + +const config = defineConfig([ + { + ...workerStrBaseConfig, + output: { + file: './es/rrweb-worker/image-bitmap-data-url-worker.js', + format: 'esm', + }, + }, + { + ...workerStrBaseConfig, + output: { + file: './lib/rrweb-worker/image-bitmap-data-url-worker.cjs', + format: 'cjs', + }, + }, + { + ...indexBaseConfig, + output: { + file: './es/rrweb-worker/index.js', + format: 'esm', + }, + }, + { + ...indexBaseConfig, + output: { + file: './lib/rrweb-worker/index.cjs', + format: 'cjs', + }, + }, +]); + +export default config; diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb-worker/src/_image-bitmap-data-url-worker.ts similarity index 98% rename from packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts rename to packages/rrweb-worker/src/_image-bitmap-data-url-worker.ts index 0d142409f4..dd55134a61 100644 --- a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts +++ b/packages/rrweb-worker/src/_image-bitmap-data-url-worker.ts @@ -28,7 +28,7 @@ async function getTransparentBlobFor( height: number, dataURLOptions: DataURLOptions, ): Promise { - const id = `${width}-${height}`; + const id = width + '-' + height; if ('OffscreenCanvas' in globalThis) { if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!; const offscreen = new OffscreenCanvas(width, height); diff --git a/packages/rrweb-worker/src/image-bitmap-data-url-worker.ts b/packages/rrweb-worker/src/image-bitmap-data-url-worker.ts new file mode 100644 index 0000000000..3c68a46455 --- /dev/null +++ b/packages/rrweb-worker/src/image-bitmap-data-url-worker.ts @@ -0,0 +1,3 @@ +// This is replaced at build-time with the content from _image-bitmap-data-url-worker.ts, wrapped as a string. +// This is just a placeholder so that types etc. are correct. +export default '' as string; diff --git a/packages/rrweb-worker/src/index.ts b/packages/rrweb-worker/src/index.ts new file mode 100644 index 0000000000..2c826aae5f --- /dev/null +++ b/packages/rrweb-worker/src/index.ts @@ -0,0 +1,9 @@ +import workerString from './image-bitmap-data-url-worker'; + +/** + * Get the URL for a web worker. + */ +export function getImageBitmapDataUrlWorkerURL(): string { + const workerBlob = new Blob([workerString]); + return URL.createObjectURL(workerBlob); +} diff --git a/packages/rrweb-worker/tsconfig.json b/packages/rrweb-worker/tsconfig.json new file mode 100644 index 0000000000..3415624dfa --- /dev/null +++ b/packages/rrweb-worker/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "ESNext", + "moduleResolution": "Node", + "target": "ES2020", + "noImplicitAny": true, + "strictNullChecks": true, + "removeComments": true, + "preserveConstEnums": true, + "rootDir": "src", + "outDir": "build", + "lib": ["webworker", "scripthost"], + "allowSyntheticDefaultImports": true, + "declarationMap": false, + "skipLibCheck": true, + "composite": true + }, + "references": [], + "exclude": [ + "test", + "scripts" + ], + "include": ["src/**/*.ts"] +} diff --git a/packages/rrweb-worker/tsconfig.types.json b/packages/rrweb-worker/tsconfig.types.json new file mode 100644 index 0000000000..e5934b355c --- /dev/null +++ b/packages/rrweb-worker/tsconfig.types.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/*.ts"], + "compilerOptions": { + "declarationMap": true, + "emitDeclarationOnly": true, + "outDir": "typings" + } +} diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index 20b3d45f6e..260890ac33 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -73,13 +73,13 @@ "rollup-plugin-postcss": "^3.1.1", "rollup-plugin-rename-node-modules": "^1.3.1", "rollup-plugin-typescript2": "^0.31.2", - "rollup-plugin-web-worker-loader": "^1.6.1", "simple-peer-light": "^9.10.0", "ts-jest": "^29.1.1", "ts-node": "^10.9.1", "tslib": "^2.3.1" }, "dependencies": { + "@sentry-internal/rrweb-worker": "2.6.0", "@sentry-internal/rrdom": "2.6.0", "@sentry-internal/rrweb-snapshot": "2.6.0", "@sentry-internal/rrweb-types": "2.6.0", diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js index 4afb1ace2f..2d510e9d40 100644 --- a/packages/rrweb/rollup.config.js +++ b/packages/rrweb/rollup.config.js @@ -3,7 +3,6 @@ import esbuild from 'rollup-plugin-esbuild'; import resolve from '@rollup/plugin-node-resolve'; import postcss from 'rollup-plugin-postcss'; import renameNodeModules from 'rollup-plugin-rename-node-modules'; -import webWorkerLoader from 'rollup-plugin-web-worker-loader'; import pkg from './package.json'; function toRecordPath(path) { @@ -122,11 +121,6 @@ function getPlugins(options = {}) { const { minify = false, sourceMap = false } = options; return [ resolve({ browser: true }), - webWorkerLoader({ - targetPlatform: 'browser', - inline: true, - sourceMap, - }), esbuild({ minify, }), @@ -143,9 +137,6 @@ for (const c of baseConfigs) { const basePlugins = [ resolve({ browser: true }), - // supports bundling `web-worker:..filename` - webWorkerLoader({ targetPlatform: 'browser' }), - typescript(), ]; const plugins = basePlugins.concat( diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index beea54b12f..4e4ece5349 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -12,14 +12,14 @@ import type { IWindow, listenerHandler, CanvasArg, + ImageBitmapDataURLWorkerResponse, } from '@sentry-internal/rrweb-types'; import { isBlocked } from '../../../utils'; import { CanvasContext } from '@sentry-internal/rrweb-types'; import initCanvas2DMutationObserver from './2d'; import initCanvasContextObserver from './canvas'; import initCanvasWebGLMutationObserver from './webgl'; -import ImageBitmapDataURLWorker from 'web-worker:../../workers/image-bitmap-data-url-worker.ts'; -import type { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker'; +import { getImageBitmapDataUrlWorkerURL } from '@sentry-internal/rrweb-worker'; export type RafStamps = { latestId: number; invokeId: number | null }; @@ -118,16 +118,20 @@ export class CanvasManager implements CanvasManagerInterface { unblockSelector, ); if (recordCanvas && typeof sampling === 'number') - this.initCanvasFPSObserver( - sampling, - win, - blockClass, - blockSelector, - unblockSelector, - { - dataURLOptions, - }, - ); + try { + this.initCanvasFPSObserver( + sampling, + win, + blockClass, + blockSelector, + unblockSelector, + { + dataURLOptions, + }, + ); + } catch { + // Error when initializing canvas... + } } private processMutation: canvasManagerMutationCallback = ( @@ -165,15 +169,15 @@ export class CanvasManager implements CanvasManagerInterface { true, ); const snapshotInProgressMap: Map = new Map(); - const worker = - new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker; + const worker = new Worker(getImageBitmapDataUrlWorkerURL()); worker.onmessage = (e) => { - const { id } = e.data; + const data = e.data as ImageBitmapDataURLWorkerResponse; + const { id } = data; snapshotInProgressMap.set(id, false); - if (!('base64' in e.data)) return; + if (!('base64' in data)) return; - const { base64, type, width, height } = e.data; + const { base64, type, width, height } = data; this.mutationCb({ id, type: CanvasContext['2D'], diff --git a/packages/rrweb/src/record/workers/tsconfig.json b/packages/rrweb/src/record/workers/tsconfig.json deleted file mode 100644 index cf0e05cb8e..0000000000 --- a/packages/rrweb/src/record/workers/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "compilerOptions": { - "lib": ["webworker"] - }, - "exclude": ["workers.d.ts"] -} diff --git a/packages/rrweb/src/record/workers/workers.d.ts b/packages/rrweb/src/record/workers/workers.d.ts deleted file mode 100644 index ead3d9e1f4..0000000000 --- a/packages/rrweb/src/record/workers/workers.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module 'web-worker:*' { - const WorkerFactory: new () => Worker; - export default WorkerFactory; -} diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json index 1fc592f072..c9952ae9b3 100644 --- a/packages/rrweb/tsconfig.json +++ b/packages/rrweb/tsconfig.json @@ -19,6 +19,9 @@ "composite": true }, "references": [ + { + "path": "../rrweb-worker" + }, { "path": "../rrdom" }, diff --git a/tsconfig.json b/tsconfig.json index 5334be81bb..7b3750d878 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,10 @@ }, { "path": "packages/web-extension" - } + }, + { + "path": "packages/rrweb-worker" + }, ], "files": [], "include": [], diff --git a/yarn.lock b/yarn.lock index 657b4a9523..d3169b9be2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12920,11 +12920,6 @@ rollup-plugin-typescript2@^0.31.2: resolve "^1.20.0" tslib "^2.3.1" -rollup-plugin-web-worker-loader@^1.6.1: - version "1.6.1" - resolved "https://registry.npmjs.org/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.6.1.tgz" - integrity sha512-4QywQSz1NXFHKdyiou16mH3ijpcfLtLGOrAqvAqu1Gx+P8+zj+3gwC2BSL/VW1d+LW4nIHC8F7d7OXhs9UdR2A== - rollup-pluginutils@^2.8.2: version "2.8.2" resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz" From e91a3ac2d1b18d98c32cd9a7381e26273ae647f9 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 19 Dec 2023 13:34:47 +0100 Subject: [PATCH 2/3] fix deps --- packages/rrweb-worker/package.json | 5 ++++- packages/rrweb-worker/tsconfig.json | 15 ++++++++++++--- yarn.lock | 7 ++++++- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/rrweb-worker/package.json b/packages/rrweb-worker/package.json index 47c4f310de..d0911b5fad 100644 --- a/packages/rrweb-worker/package.json +++ b/packages/rrweb-worker/package.json @@ -25,7 +25,10 @@ "bugs": { "url": "https://github.com/getsentry/rrweb/issues" }, - "dependencies": {}, + "dependencies": { + "@sentry-internal/rrweb-snapshot": "2.6.0", + "@sentry-internal/rrweb-types": "2.6.0" + }, "engines": { "node": ">=12" } diff --git a/packages/rrweb-worker/tsconfig.json b/packages/rrweb-worker/tsconfig.json index 3415624dfa..8ee262ad0c 100644 --- a/packages/rrweb-worker/tsconfig.json +++ b/packages/rrweb-worker/tsconfig.json @@ -9,16 +9,25 @@ "preserveConstEnums": true, "rootDir": "src", "outDir": "build", - "lib": ["webworker", "scripthost"], + "lib": [ + "webworker", + "scripthost" + ], "allowSyntheticDefaultImports": true, "declarationMap": false, "skipLibCheck": true, "composite": true }, - "references": [], + "references": [ + { + "path": "../rrweb-snapshot" + } + ], "exclude": [ "test", "scripts" ], - "include": ["src/**/*.ts"] + "include": [ + "src/**/*.ts" + ] } diff --git a/yarn.lock b/yarn.lock index d3169b9be2..085242fef7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5253,10 +5253,15 @@ csso@^4.0.2: dependencies: css-tree "^1.1.2" -cssom@^0.4.4, cssom@^0.5.0, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": +cssom@^0.4.4, "cssom@https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz": version "0.6.0" resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" +cssom@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" + integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw== + cssom@~0.3.6: version "0.3.8" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a" From 4571ff517d8bea487367d540c1c39dcddd52b0ab Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 20 Dec 2023 09:14:54 +0100 Subject: [PATCH 3/3] wrap in `callbackWrapper` --- .../record/observers/canvas/canvas-manager.ts | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index 4e4ece5349..e23f62979a 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -20,6 +20,7 @@ import initCanvas2DMutationObserver from './2d'; import initCanvasContextObserver from './canvas'; import initCanvasWebGLMutationObserver from './webgl'; import { getImageBitmapDataUrlWorkerURL } from '@sentry-internal/rrweb-worker'; +import { callbackWrapper } from '../../error-handler'; export type RafStamps = { latestId: number; invokeId: number | null }; @@ -110,15 +111,15 @@ export class CanvasManager implements CanvasManagerInterface { this.mutationCb = options.mutationCb; this.mirror = options.mirror; - if (recordCanvas && sampling === 'all') - this.initCanvasMutationObserver( - win, - blockClass, - blockSelector, - unblockSelector, - ); - if (recordCanvas && typeof sampling === 'number') - try { + callbackWrapper(() => { + if (recordCanvas && sampling === 'all') + this.initCanvasMutationObserver( + win, + blockClass, + blockSelector, + unblockSelector, + ); + if (recordCanvas && typeof sampling === 'number') this.initCanvasFPSObserver( sampling, win, @@ -129,9 +130,7 @@ export class CanvasManager implements CanvasManagerInterface { dataURLOptions, }, ); - } catch { - // Error when initializing canvas... - } + })(); } private processMutation: canvasManagerMutationCallback = (