Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .size-limit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
{
Expand Down
3 changes: 2 additions & 1 deletion packages/rrweb/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ export { record, Replayer, utils, canvasMutation };
export { deserializeArg } from './replay/canvas/deserialize-args';

export {
CanvasManager,
takeFullSnapshot,
mirror,
freezePage,
addCustomEvent,
getCanvasManager,
} from './record';
export type { CanvasManagerConstructorOptions } from './record';
60 changes: 19 additions & 41 deletions packages/rrweb/src/record/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
MaskInputOptions,
SlimDOMOptions,
createMirror,
DataURLOptions,
} from '@sentry-internal/rrweb-snapshot';
import { initObservers, mutationBuffers } from './observer';
import {
Expand Down Expand Up @@ -53,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;
Expand Down Expand Up @@ -340,6 +340,18 @@ function record<T = eventWithTime>(
const canvasManager: CanvasManagerInterface = _getCanvasManager(
getCanvasManager,
{
mirror,
win: window,
mutationCb: (p: canvasMutationParam) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.CanvasMutation,
...p,
},
}),
),
recordCanvas,
blockClass,
blockSelector,
Expand Down Expand Up @@ -717,14 +729,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

Expand All @@ -734,48 +738,22 @@ record.takeFullSnapshot = takeFullSnapshot;

export default record;

type PrivateOptions = 'mutationCb' | 'win' | 'mirror';
type PublicGetCanvasManagerOptions = Omit<
CanvasManagerConstructorOptions,
PrivateOptions
>;

interface PrivateGetCanvasManagerOptions
extends PublicGetCanvasManagerOptions,
Pick<CanvasManagerConstructorOptions, PrivateOptions> {}

function _getCanvasManager(
getCanvasManagerFn:
| undefined
| ((options: PrivateGetCanvasManagerOptions) => CanvasManagerInterface),
options: PublicGetCanvasManagerOptions,
| ((
options: Partial<CanvasManagerConstructorOptions>,
) => 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);
}
export { CanvasManager };
5 changes: 1 addition & 4 deletions packages/rrweb/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,7 @@ export type recordOptions<T> = {
errorHandler?: ErrorHandler;
onMutation?: (mutations: MutationRecord[]) => boolean;
getCanvasManager?: (
options: Omit<
CanvasManagerConstructorOptions,
'mutationCb' | 'win' | 'mirror'
>,
options: CanvasManagerConstructorOptions,
) => CanvasManagerInterface;
};

Expand Down
8 changes: 4 additions & 4 deletions packages/rrweb/test/record/cross-origin-iframes.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -35,7 +35,7 @@ interface IWindow extends Window {
) => listenerHandler | undefined;
addCustomEvent<T>(tag: string, payload: T): void;
pack: (e: eventWithTime) => string;
getCanvasManager: () => CanvasManagerInterface;
CanvasManager: typeof CanvasManager;
};
emit: (e: eventWithTime) => undefined;
snapshots: eventWithTime[];
Expand All @@ -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<eventWithTime> = {
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);
Expand Down
8 changes: 4 additions & 4 deletions packages/rrweb/test/record/webgl.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -31,7 +31,7 @@ interface IWindow extends Window {
options: recordOptions<eventWithTime>,
) => listenerHandler | undefined;
addCustomEvent<T>(tag: string, payload: T): void;
getCanvasManager: () => CanvasManagerInterface;
CanvasManager: typeof CanvasManager;
};
emit: (e: eventWithTime) => undefined;
}
Expand Down Expand Up @@ -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,
},
Expand Down
4 changes: 3 additions & 1 deletion packages/rrweb/test/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -712,7 +712,9 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
inlineImages: ${options.inlineImages},
plugins: ${options.plugins},
getCanvasManager: ${
options.recordCanvas ? 'rrweb.getCanvasManager' : 'undefined'
options.recordCanvas
? '(opts) => new rrweb.CanvasManager(opts)'
: 'undefined'
}
});
`;
Expand Down