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

Bringing back #8647 but it would be nice to test new versions of rrweb without having to bundle it with our replay SDK.

Author: billyvg

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(): void;
+  resetShadowRoots(): void;
 }
 
 export interface CanvasManagerOptions {

packages/replay-internal/src/util/createPerformanceEntries.ts

@@ -1,4 +1,4 @@
-import { record } from '@sentry-internal/rrweb';
+import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import { browserPerformanceTimeOrigin } from '@sentry/utils';
 
 import { WINDOW } from '../constants';
@@ -17,7 +17,7 @@ import type {
 // Map entryType -> function to normalize data for event
 const ENTRY_TYPES: Record<
   string,
-  (entry: AllPerformanceEntry) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
+  (entry: AllPerformanceEntry, mirror: Mirror) => null | ReplayPerformanceEntry<AllPerformanceEntryData>
 > = {
   // @ts-expect-error TODO: entry type does not fit the create* functions entry type
   resource: createResourceEntry,
@@ -56,27 +56,33 @@ interface LayoutShiftAttribution {
  * Handler creater for web vitals
  */
 export function webVitalHandler(
-  getter: (metric: Metric) => ReplayPerformanceEntry<AllPerformanceEntryData>,
+  getter: (metric: Metric, mirror: Mirror) => ReplayPerformanceEntry<AllPerformanceEntryData>,
   replay: ReplayContainer,
 ): (data: { metric: Metric }) => void {
-  return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric));
+  return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric, replay.getDomMirror()));
 }
 
 /**
  * Create replay performance entries from the browser performance entries.
  */
 export function createPerformanceEntries(
   entries: AllPerformanceEntry[],
+  mirror: Mirror,
 ): ReplayPerformanceEntry<AllPerformanceEntryData>[] {
-  return entries.map(createPerformanceEntry).filter(Boolean) as ReplayPerformanceEntry<AllPerformanceEntryData>[];
+  return entries
+    .map(entry => createPerformanceEntry(entry, mirror))
+    .filter(Boolean) as ReplayPerformanceEntry<AllPerformanceEntryData>[];
 }
 
-function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEntry<AllPerformanceEntryData> | null {
+function createPerformanceEntry(
+  entry: AllPerformanceEntry,
+  mirror: Mirror,
+): ReplayPerformanceEntry<AllPerformanceEntryData> | null {
   if (!ENTRY_TYPES[entry.entryType]) {
     return null;
   }
 
-  return ENTRY_TYPES[entry.entryType](entry);
+  return ENTRY_TYPES[entry.entryType](entry, mirror);
 }
 
 function getAbsoluteTime(time: number): number {
@@ -85,7 +91,7 @@ function getAbsoluteTime(time: number): number {
   return ((browserPerformanceTimeOrigin || WINDOW.performance.timeOrigin) + time) / 1000;
 }
 
-function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry<PaintData> {
+function createPaintEntry(entry: PerformancePaintTiming, _mirror: Mirror): ReplayPerformanceEntry<PaintData> {
   const { duration, entryType, name, startTime } = entry;
 
   const start = getAbsoluteTime(startTime);
@@ -98,7 +104,10 @@ function createPaintEntry(entry: PerformancePaintTiming): ReplayPerformanceEntry
   };
 }
 
-function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerformanceEntry<NavigationData> | null {
+function createNavigationEntry(
+  entry: PerformanceNavigationTiming,
+  _mirror: Mirror,
+): ReplayPerformanceEntry<NavigationData> | null {
   const {
     entryType,
     name,
@@ -145,6 +154,7 @@ function createNavigationEntry(entry: PerformanceNavigationTiming): ReplayPerfor
 
 function createResourceEntry(
   entry: ExperimentalPerformanceResourceTiming,
+  _mirror: Mirror,
 ): ReplayPerformanceEntry<ResourceData> | null {
   const {
     entryType,
@@ -180,38 +190,38 @@ function createResourceEntry(
 /**
  * Add a LCP event to the replay based on a LCP metric.
  */
-export function getLargestContentfulPaint(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
+export function getLargestContentfulPaint(metric: Metric, mirror: Mirror): ReplayPerformanceEntry<WebVitalData> {
   const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { element?: Node }) | undefined;
   const node = lastEntry ? lastEntry.element : undefined;
-  return getWebVital(metric, 'largest-contentful-paint', node);
+  return getWebVital(metric, 'largest-contentful-paint', node, mirror);
 }
 
 /**
  * Add a CLS event to the replay based on a CLS metric.
  */
-export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
+export function getCumulativeLayoutShift(metric: Metric, mirror: Mirror): ReplayPerformanceEntry<WebVitalData> {
   // get first node that shifts
   const firstEntry = metric.entries[0] as (PerformanceEntry & { sources?: LayoutShiftAttribution[] }) | undefined;
   const node = firstEntry ? (firstEntry.sources ? firstEntry.sources[0].node : undefined) : undefined;
-  return getWebVital(metric, 'cumulative-layout-shift', node);
+  return getWebVital(metric, 'cumulative-layout-shift', node, mirror);
 }
 
 /**
  * Add a FID event to the replay based on a FID metric.
  */
-export function getFirstInputDelay(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
+export function getFirstInputDelay(metric: Metric, mirror: Mirror): ReplayPerformanceEntry<WebVitalData> {
   const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined;
   const node = lastEntry ? lastEntry.target : undefined;
-  return getWebVital(metric, 'first-input-delay', node);
+  return getWebVital(metric, 'first-input-delay', node, mirror);
 }
 
 /**
  * Add an INP event to the replay based on an INP metric.
  */
-export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
+export function getInteractionToNextPaint(metric: Metric, mirror: Mirror): ReplayPerformanceEntry<WebVitalData> {
   const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined;
   const node = lastEntry ? lastEntry.target : undefined;
-  return getWebVital(metric, 'interaction-to-next-paint', node);
+  return getWebVital(metric, 'interaction-to-next-paint', node, mirror);
 }
 
 /**
@@ -221,6 +231,7 @@ export function getWebVital(
   metric: Metric,
   name: string,
   node: Node | undefined,
+  mirror: Mirror | undefined,
 ): ReplayPerformanceEntry<WebVitalData> {
   const value = metric.value;
   const rating = metric.rating;
@@ -236,7 +247,7 @@ export function getWebVital(
       value,
       size: value,
       rating,
-      nodeId: node ? record.mirror.getId(node) : undefined,
+      nodeId: node && mirror ? mirror.getId(node) : undefined,
     },
   };
 

packages/replay-internal/src/util/handleRecordingEmit.ts

@@ -32,7 +32,7 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
     hadFirstEvent = true;
 
     if (replay.clickDetector) {
-      updateClickDetectorForRecordingEvent(replay.clickDetector, event);
+      updateClickDetectorForRecordingEvent(replay.clickDetector, event, replay.getDomMirror());
     }
 
     // The handler returns `true` if we do not want to trigger debounced flush, `false` if we want to debounce flush.