8000 feat(replays): Add an SDK _experiments configuration flag to enable c… · adam187/sentry-javascript@b3f8d9b · GitHub
[go: up one dir, main page]
Skip to content

Commit b3f8d9b

Browse files
c298leebillyvg
c298lee
and
billyvg
authored
feat(replays): Add an SDK _experiments configuration flag to enable canvas recording (getsentry#9723)
SDK _experiments configuration flag to enable canvas recording. It allows snapshot canvas recording at 4fps. Closes https://github.com/getsentry/team-replay/issues/306 --------- Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>
1 parent 59d5554 commit b3f8d9b

File tree

3 files changed

+33
-1
lines changed

3 files changed

+33
-1
lines changed

‎packages/replay/src/replay.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,7 @@ export class ReplayContainer implements ReplayContainerInterface {
331331
*/
332332
public startRecording(): void {
333333
try {
334+
const canvas = this._options._experiments.canvas;
334335
this._stopRecording = record(< 10000 /span>{
335336
...this._recordingOptions,
336337
// When running in error sampling mode, we need to overwrite `checkoutEveryNms`
@@ -339,6 +340,12 @@ export class ReplayContainer implements ReplayContainerInterface {
339340
...(this.recordingMode === 'buffer' && { checkoutEveryNms: BUFFER_CHECKOUT_TIME }),
340341
emit: getHandleRecordingEmit(this),
341342
onMutation: this._onMutationHandler,
343+
...(canvas && {
344+
recordCanvas: true,
345+
sampling: { canvas: canvas.fps || 4 },
346+
dataURLOptions: { quality: canvas.quality || 0.6 },
347+
getCanvasManager: canvas.manager,
348+
}),
342349
});
343350
} catch (err) {
344351
this._handleException(err);

‎packages/replay/src/types/replay.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { SKIPPED, THROTTLED } from '../util/throttle';
1414
import type { AllPerformanceEntry, AllPerformanceEntryData, ReplayPerformanceEntry } from './performance';
1515
import type { ReplayFrameEvent } from './replayFrame';
1616
import type { ReplayNetworkRequestOrResponse } from './request';
17-
import type { ReplayEventWithTime, RrwebRecordOptions } from './rrweb';
17+
import type { CanvasManagerInterface, GetCanvasManagerOptions, ReplayEventWithTime, RrwebRecordOptions } from './rrweb';
1818

1919
export type RecordingEvent = ReplayFrameEvent | ReplayEventWithTime;
2020
export type RecordingOptions = RrwebRecordOptions;
@@ -232,6 +232,11 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
232232
_experiments: Partial<{
233233
captureExceptions: boolean;
234234
traceInternals: boolean;
235+
canvas: {
236+
fps?: number;
237+
quality?: number;
238+
manager: (options: GetCanvasManagerOptions) => CanvasManagerInterface;
239+
};
235240
}>;
236241
}
237242

‎packages/replay/src/types/rrweb.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,23 @@ export type RrwebRecordOptions = {
4444
blockSelector?: string;
4545
maskInputOptions?: Record<string, boolean>;
4646
} & Record<string, unknown>;
47+
48+
export interface CanvasManagerInterface {
49+
reset(): void;
50+
freeze(): void;
51+
unfreeze(): void;
52+
lock(): void;
53+
unlock(): void;
54+
}
55+
56+
export interface GetCanvasManagerOptions {
57+
recordCanvas: boolean;
58+
blockClass: string | RegExp;
59+
blockSelector: string | null;
60+
unblockSelector: string | null;
61+
sampling?: 'all' | number;
62+
dataURLOptions: Partial<{
63+
type: string;
64+
quality: number;
65+
}>;
66+
}

0 commit comments

Comments
 (0)
0