feat: merge events

.changeset/shy-garlics-brush.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+feat: Add support for merging events, you can choose any time range in replay and generate a new clip of the rrweb events which can be played independently even if there are no fullsnapshots in this time range.

packages/rrweb/src/types.ts

@@ -5,6 +5,7 @@ import type {
   MaskInputFn,
   MaskTextFn,
 } from 'rrweb-snapshot';
+import { snapshot } from 'rrweb-snapshot';
 import type { IframeManager } from './record/iframe-manager';
 import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
@@ -224,3 +225,16 @@ export type CrossOriginIframeMessageEvent =
   MessageEvent<CrossOriginIframeMessageEventContent>;
 
 export type ErrorHandler = (error: unknown) => void | boolean;
+
+export type MergeOptions = {
+  // row events to deal with
+  events: eventWithTime[];
+  // options for take fullsnapshot, and mirror is required
+  snapshotOptions: Parameters<typeof snapshot>[1] & { mirror: Mirror };
+  // startTimeStamp to generate from
+  startTimeStamp: number;
+  // endTimeStamp to generate end, default: last timestamp in events
+  endTimeStamp?: number;
+  // replay iframe generated by Replayer, default .replayer-wrapper > iframe
+  iframe?: HTMLIFrameElement | null;
+};

packages/rrweb/src/utils.ts

@@ -9,11 +9,20 @@
   DeprecatedMirror,
   textMutation,
   IMirror,
+  serializedNodeWithId,
+  eventWithTime,
 } from '@rrweb/types';
-import type { Mirror, SlimDOMOptions } from 'rrweb-snapshot';
-import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
+import { EventType } from '@rrweb/types';
+import { Mirror, type SlimDOMOptions } from 'rrweb-snapshot';
+import {
+  isShadowRoot,
+  IGNORED_NODE,
+  classMatchesRegex,
+  snapshot,
+} from 'rrweb-snapshot';
 import { RRNode, RRIFrameElement, BaseRRNode } from 'rrdom';
 import dom from '@rrweb/utils';
+import type { MergeOptions } from './types';
 
 export function on(
   type: string,
@@ -32,7 +41,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -116,7 +125,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -129,7 +138,7 @@
 
 // copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
 export function patch(
   source: { [key: string]: any },
   name: string,
   replacement: (...args: unknown[]) => unknown,
 ): () => void {
@@ -586,3 +595,94 @@
   if (!doc) return false;
   return dom.contains(doc, n) || shadowHostInDom(n);
 }
+
+/**
+ * You can choose any time range in Replay and generate a new clip of the rrweb events
+ * which can be played independently EVEN IF there are no fullsnapshots in this time range.
+ * @param options - merge options
+ * @returns merged events which can be played independently
+ */
+export function mergeEvents(options: MergeOptions) {
+  const { events, startTimeStamp, endTimeStamp, snapshotOptions } = options;
+
+  // check events
+  if (!events || !Array.isArray(events) || !events.length) {
+    console.warn('row events is required and not empty.');
+    return;
+  }
+
+  // check mirror
+  if (!snapshotOptions?.mirror) {
+    console.warn('mirror in snapshotOptions is required.');
+    return;
+  }
+
+  // check iframe
+  let iframe = options.iframe;
+  if (!iframe) {
+    const wrapper = document.querySelector('.replayer-wrapper');
+    if (wrapper) {
+      iframe = wrapper.querySelector('iframe');
+    }
+  }
+  if (!iframe) {
+    console.warn('iframe created by Replayer not found.');
+    return;
+  }
+  const doc = iframe.contentDocument;
+  const win = iframe.contentWindow;
+  if (!doc || !win) {
+    console.warn('contentDocument or contentWindow in iframe not found.');
+    return;
+  }
+
+  // take the fullsnapshot with the snapshotOptions
+  let node: serializedNodeWithId | null;
+  try {
+    // TODO iframe onSerialize, onIframeLoad, onStylesheetLoad, keepIframeSrcFn
+    node = snapshot(doc, snapshotOptions);
+  } catch (error) {
+    console.warn(error);
+    return;
+  }
+
+  const result: eventWithTime[] = [];
+  let lastMeta: eventWithTime | undefined;
+
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    // record the last meta event
+    if (event.type === EventType.Meta) {
+      lastMeta = event;
+    }
+    if (event.timestamp < startTimeStamp) {
+      continue;
+    } else if (endTimeStamp && event.timestamp > endTimeStamp) {
+      break;
+    } else {
+      if (!result.length) {
+        if (!lastMeta) {
+          console.warn('Meta event not found in events');
+          return;
+        }
+        // append meta event
+        result.push({
+          ...lastMeta,
+          timestamp: event.timestamp - 2,
+        });
+        // append fullsnapshot event
+        result.push({
+          type: EventType.FullSnapshot,
+          data: {
+            node,
+            initialOffset: getWindowScroll(win),
+          },
+          timestamp: event.timestamp - 1,
+        } as eventWithTime);
+      }
+      // append remains event
+      result.push(event);
+    }
+  }
+  return result;
+}