@sailfish-ai/recorder 1.10.5 → 1.10.7

package/dist/recording.js

@@ -3,7 +3,8 @@ import { EventType } from "@sailfish-rrweb/types";
 import { Complete, DomContentEventId, DomContentSource, Loading, } from "./constants";
 import { getCallerLocation, getCallerLocationFromTrace, } from "./sourceLocation";
 import suppressConsoleLogsDuringCall from "./suppressConsoleLogsDuringCall";
-import { initializeWebSocket, sendEvent } from "./websocket";
+import { yieldToMain } from "./scheduler";
+import { getCachedHrefNoQuery, initializeWebSocket, sendEvent } from "./websocket";
 // Module-level reference to rrweb record, populated after dynamic import
 let _record = null;
 const MASK_CLASS = "sailfishSanitize";
@@ -82,13 +83,34 @@ function maskInputFn(text, node) {
     }
     return text;
 }
-export const getUrlAndStoredUuids = () => ({
-    page_visit_uuid: sessionStorage.getItem("pageVisitUUID"),
-    prev_page_visit_uuid: sessionStorage.getItem("prevPageVisitUUID"),
-    href: location.origin + location.pathname,
-    tabVisibilityChanged: sessionStorage.getItem("tabVisibilityChanged"),
-    tabVisibilityState: sessionStorage.getItem("tabVisibilityState"),
-});
+// Cached sessionStorage values — avoids per-call sessionStorage reads on the hot path
+let _ssCacheDirty = true;
+let _ssPageVisitUUID = null;
+let _ssPrevPageVisitUUID = null;
+let _ssTabVisibilityChanged = null;
+let _ssTabVisibilityState = null;
+function _refreshSessionStorageCache() {
+    _ssPageVisitUUID = sessionStorage.getItem("pageVisitUUID");
+    _ssPrevPageVisitUUID = sessionStorage.getItem("prevPageVisitUUID");
+    _ssTabVisibilityChanged = sessionStorage.getItem("tabVisibilityChanged");
+    _ssTabVisibilityState = sessionStorage.getItem("tabVisibilityState");
+    _ssCacheDirty = false;
+}
+/** Call after writing to sessionStorage keys used by getUrlAndStoredUuids(). */
+export function invalidateUrlCache() {
+    _ssCacheDirty = true;
+}
+export const getUrlAndStoredUuids = () => {
+    if (_ssCacheDirty)
+        _refreshSessionStorageCache();
+    return {
+        page_visit_uuid: _ssPageVisitUUID,
+        prev_page_visit_uuid: _ssPrevPageVisitUUID,
+        href: getCachedHrefNoQuery(),
+        tabVisibilityChanged: _ssTabVisibilityChanged,
+        tabVisibilityState: _ssTabVisibilityState,
+    };
+};
 export function initializeDomContentEvents(sessionId) {
     document.addEventListener("readystatechange", () => {
         const timestamp = Date.now();
@@ -140,6 +162,8 @@ export function initializeDomContentEvents(sessionId) {
 }
 export async function initializeConsolePlugin(consoleRecordSettings, sessionId) {
     const { getRecordConsolePlugin } = await import("@sailfish-rrweb/rrweb-plugin-console-record");
+    // Yield between dynamic import and observer setup
+    await yieldToMain();
     const { name, observer } = getRecordConsolePlugin(consoleRecordSettings);
     observer((payload) => {
         const anyPayload = payload;
@@ -245,7 +269,7 @@ function createThrottledEmit(enabled, intervalMs = 1000) {
 }
 export async function initializeRecording(captureSettings, // TODO - Sibyl post-launch - replace type
 // networkRecordSettings: NetworkRecordOptions,
-backendApi, apiKey, sessionId, envValue, deferRecordingStart = true, useWsWorker = false) {
+backendApi, apiKey, sessionId, envValue, deferRecordingStart = true, useWsWorker = false, chunkSnapshot = false) {
     const webSocket = initializeWebSocket(backendApi, apiKey, sessionId, envValue, useWsWorker);
     try {
         // Create throttled emit wrapper (only for text edit events)
@@ -272,15 +296,100 @@ backendApi, apiKey, sessionId, envValue, deferRecordingStart = true, useWsWorker
             }
             const { record } = await import("@sailfish-rrweb/rrweb-record-only");
             _record = record;
-            record({
-                emit(event) {
-                    emitWithContext(event);
-                },
-                maskInputOptions: { text: true },
-                maskInputFn,
-                maskTextClass: MASK_CLASS,
-                ...captureSettings,
-            });
+            // Yield before rrweb record() — the heaviest synchronous operation
+            await yieldToMain();
+            if (chunkSnapshot) {
+                // ── Chunked snapshot mode ──────────────────────────────────────
+                // Instead of rrweb's synchronous full-DOM snapshot (which blocks
+                // the main thread for 50-200ms+ on large pages), we:
+                //   1. Start rrweb with recordDOM:false (MutationObserver only)
+                //   2. Run our own async serializer with yield points
+                //   3. Emit Meta + FullSnapshot manually
+                //   4. Flush any mutations buffered during serialization
+                const { chunkedSnapshot } = await import("./chunkSerializer");
+                const mirror = record.mirror;
+                // Buffer mutations emitted by rrweb's MutationObserver during
+                // our async serialization, then flush after the FullSnapshot.
+                let isBuffering = true;
+                const mutationBuffer = [];
+                record({
+                    emit(event) {
+                        if (isBuffering) {
+                            mutationBuffer.push(event);
+                        }
+                        else {
+                            emitWithContext(event);
+                        }
+                    },
+                    maskInputOptions: { text: true },
+                    maskInputFn,
+                    maskTextClass: MASK_CLASS,
+                    ...captureSettings,
+                    recordDOM: false, // after spread so it can't be overridden
+                });
+                const snapshotStartTime = Date.now();
+                const serializedDoc = await chunkedSnapshot(document, mirror, {
+                    chunkSize: 500,
+                    maxChunkMs: 16,
+                    blockClass: captureSettings.blockClass,
+                    blockSelector: captureSettings.blockSelector,
+                    maskTextClass: captureSettings.maskTextClass ?? MASK_CLASS,
+                    maskTextSelector: captureSettings.maskTextSelector,
+                });
+                if (serializedDoc) {
+                    // Emit Meta event
+                    emitWithContext({
+                        type: EventType.Meta,
+                        data: {
+                            href: window.location.href,
+                            width: document.documentElement.clientWidth ||
+                                document.body.clientWidth,
+                            height: document.documentElement.clientHeight ||
+                                document.body.clientHeight,
+                        },
+                        timestamp: snapshotStartTime,
+                    });
+                    // Emit FullSnapshot event
+                    emitWithContext({
+                        type: EventType.FullSnapshot,
+                        data: {
+                            node: serializedDoc,
+                            initialOffset: {
+                                left: window.pageXOffset !== undefined
+                                    ? window.pageXOffset
+                                    : document.documentElement.scrollLeft,
+                                top: window.pageYOffset !== undefined
+                                    ? window.pageYOffset
+                                    : document.documentElement.scrollTop,
+                            },
+                        },
+                        timestamp: snapshotStartTime,
+                    });
+                    // Flush buffered mutations, then switch to direct emit
+                    for (const event of mutationBuffer) {
+                        emitWithContext(event);
+                    }
+                    isBuffering = false;
+                }
+                else {
+                    // Serialization failed — continue without initial DOM snapshot.
+                    // MutationObserver is still running, so ongoing changes are captured.
+                    console.warn("[Sailfish] chunkSnapshot serialization failed; session continues without initial DOM snapshot");
+                    isBuffering = false;
+                }
+            }
+            else {
+                // ── Normal snapshot mode ───────────────────────────────────────
+                record({
+                    emit(event) {
+                        emitWithContext(event);
+                    },
+                    maskInputOptions: { text: true },
+                    maskInputFn,
+                    maskTextClass: MASK_CLASS,
+                    ...captureSettings,
+                });
+            }
         };
         if (deferRecordingStart) {
             // Deterministic deferral: start heavy work only after page load completes,

package/dist/scheduler.js

@@ -0,0 +1,9 @@
+// Yields to the main thread to avoid long tasks (>50ms).
+// Uses scheduler.yield() (Chrome 115+) with setTimeout(0) fallback.
+export function yieldToMain() {
+    if (typeof globalThis !== "undefined" &&
+        globalThis.scheduler?.yield) {
+        return globalThis.scheduler.yield();
+    }
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}

package/dist/types/chunkSerializer.d.ts

@@ -0,0 +1,31 @@
+/** Subset of rrweb's Mirror interface needed for registration */
+export interface ChunkMirror {
+    add(node: Node, meta: {
+        id: number;
+    }): void;
+    hasNode(node: Node): boolean;
+    getId(node: Node): number;
+}
+export interface ChunkOptions {
+    /** Yield after this many nodes (default: 500) */
+    chunkSize?: number;
+    /** Yield if chunk exceeds this many ms (default: 16) */
+    maxChunkMs?: number;
+    /** rrweb blockClass — elements with this class are serialized as empty placeholders */
+    blockClass?: string;
+    /** rrweb blockSelector — CSS selector for blocked elements */
+    blockSelector?: string | null;
+    /** rrweb maskTextClass — text under elements with this class is masked */
+    maskTextClass?: string;
+    /** rrweb maskTextSelector — CSS selector for masked text containers */
+    maskTextSelector?: string | null;
+}
+/**
+ * Async chunked DOM serializer. Walks the document tree producing an
+ * rrweb-compatible serialized node tree, yielding to the main thread
+ * every `chunkSize` nodes or `maxChunkMs` milliseconds (whichever first).
+ *
+ * Nodes removed between yield points are silently skipped.
+ * Returns null if the document cannot be serialized.
+ */
+export declare function chunkedSnapshot(doc: Document, mirror: ChunkMirror, options?: ChunkOptions): Promise<any | null>;

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ export declare const STORAGE_VERSION = 1;
 export declare const DEFAULT_CAPTURE_SETTINGS: CaptureSettings;
 export declare const DEFAULT_CONSOLE_RECORDING_SETTINGS: LogRecordOptions;
 export declare function matchUrlWithWildcard(input: unknown, patterns: string[]): boolean;
-export declare function startRecording({ apiKey, backendApi, domainsToPropagateHeaderTo, domainsToNotPropagateHeaderTo, serviceVersion, serviceIdentifier, gitSha, serviceAdditionalMetadata, enableIpTracking, captureStreamingResponseBody, captureResponseBodyMaxMb, captureStreamPrefixKb, captureStreamTimeoutMs, enableFiberTracking, deferRecordingStart, useWsWorker, }: {
+export declare function startRecording({ apiKey, backendApi, domainsToPropagateHeaderTo, domainsToNotPropagateHeaderTo, serviceVersion, serviceIdentifier, gitSha, serviceAdditionalMetadata, enableIpTracking, captureStreamingResponseBody, captureResponseBodyMaxMb, captureStreamPrefixKb, captureStreamTimeoutMs, enableFiberTracking, deferRecording, deferRecordingStart, chunkSnapshot, useWsWorker, }: {
     apiKey: string;
     backendApi?: string;
     domainsToPropagateHeaderTo?: string[];
@@ -20,7 +20,10 @@ export declare function startRecording({ apiKey, backendApi, domainsToPropagateH
     captureResponseBodyMaxMb?: number;
     captureStreamPrefixKb?: number;
     captureStreamTimeoutMs?: number;
+    deferRecording?: boolean;
+    /** @deprecated Use `deferRecording` instead. */
     deferRecordingStart?: boolean;
+    chunkSnapshot?: boolean;
     useWsWorker?: boolean;
 }): Promise<void>;
 export declare const initRecorder: (options: {
@@ -40,7 +43,35 @@ export declare const initRecorder: (options: {
     captureResponseBodyMaxMb?: number;
     captureStreamPrefixKb?: number;
     captureStreamTimeoutMs?: number;
+    /**
+     * Defer heavy DOM recording (rrweb snapshot + MutationObserver) until after
+     * the page reaches TTI. Network interceptors (XHR/fetch), error handlers,
+     * and console capture still install immediately.
+     *
+     * When enabled, rrweb recording starts after page load completes AND one of:
+     * - `requestIdleCallback` fires (browser is genuinely idle)
+     * - First user interaction (click, scroll, keydown, touchstart)
+     * - 10-second hard ceiling timer
+     *
+     * Recommended for pages with heavy initial load (Module Federation, SPAs).
+     * @default true
+     */
+    deferRecording?: boolean;
+    /** @deprecated Use `deferRecording` instead. */
     deferRecordingStart?: boolean;
+    /**
+     * Break the initial DOM snapshot into chunks, yielding to the main thread
+     * between each chunk. Reduces the long-task duration of rrweb's initial
+     * full-DOM serialization on pages with large DOM trees (8 000+ nodes).
+     *
+     * Yields every 500 nodes or 16 ms, whichever comes first.
+     * Nodes removed between yield points are silently skipped.
+     *
+     * Best combined with `deferRecording: true` so the snapshot runs outside
+     * the Lighthouse measurement window entirely.
+     * @default false
+     */
+    chunkSnapshot?: boolean;
     useWsWorker?: boolean;
 }) => Promise<void>;
 export * from "./graphql";

package/dist/types/recording.d.ts

@@ -1,5 +1,7 @@
 import type { LogRecordOptions } from "@sailfish-rrweb/rrweb-plugin-console-record";
 import type { WsHandle } from "./websocket";
+/** Call after writing to sessionStorage keys used by getUrlAndStoredUuids(). */
+export declare function invalidateUrlCache(): void;
 export declare const getUrlAndStoredUuids: () => {
     page_visit_uuid: string;
     prev_page_visit_uuid: string;
@@ -10,4 +12,4 @@ export declare const getUrlAndStoredUuids: () => {
 export declare function initializeDomContentEvents(sessionId: string): void;
 export declare function initializeConsolePlugin(consoleRecordSettings: LogRecordOptions, sessionId: string): Promise<void>;
 export declare function initializeRecording(captureSettings: any, // TODO - Sibyl post-launch - replace type
-backendApi: string, apiKey: string, sessionId: string, envValue?: string, deferRecordingStart?: boolean, useWsWorker?: boolean): Promise<WsHandle>;
+backendApi: string, apiKey: string, sessionId: string, envValue?: string, deferRecordingStart?: boolean, useWsWorker?: boolean, chunkSnapshot?: boolean): Promise<WsHandle>;

package/dist/types/scheduler.d.ts

@@ -0,0 +1 @@
+export declare function yieldToMain(): Promise<void>;

package/dist/types/websocket.d.ts

@@ -3,6 +3,12 @@ export interface WsHandle {
     readyState: number;
     close: () => void;
 }
+/** Install navigation listeners to keep the cached URL fresh. */
+export declare function ensureHrefCache(): void;
+/** Get cached href (falls back to live read if cache not initialized). */
+export declare function getCachedHref(): string;
+/** Get cached origin+pathname (no query/hash). */
+export declare function getCachedHrefNoQuery(): string;
 /**
  * Clear stale function span tracking state (called from index.tsx to validate localStorage)
  * This disables tracking and clears localStorage if backend says tracking is not active

package/dist/utils.js

@@ -37,7 +37,9 @@ export function buildBatches(queue, getSize, maxBytes) {
     return batches;
 }
 export function eventSize(event) {
-    return new Blob([JSON.stringify(event)]).size;
+    // Fast byte-length estimate: JSON string length ≈ UTF-8 byte size for ASCII-heavy
+    // telemetry data. Avoids Blob constructor overhead. Accurate within ~5% for typical payloads.
+    return JSON.stringify(event).length;
 }
 // guard against old third party libraries which redefine Date.now
 let nowTimestamp = Date.now;

package/dist/websocket.js

@@ -1,6 +1,6 @@
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { readDebugFlag } from "./env";
-import { deleteEventsByIds, getAllIndexedEvents, saveEventToIDB, } from "./eventStore";
+import { deleteEventsByIds, getAllIndexedEvents, saveEventsToIDB, } from "./eventStore";
 import { deleteNotifyMessageById, getAllNotifyMessages, saveNotifyMessageToIDB, } from "./notifyEventStore";
 import { getOrSetSessionId } from "./session";
 import { buildBatches, eventSize } from "./utils";
@@ -96,6 +96,72 @@ let webSocket = null;
 let isDraining = false;
 let inFlightFlush = null;
 let flushIntervalId = null;
+// ─── Cached window.location.href ──────────────────────────────────────────────
+// Updated on navigation events (popstate, hashchange, pushState, replaceState)
+// instead of reading the DOM property on every sendEvent() call.
+let _cachedHref = "";
+let _cachedHrefNoQuery = "";
+let _hrefListenersInstalled = false;
+function _updateHrefCache() {
+    _cachedHref = window.location.href;
+    _cachedHrefNoQuery = window.location.origin + window.location.pathname;
+}
+/** Install navigation listeners to keep the cached URL fresh. */
+export function ensureHrefCache() {
+    if (_hrefListenersInstalled || typeof window === "undefined")
+        return;
+    _hrefListenersInstalled = true;
+    _updateHrefCache();
+    window.addEventListener("popstate", _updateHrefCache);
+    window.addEventListener("hashchange", _updateHrefCache);
+    const origPush = history.pushState;
+    history.pushState = function (...args) {
+        origPush.apply(this, args);
+        _updateHrefCache();
+    };
+    const origReplace = history.replaceState;
+    history.replaceState = function (...args) {
+        origReplace.apply(this, args);
+        _updateHrefCache();
+    };
+}
+/** Get cached href (falls back to live read if cache not initialized). */
+export function getCachedHref() {
+    return (_cachedHref ||
+        (typeof window !== "undefined" ? window.location.href : ""));
+}
+/** Get cached origin+pathname (no query/hash). */
+export function getCachedHrefNoQuery() {
+    return (_cachedHrefNoQuery ||
+        (typeof window !== "undefined"
+            ? window.location.origin + window.location.pathname
+            : ""));
+}
+// ─── IDB event batching ──────────────────────────────────────────────────────
+// Queue events and flush in batches to avoid one IDB transaction per event.
+const _idbEventQueue = [];
+let _idbFlushTimer = null;
+const IDB_BATCH_SIZE = 50;
+const IDB_FLUSH_INTERVAL_MS = 100;
+function queueEventForIDB(event) {
+    _idbEventQueue.push(event);
+    if (_idbEventQueue.length >= IDB_BATCH_SIZE) {
+        _flushIDBQueue();
+    }
+    else if (!_idbFlushTimer) {
+        _idbFlushTimer = setTimeout(_flushIDBQueue, IDB_FLUSH_INTERVAL_MS);
+    }
+}
+function _flushIDBQueue() {
+    if (_idbFlushTimer) {
+        clearTimeout(_idbFlushTimer);
+        _idbFlushTimer = null;
+    }
+    if (_idbEventQueue.length === 0)
+        return;
+    const batch = _idbEventQueue.splice(0);
+    saveEventsToIDB(batch);
+}
 // Function span tracking state (only manages enabled/disabled)
 let funcSpanTrackingEnabled = false;
 let funcSpanTimeoutId = null;
@@ -325,13 +391,9 @@ export async function flushBufferedEvents() {
                 if (!isWebSocketOpen(webSocket))
                     break;
                 const eventsToSend = batch.map((e) => {
-                    const event = {
-                        ...e.data,
-                        appUrl: e.data?.appUrl ?? window?.location?.href,
-                    };
-                    // Note: We do NOT add funcspan header to websocket events
-                    // The header is only added to HTTP network requests
-                    return event;
+                    if (!e.data.appUrl)
+                        e.data.appUrl = getCachedHref();
+                    return e.data;
                 });
                 const idsToDelete = batch
                     .map((e) => e.id)
@@ -359,23 +421,19 @@ export async function flushBufferedEvents() {
 }
 // ─── Public send API ─────────────────────────────────────────────────────────
 export function sendEvent(event) {
-    const enrichedEvent = {
-        ...event,
-        app_url: event?.app_url ?? window?.location?.href,
-    };
-    // Note: We do NOT add funcspan header to websocket events
-    // The header is only added to HTTP network requests (fetch/XMLHttpRequest)
-    // This is handled in index.tsx injectHeader function
+    // Mutate in place — event is ephemeral, avoids object spread allocation
+    if (!event.app_url)
+        event.app_url = getCachedHref();
     if (isDraining || !isWebSocketOpen(webSocket)) {
-        saveEventToIDB(enrichedEvent);
+        queueEventForIDB(event);
         return;
     }
     if (!wsSendPayload({
         type: "event",
-        event: enrichedEvent,
+        event,
         mapUuid: window.sfMapUuid,
     })) {
-        saveEventToIDB(enrichedEvent);
+        queueEventForIDB(event);
     }
 }
 // ─── WebSocket event handlers (shared between worker + direct paths) ─────────
@@ -542,6 +600,7 @@ function handleWsMessage(rawData) {
 }
 // ─── WebSocket initialization ────────────────────────────────────────────────
 export function initializeWebSocket(backendApi, apiKey, sessionId, envValue, useWsWorker = false) {
+    ensureHrefCache();
     const wsHost = getWebSocketHost(backendApi);
     const apiProtocol = new URL(backendApi).protocol;
     const wsScheme = apiProtocol === "https:" ? "wss" : "ws";
@@ -622,17 +681,14 @@ export function sendMessage(message) {
     if (!("sessionId" in message)) {
         message.sessionId = getOrSetSessionId();
     }
-    const enriched = {
-        ...message,
-        app_url: message?.app_url ?? window?.location?.href,
-    };
-    // Check isDraining to prevent out-of-order delivery during reconnection
-    // When draining buffered events, queue new messages to maintain order
+    // Mutate in place — avoids object spread allocation
+    if (!message.app_url)
+        message.app_url = getCachedHref();
     if (isDraining || !isWebSocketOpen(webSocket)) {
-        saveNotifyMessageToIDB(JSON.stringify(enriched));
+        saveNotifyMessageToIDB(JSON.stringify(message));
     }
-    else if (!wsSendPayload(enriched)) {
-        saveNotifyMessageToIDB(JSON.stringify(enriched));
+    else if (!wsSendPayload(message)) {
+        saveNotifyMessageToIDB(JSON.stringify(message));
     }
 }
 function getWebSocketHost(url) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailfish-ai/recorder",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "publishPublicly": true,
   "type": "module",
   "main": "dist/recorder.cjs",