From b265424f4949df6b831c52ef4473f68c400717f9 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 14:18:21 -0500 Subject: [PATCH 1/9] feat: Remove `getCanvasManager`, export `CanvasManager` class directly This simplifies the code a bit by exporting the CanvasManager directly. With [ReplayCanvas](https://github.com/getsentry/sentry-javascript/pull/10112), we can rely on it for complex setup, but keeps it simple for our users. --- packages/rrweb/src/index.ts | 4 ++- packages/rrweb/src/record/index.ts | 58 ++++++++---------------------- 2 files changed, 18 insertions(+), 44 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 3bdab596e8..6c8cd59c78 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -31,5 +31,7 @@ export { mirror, freezePage, addCustomEvent, - getCanvasManager, } from './record'; + +export {CanvasManager} from './record/observers/canvas/canvas-manager'; +export type {CanvasManagerConstructorOptions} from './record/observers/canvas/canvas-manager'; diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 359307ffc9..bcfad949af 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -3,7 +3,6 @@ import { MaskInputOptions, SlimDOMOptions, createMirror, - DataURLOptions, } from '@sentry-internal/rrweb-snapshot'; import { initObservers, mutationBuffers } from './observer'; import { @@ -41,7 +40,6 @@ import { ShadowDomManagerNoop, } from './shadow-dom-manager'; import { - CanvasManager, CanvasManagerConstructorOptions, CanvasManagerInterface, CanvasManagerNoop, @@ -340,6 +338,18 @@ function record( const canvasManager: CanvasManagerInterface = _getCanvasManager( getCanvasManager, { + mirror, + win: window, + mutationCb: (p: canvasMutationParam) => + wrappedEmit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.CanvasMutation, + ...p, + }, + }), + ), recordCanvas, blockClass, blockSelector, @@ -717,14 +727,6 @@ export function takeFullSnapshot(isCheckout?: boolean) { _takeFullSnapshot(isCheckout); } -function wrappedEmit(e: eventWithTime) { - if (!_wrappedEmit) { - return; - } - - _wrappedEmit(e); -} - // record.addCustomEvent is removed because Sentry Session Replay does not use it // record.freezePage is removed because Sentry Session Replay does not use it @@ -734,48 +736,18 @@ record.takeFullSnapshot = takeFullSnapshot; export default record; -type PrivateOptions = 'mutationCb' | 'win' | 'mirror'; -type PublicGetCanvasManagerOptions = Omit< - CanvasManagerConstructorOptions, - PrivateOptions ->; - -interface PrivateGetCanvasManagerOptions - extends PublicGetCanvasManagerOptions, - Pick {} - function _getCanvasManager( getCanvasManagerFn: | undefined - | ((options: PrivateGetCanvasManagerOptions) => CanvasManagerInterface), - options: PublicGetCanvasManagerOptions, + | ((options: Partial) => CanvasManagerInterface), + options: CanvasManagerConstructorOptions, ) { try { return getCanvasManagerFn - ? getCanvasManagerFn({ - ...options, - mirror, - win: window, - mutationCb: (p: canvasMutationParam) => - wrappedEmit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.CanvasMutation, - ...p, - }, - }), - ), - }) + ? getCanvasManagerFn(options) : new CanvasManagerNoop(); } catch { console.warn('Unable to initialize CanvasManager'); return new CanvasManagerNoop(); } } - -export function getCanvasManager( - options: PublicGetCanvasManagerOptions, -): CanvasManagerInterface { - return new CanvasManager(options as CanvasManagerConstructorOptions); -} From 01b2ba051b7c68dfe8d42ae19bf7622ef734ada9 Mon Sep 17 00:00:00 2001 From: billyvg Date: Tue, 9 Jan 2024 19:19:24 +0000 Subject: [PATCH 2/9] Apply formatting changes --- packages/rrweb/src/index.ts | 13 ++++--------- packages/rrweb/src/record/index.ts | 4 +++- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 6c8cd59c78..0594fb6256 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -26,12 +26,7 @@ export { record, Replayer, utils, canvasMutation }; export { deserializeArg } from './replay/canvas/deserialize-args'; -export { - takeFullSnapshot, - mirror, - freezePage, - addCustomEvent, -} from './record'; - -export {CanvasManager} from './record/observers/canvas/canvas-manager'; -export type {CanvasManagerConstructorOptions} from './record/observers/canvas/canvas-manager'; +export { takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; + +export { CanvasManager } from './record/observers/canvas/canvas-manager'; +export type { CanvasManagerConstructorOptions } from './record/observers/canvas/canvas-manager'; diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index bcfad949af..16b3a89dd9 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -739,7 +739,9 @@ export default record; function _getCanvasManager( getCanvasManagerFn: | undefined - | ((options: Partial) => CanvasManagerInterface), + | (( + options: Partial, + ) => CanvasManagerInterface), options: CanvasManagerConstructorOptions, ) { try { From 5bb188db7ab54afe25e7e330290d3245d3547d00 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 14:18:21 -0500 Subject: [PATCH 3/9] feat: Remove `getCanvasManager`, export `CanvasManager` class directly This simplifies the code a bit by exporting the CanvasManager directly. With [ReplayCanvas](https://github.com/getsentry/sentry-javascript/pull/10112), we can rely on it for complex setup, but keeps it simple for our users. --- packages/rrweb/src/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 0594fb6256..4984d36ed1 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -26,7 +26,12 @@ export { record, Replayer, utils, canvasMutation }; export { deserializeArg } from './replay/canvas/deserialize-args'; -export { takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; +export { + takeFullSnapshot, + mirror, + freezePage, + addCustomEvent, +} from './record'; export { CanvasManager } from './record/observers/canvas/canvas-manager'; export type { CanvasManagerConstructorOptions } from './record/observers/canvas/canvas-manager'; From 7f5f7215e986b1c0385b6b2389cd86e1701c3186 Mon Sep 17 00:00:00 2001 From: billyvg Date: Tue, 9 Jan 2024 19:23:31 +0000 Subject: [PATCH 4/9] Apply formatting changes --- packages/rrweb/src/index.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 4984d36ed1..0594fb6256 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -26,12 +26,7 @@ export { record, Replayer, utils, canvasMutation }; export { deserializeArg } from './replay/canvas/deserialize-args'; -export { - takeFullSnapshot, - mirror, - freezePage, - addCustomEvent, -} from './record'; +export { takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; export { CanvasManager } from './record/observers/canvas/canvas-manager'; export type { CanvasManagerConstructorOptions } from './record/observers/canvas/canvas-manager'; From 9021d0d3e4882a02f017426989193494cd52aa84 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 14:24:01 -0500 Subject: [PATCH 5/9] fix formatting From 00e051f2745ce53cc3fbc88cc85d55b14530be80 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 17:31:03 -0500 Subject: [PATCH 6/9] update tests and ci --- .size-limit.js | 4 ++-- packages/rrweb/test/record/webgl.test.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 4ae0dc49d8..164b3cc3d0 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -7,9 +7,9 @@ module.exports = [ gzip: true }, { - name: 'rrweb - record & getCanvasManager only (gzipped)', + name: 'rrweb - record & CanvasManager only (gzipped)', path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js', - import: '{ record, getCanvasManager }', + import: '{ record, CanvasManager }', gzip: true }, { diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts index d189e74256..308d3448c8 100644 --- a/packages/rrweb/test/record/webgl.test.ts +++ b/packages/rrweb/test/record/webgl.test.ts @@ -66,10 +66,10 @@ const setup = function ( ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text())); await ctx.page.evaluate((canvasSample) => { - const { record, getCanvasManager } = (window as unknown as IWindow).rrweb; + const { record, CanvasManager } = (window as unknown as IWindow).rrweb; record({ recordCanvas: true, - getCanvasManager, + getCanvasManager: (options) => new CanvasManager(options), sampling: { canvas: canvasSample, }, From 5fbccd8e1e7767862e7e8eec75b7e2af053ee4a9 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 18:27:30 -0500 Subject: [PATCH 7/9] fix tests --- packages/rrweb/src/index.ts | 6 ++---- packages/rrweb/src/record/index.ts | 4 ++++ packages/rrweb/src/types.ts | 5 +---- packages/rrweb/test/record/cross-origin-iframes.test.ts | 8 ++++---- packages/rrweb/test/record/webgl.test.ts | 4 ++-- packages/rrweb/test/utils.ts | 2 +- 6 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index 0594fb6256..e530af4413 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -26,7 +26,5 @@ export { record, Replayer, utils, canvasMutation }; export { deserializeArg } from './replay/canvas/deserialize-args'; -export { takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; - -export { CanvasManager } from './record/observers/canvas/canvas-manager'; -export type { CanvasManagerConstructorOptions } from './record/observers/canvas/canvas-manager'; +export { CanvasManager, takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; +export type { CanvasManagerConstructorOptions } from './record'; diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 16b3a89dd9..292b14333b 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -40,6 +40,7 @@ import { ShadowDomManagerNoop, } from './shadow-dom-manager'; import { + CanvasManager, CanvasManagerConstructorOptions, CanvasManagerInterface, CanvasManagerNoop, @@ -51,6 +52,7 @@ import { registerErrorHandler, unregisterErrorHandler, } from './error-handler'; +export type {CanvasManagerConstructorOptions} from './observers/canvas/canvas-manager'; function wrapEvent(e: event): eventWithTime { const eWithTime = e as eventWithTime; @@ -753,3 +755,5 @@ function _getCanvasManager( return new CanvasManagerNoop(); } } + +export {CanvasManager}; diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index fad5a2b77b..f13f200e57 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -84,10 +84,7 @@ export type recordOptions = { errorHandler?: ErrorHandler; onMutation?: (mutations: MutationRecord[]) => boolean; getCanvasManager?: ( - options: Omit< - CanvasManagerConstructorOptions, - 'mutationCb' | 'win' | 'mirror' - >, + options: CanvasManagerConstructorOptions ) => CanvasManagerInterface; }; diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts index c48bd78368..1dba0cad98 100644 --- a/packages/rrweb/test/record/cross-origin-iframes.test.ts +++ b/packages/rrweb/test/record/cross-origin-iframes.test.ts @@ -17,7 +17,7 @@ import { } from '../utils'; import { unpack } from '../../src/packer/unpack'; import type * as http from 'http'; -import type { CanvasManagerInterface } from '../../src/record/observers/canvas/canvas-manager'; +import type { CanvasManager } from '../../src/record/observers/canvas/canvas-manager'; interface ISuite { code: string; @@ -35,7 +35,7 @@ interface IWindow extends Window { ) => listenerHandler | undefined; addCustomEvent(tag: string, payload: T): void; pack: (e: eventWithTime) => string; - getCanvasManager: () => CanvasManagerInterface; + CanvasManager: typeof CanvasManager; }; emit: (e: eventWithTime) => undefined; snapshots: eventWithTime[]; @@ -54,12 +54,12 @@ async function injectRecordScript( options = options || {}; await frame.evaluate((options) => { (window as unknown as IWindow).snapshots = []; - const { record, pack, getCanvasManager } = (window as unknown as IWindow) + const { record, pack, CanvasManager } = (window as unknown as IWindow) .rrweb; const config: recordOptions = { recordCrossOriginIframes: true, recordCanvas: true, - getCanvasManager, + getCanvasManager: (options) => new CanvasManager(options), emit(event) { (window as unknown as IWindow).snapshots.push(event); (window as unknown as IWindow).emit(event); diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts index 308d3448c8..1688cd6ecb 100644 --- a/packages/rrweb/test/record/webgl.test.ts +++ b/packages/rrweb/test/record/webgl.test.ts @@ -16,7 +16,7 @@ import { waitForRAF, } from '../utils'; import type { ICanvas } from '@sentry-internal/rrweb-snapshot'; -import type { CanvasManagerInterface } from '../../src/record/observers/canvas/canvas-manager'; +import type { CanvasManager } from '../../src/record/observers/canvas/canvas-manager'; interface ISuite { code: string; @@ -31,7 +31,7 @@ interface IWindow extends Window { options: recordOptions, ) => listenerHandler | undefined; addCustomEvent(tag: string, payload: T): void; - getCanvasManager: () => CanvasManagerInterface; + CanvasManager: typeof CanvasManager; }; emit: (e: eventWithTime) => undefined; } diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index 28e965834c..f52ef8e9f0 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -712,7 +712,7 @@ export function generateRecordSnippet(options: recordOptions) { inlineImages: ${options.inlineImages}, plugins: ${options.plugins}, getCanvasManager: ${ - options.recordCanvas ? 'rrweb.getCanvasManager' : 'undefined' + options.recordCanvas ? '(opts) => new rrweb.CanvasManager(opts)' : 'undefined' } }); `; From a78214b02c921a8206dfec10485aa0b4d368b163 Mon Sep 17 00:00:00 2001 From: billyvg Date: Tue, 9 Jan 2024 23:28:47 +0000 Subject: [PATCH 8/9] Apply formatting changes --- packages/rrweb/src/index.ts | 8 +++++++- packages/rrweb/src/record/index.ts | 4 ++-- packages/rrweb/src/types.ts | 2 +- packages/rrweb/test/utils.ts | 4 +++- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts index e530af4413..9c65c6cdd9 100644 --- a/packages/rrweb/src/index.ts +++ b/packages/rrweb/src/index.ts @@ -26,5 +26,11 @@ export { record, Replayer, utils, canvasMutation }; export { deserializeArg } from './replay/canvas/deserialize-args'; -export { CanvasManager, takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record'; +export { + CanvasManager, + takeFullSnapshot, + mirror, + freezePage, + addCustomEvent, +} from './record'; export type { CanvasManagerConstructorOptions } from './record'; diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index 292b14333b..10b2aa594c 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -52,7 +52,7 @@ import { registerErrorHandler, unregisterErrorHandler, } from './error-handler'; -export type {CanvasManagerConstructorOptions} from './observers/canvas/canvas-manager'; +export type { CanvasManagerConstructorOptions } from './observers/canvas/canvas-manager'; function wrapEvent(e: event): eventWithTime { const eWithTime = e as eventWithTime; @@ -756,4 +756,4 @@ function _getCanvasManager( } } -export {CanvasManager}; +export { CanvasManager }; diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts index f13f200e57..0eb4333199 100644 --- a/packages/rrweb/src/types.ts +++ b/packages/rrweb/src/types.ts @@ -84,7 +84,7 @@ export type recordOptions = { errorHandler?: ErrorHandler; onMutation?: (mutations: MutationRecord[]) => boolean; getCanvasManager?: ( - options: CanvasManagerConstructorOptions + options: CanvasManagerConstructorOptions, ) => CanvasManagerInterface; }; diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index f52ef8e9f0..7f406ad239 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -712,7 +712,9 @@ export function generateRecordSnippet(options: recordOptions) { inlineImages: ${options.inlineImages}, plugins: ${options.plugins}, getCanvasManager: ${ - options.recordCanvas ? '(opts) => new rrweb.CanvasManager(opts)' : 'undefined' + options.recordCanvas + ? '(opts) => new rrweb.CanvasManager(opts)' + : 'undefined' } }); `; From 7b6f100918ffd57d10a6732c13dcf488fbe70a36 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 9 Jan 2024 18:33:54 -0500 Subject: [PATCH 9/9] fix formatting