feat(replay): Add option to pass in custom record fn

dev-packages/browser-integration-tests/suites/replay/canvas/manualSnapshot/template.html

@@ -13,7 +13,6 @@
  function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
- console.log('has canvas')
  const ctx = canvas.getContext("2d");
 
  ctx.fillRect(25, 25, 100, 100);

dev-packages/browser-integration-tests/suites/replay/canvas/records/template.html

@@ -13,7 +13,6 @@
  function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
- console.log('has canvas')
  const ctx = canvas.getContext("2d");
 
  ctx.fillRect(25, 25, 100, 100);

packages/replay-canvas/package.json

@@ -69,7 +69,7 @@
  "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
  "devDependencies": {
  "@babel/core": "^7.17.5",
- "@sentry-internal/rrweb": "2.15.0"
+ "@sentry-internal/rrweb": "2.20.0"
  },
  "dependencies": {
  "@sentry-internal/replay": "8.9.2",

packages/replay-internal/package.json

@@ -72,8 +72,8 @@
  "devDependencies": {
  "@babel/core": "^7.17.5",
  "@sentry-internal/replay-worker": "8.9.2",
- "@sentry-internal/rrweb": "2.15.0",
- "@sentry-internal/rrweb-snapshot": "2.15.0",
+ "@sentry-internal/rrweb": "2.20.0",
+ "@sentry-internal/rrweb-snapshot": "2.20.0",
  "fflate": "^0.8.1",
  "jest-matcher-utils": "^29.0.0",
  "jsdom-worker": "^0.2.1"

packages/replay-internal/src/coreHandlers/handleClick.ts

@@ -1,5 +1,6 @@
 import { setTimeout } from '@sentry-internal/browser-utils';
-import { IncrementalSource, MouseInteractions, record } from '@sentry-internal/rrweb';
+import { IncrementalSource, MouseInteractions } from '@sentry-internal/rrweb';
+import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb } from '@sentry/types';
 
 import { WINDOW } from '../constants';
@@ -309,7 +310,11 @@ function nowInSeconds(): number {
 }
 
 /** Update the click detector based on a recording event of rrweb. */
-export function updateClickDetectorForRecordingEvent(clickDetector: ReplayClickDetector, event: RecordingEvent): void {
+export function updateClickDetectorForRecordingEvent(
+ clickDetector: ReplayClickDetector,
+ event: RecordingEvent,
+ mirror: Mirror,
+): void {
  try {
  // note: We only consider incremental snapshots here
  // This means that any full snapshot is ignored for mutation detection - the reason is that we simply cannot know if a mutation happened here.
@@ -334,7 +339,7 @@ export function updateClickDetectorForRecordingEvent(clickDetector: ReplayClickD
 
  if (isIncrementalMouseInteraction(event)) {
  const { type, id } = event.data;
- const node = record.mirror.getNode(id);
+ const node = mirror.getNode(id);
 
  if (node instanceof HTMLElement && type === MouseInteractions.Click) {
  clickDetector.registerClick(node);

packages/replay-internal/src/coreHandlers/handleDom.ts

@@ -1,5 +1,4 @@
-import { record } from '@sentry-internal/rrweb';
-import type { serializedElementNodeWithId, serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';
+import type { Mirror, serializedElementNodeWithId, serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';
 import { NodeType } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb, HandlerDataDom } from '@sentry/types';
 import { htmlTreeAsString } from '@sentry/utils';
@@ -19,7 +18,7 @@ export const handleDomListener: (replay: ReplayContainer) => (handlerData: Handl
  return;
  }
 
- const result = handleDom(handlerData);
+ const result = handleDom(handlerData, replay.getDomMirror());
 
  if (!result) {
  return;
@@ -50,10 +49,10 @@ export const handleDomListener: (replay: ReplayContainer) => (handlerData: Handl
 };
 
 /** Get the base DOM breadcrumb. */
-export function getBaseDomBreadcrumb(target: Node | null, message: string): Breadcrumb {
- const nodeId = record.mirror.getId(target);
- const node = nodeId && record.mirror.getNode(nodeId);
- const meta = node && record.mirror.getMeta(node);
+export function getBaseDomBreadcrumb(target: Node | null, message: string, mirror: Mirror): Breadcrumb {
+ const nodeId = mirror.getId(target);
+ const node = nodeId && mirror.getNode(nodeId);
+ const meta = node && mirror.getMeta(node);
  const element = meta && isElement(meta) ? meta : null;
 
  return {
@@ -80,12 +79,12 @@ export function getBaseDomBreadcrumb(target: Node | null, message: string): Brea
  * An event handler to react to DOM events.
  * Exported for tests.
  */
-export function handleDom(handlerData: HandlerDataDom): Breadcrumb | null {
+export function handleDom(handlerData: HandlerDataDom, mirror: Mirror): Breadcrumb | null {
  const { target, message } = getDomTarget(handlerData);
 
  return createBreadcrumb({
  category: `ui.${handlerData.name}`,
- ...getBaseDomBreadcrumb(target, message),
+ ...getBaseDomBreadcrumb(target, message, mirror),
  });
 }
 

packages/replay-internal/src/coreHandlers/handleKeyboardEvent.ts

@@ -1,3 +1,4 @@
+import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import type { Breadcrumb } from '@sentry/types';
 import { htmlTreeAsString } from '@sentry/utils';
 
@@ -7,7 +8,7 @@ import { getBaseDomBreadcrumb } from './handleDom';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 
 /** Handle keyboard events & create breadcrumbs. */
-export function handleKeyboardEvent(replay: ReplayContainer, event: KeyboardEvent): void {
+export function handleKeyboardEvent(replay: ReplayContainer, event: KeyboardEvent, mirror: Mirror): void {
  if (!replay.isEnabled()) {
  return;
  }
@@ -17,7 +18,7 @@ export function handleKeyboardEvent(replay: ReplayContainer, event: KeyboardEven
  // session with a single "keydown" breadcrumb is created)
  replay.updateUserActivity();
 
- const breadcrumb = getKeyboardBreadcrumb(event);
+ const breadcrumb = getKeyboardBreadcrumb(event, mirror);
 
  if (!breadcrumb) {
  return;
@@ -27,7 +28,7 @@ export function handleKeyboardEvent(replay: ReplayContainer, event: KeyboardEven
 }
 
 /** exported only for tests */
-export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
+export function getKeyboardBreadcrumb(event: KeyboardEvent, mirror: Mirror): Breadcrumb | null {
  const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event;
 
  // never capture for input fields
@@ -46,7 +47,7 @@ export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null {
  }
 
  const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
- const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message);
+ const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message, mirror);
 
  return createBreadcrumb({
  category: 'ui.keyDown',

packages/replay-internal/src/replay.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import { EventType, record } from '@sentry-internal/rrweb';
+import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import {
  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
  captureException,
@@ -143,6 +144,13 @@ export class ReplayContainer implements ReplayContainerInterface {
  */
  private _hasInitializedCoreListeners: boolean;
 
+ /**
+ * The `record` function to use, defaults to package's `record()`, but we can
+ * opt to pass in a different version, i.e. if we wanted to test a different
+ * version.
+ */
+ private _recordFn: typeof record;
+
  /**
  * Function to stop recording
  */
@@ -212,13 +220,22 @@ export class ReplayContainer implements ReplayContainerInterface {
  if (slowClickConfig) {
  this.clickDetector = new ClickDetector(this, slowClickConfig);
  }
+
+ this._recordFn = options._experiments.recordFn || record;
  }
 
  /** Get the event context. */
  public getContext(): InternalEventContext {
  return this._context;
  }
 
+ /**
+ * Returns rrweb's mirror
+ */
+ public getDomMirror(): Mirror {
+ return this._recordFn.mirror;
+ }
+
  /** If recording is currently enabled. */
  public isEnabled(): boolean {
  return this._isEnabled;
@@ -368,7 +385,7 @@ export class ReplayContainer implements ReplayContainerInterface {
  try {
  const canvasOptions = this._canvas;
 
- this._stopRecording = record({
+ this._stopRecording = this._recordFn({
  ...this._recordingOptions,
  // When running in error sampling mode, we need to overwrite `checkoutEveryNms`
  // Without this, it would record forever, until an error happens, which we don't want
@@ -941,7 +958,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
  /** Ensure page remains active when a key is pressed. */
  private _handleKeyboardEvent: (event: KeyboardEvent) => void = (event: KeyboardEvent) => {
- handleKeyboardEvent(this, event);
+ handleKeyboardEvent(this, event, this.getDomMirror());
  };
 
  /**
@@ -1036,7 +1053,9 @@ export class ReplayContainer implements ReplayContainerInterface {
  * are included in the replay event before it is finished and sent to Sentry.
  */
  private _addPerformanceEntries(): Promise<Array<AddEventResult | null>> {
- const performanceEntries = createPerformanceEntries(this.performanceEntries).concat(this.replayPerformanceEntries);
+ const performanceEntries = createPerformanceEntries(this.performanceEntries, this.getDomMirror()).concat(
+ this.replayPerformanceEntries,
+ );
 
  this.performanceEntries = [];
  this.replayPerformanceEntries = [];

packages/replay-internal/src/types/replay.ts

@@ -1,3 +1,5 @@
+import type { record } from '@sentry-internal/rrweb';
+import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import type {
  Breadcrumb,
  ErrorEvent,
@@ -232,6 +234,7 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
  _experiments: Partial<{
  captureExceptions: boolean;
  traceInternals: boolean;
+ recordFn: typeof record;
  }>;
 }
 
@@ -465,6 +468,7 @@ export interface ReplayContainer {
  isPaused(): boolean;
  isRecordingCanvas(): boolean;
  getContext(): InternalEventContext;
+ getDomMirror(): Mirror;
  initializeSampling(): void;
  start(): void;
  stop(options?: { reason?: string; forceflush?: boolean }): Promise<void>;

packages/replay-internal/src/types/rrweb.ts

@@ -31,7 +31,7 @@ export type ReplayEventWithTime = {
 
 /**
  * This is a partial copy of rrweb's recording options which only contains the properties
- * we specifically us in the SDK. Users can specify additional properties, hence we add the
+ * we specifically use in the SDK. Users can specify additional properties, hence we add the
  * Record<string, unknown> union type.
  */
 export type RrwebRecordOptions = {
@@ -52,6 +52,9 @@ export interface CanvasManagerInterface {
  lock(): void;
  unlock(): void;
  snapshot(): void;
+ addWindow(win: typeof globalThis & Window): void;
+ addShadowRoot(shadowRoot: ShadowRoot): void;
+ resetShadowRoots(): void;
 }
 
 export interface CanvasManagerOptions {