@coralogix/browser 3.23.5 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "3.23.5",
+  "version": "3.24.0",
   "description": "Official Coralogix SDK for browsers",
   "license": "Apache-2.0",
   "author": "Coralogix",

package/sessionRecorder.esm.js

@@ -1,5 +1,5 @@
 import { __values, __spreadArray, __read, __assign, __rest, __awaiter, __generator } from 'tslib';
-import { c as cxSetTimeout, a as cxClearTimeout, g as getZoneJsOriginalDom, b as createCxMutationObserver, d as cxRequestAnimationFrame, e as cxCancelAnimationFrame, C as CxGlobal, S as SESSION_RECORDER_SEGMENTS_MAP, f as getSdkConfig, h as cxClearInterval, i as getNowTime, j as SESSION_RECORDING_NETWORK_ERR0R_MESSAGE, k as cxSetInterval, R as Request, l as SESSION_RECORDING_DEFAULT_HEADERS, m as SESSION_RECORDING_POSTFIX_URL, B as BATCH_TIME_DELAY, n as SESSION_RECORDER_KEY, o as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, M as MAX_BATCH_TIME_MS } from './index.esm2.js';
+import { N as NodeType, c as cxSetTimeout, a as cxClearTimeout, g as getZoneJsOriginalDom, b as createCxMutationObserver, M as MouseInteractions, d as MediaInteractions, P as PointerTypes, I as IncrementalSource, E as EventType, C as CanvasContext, e as cxRequestAnimationFrame, f as cxCancelAnimationFrame, h as CxGlobal, S as SESSION_RECORDER_SEGMENTS_MAP, i as getSdkConfig, j as cxClearInterval, k as getNowTime, l as SESSION_RECORDING_NETWORK_ERR0R_MESSAGE, m as cxSetInterval, R as Request, n as SESSION_RECORDING_DEFAULT_HEADERS, o as SESSION_RECORDING_POSTFIX_URL, B as BATCH_TIME_DELAY, p as getDomChangeScreenshotTrigger, s as setSdkState, q as SESSION_RECORDER_KEY, r as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, t as MAX_BATCH_TIME_MS } from './index.esm2.js';
 import '@opentelemetry/sdk-trace-base';
 import '@opentelemetry/sdk-trace-web';
 import '@opentelemetry/instrumentation';
@@ -12,81 +12,6 @@ import '@opentelemetry/api';
 import '@opentelemetry/propagator-b3';
 import '@opentelemetry/propagator-aws-xray';
 
-var EventType;
-(function (EventType) {
-    EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
-    EventType[EventType["Load"] = 1] = "Load";
-    EventType[EventType["FullSnapshot"] = 2] = "FullSnapshot";
-    EventType[EventType["IncrementalSnapshot"] = 3] = "IncrementalSnapshot";
-    EventType[EventType["Meta"] = 4] = "Meta";
-    EventType[EventType["Custom"] = 5] = "Custom";
-    EventType[EventType["Plugin"] = 6] = "Plugin";
-    EventType[EventType["Asset"] = 7] = "Asset";
-})(EventType || (EventType = {}));
-var IncrementalSource;
-(function (IncrementalSource) {
-    IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
-    IncrementalSource[IncrementalSource["MouseMove"] = 1] = "MouseMove";
-    IncrementalSource[IncrementalSource["MouseInteraction"] = 2] = "MouseInteraction";
-    IncrementalSource[IncrementalSource["Scroll"] = 3] = "Scroll";
-    IncrementalSource[IncrementalSource["ViewportResize"] = 4] = "ViewportResize";
-    IncrementalSource[IncrementalSource["Input"] = 5] = "Input";
-    IncrementalSource[IncrementalSource["TouchMove"] = 6] = "TouchMove";
-    IncrementalSource[IncrementalSource["MediaInteraction"] = 7] = "MediaInteraction";
-    IncrementalSource[IncrementalSource["StyleSheetRule"] = 8] = "StyleSheetRule";
-    IncrementalSource[IncrementalSource["CanvasMutation"] = 9] = "CanvasMutation";
-    IncrementalSource[IncrementalSource["Font"] = 10] = "Font";
-    IncrementalSource[IncrementalSource["Log"] = 11] = "Log";
-    IncrementalSource[IncrementalSource["Drag"] = 12] = "Drag";
-    IncrementalSource[IncrementalSource["StyleDeclaration"] = 13] = "StyleDeclaration";
-    IncrementalSource[IncrementalSource["Selection"] = 14] = "Selection";
-    IncrementalSource[IncrementalSource["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
-    IncrementalSource[IncrementalSource["CustomElement"] = 16] = "CustomElement";
-})(IncrementalSource || (IncrementalSource = {}));
-var MouseInteractions;
-(function (MouseInteractions) {
-    MouseInteractions[MouseInteractions["MouseUp"] = 0] = "MouseUp";
-    MouseInteractions[MouseInteractions["MouseDown"] = 1] = "MouseDown";
-    MouseInteractions[MouseInteractions["Click"] = 2] = "Click";
-    MouseInteractions[MouseInteractions["ContextMenu"] = 3] = "ContextMenu";
-    MouseInteractions[MouseInteractions["DblClick"] = 4] = "DblClick";
-    MouseInteractions[MouseInteractions["Focus"] = 5] = "Focus";
-    MouseInteractions[MouseInteractions["Blur"] = 6] = "Blur";
-    MouseInteractions[MouseInteractions["TouchStart"] = 7] = "TouchStart";
-    MouseInteractions[MouseInteractions["TouchMove_Departed"] = 8] = "TouchMove_Departed";
-    MouseInteractions[MouseInteractions["TouchEnd"] = 9] = "TouchEnd";
-    MouseInteractions[MouseInteractions["TouchCancel"] = 10] = "TouchCancel";
-})(MouseInteractions || (MouseInteractions = {}));
-var PointerTypes;
-(function (PointerTypes) {
-    PointerTypes[PointerTypes["Mouse"] = 0] = "Mouse";
-    PointerTypes[PointerTypes["Pen"] = 1] = "Pen";
-    PointerTypes[PointerTypes["Touch"] = 2] = "Touch";
-})(PointerTypes || (PointerTypes = {}));
-var CanvasContext;
-(function (CanvasContext) {
-    CanvasContext[CanvasContext["2D"] = 0] = "2D";
-    CanvasContext[CanvasContext["WebGL"] = 1] = "WebGL";
-    CanvasContext[CanvasContext["WebGL2"] = 2] = "WebGL2";
-})(CanvasContext || (CanvasContext = {}));
-var MediaInteractions;
-(function (MediaInteractions) {
-    MediaInteractions[MediaInteractions["Play"] = 0] = "Play";
-    MediaInteractions[MediaInteractions["Pause"] = 1] = "Pause";
-    MediaInteractions[MediaInteractions["Seeked"] = 2] = "Seeked";
-    MediaInteractions[MediaInteractions["VolumeChange"] = 3] = "VolumeChange";
-    MediaInteractions[MediaInteractions["RateChange"] = 4] = "RateChange";
-})(MediaInteractions || (MediaInteractions = {}));
-var NodeType;
-(function (NodeType) {
-    NodeType[NodeType["Document"] = 0] = "Document";
-    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
-    NodeType[NodeType["Element"] = 2] = "Element";
-    NodeType[NodeType["Text"] = 3] = "Text";
-    NodeType[NodeType["CDATA"] = 4] = "CDATA";
-    NodeType[NodeType["Comment"] = 5] = "Comment";
-})(NodeType || (NodeType = {}));
-
 var testableAccessors = {
     Node: [
         'childNodes',
@@ -5714,6 +5639,7 @@ var WorkerManager = (function () {
     return WorkerManager;
 }());
 
+var resolveMirrorNode = function (id) { var _a, _b, _c; return (_c = (_b = (_a = record.mirror) === null || _a === void 0 ? void 0 : _a.getNode) === null || _b === void 0 ? void 0 : _b.call(_a, id)) !== null && _c !== void 0 ? _c : null; };
 var SessionRecorder = (function () {
     function SessionRecorder(sessionManager, recordConfig) {
         var _this = this;
@@ -5731,6 +5657,8 @@ var SessionRecorder = (function () {
         this.debugMode = !!((_a = getSdkConfig()) === null || _a === void 0 ? void 0 : _a.debug);
         this._recordingStopDueToTimeout = false;
         this.handleRecordEvent = function (event, isCheckout) {
+            var _a;
+            (_a = getDomChangeScreenshotTrigger()) === null || _a === void 0 ? void 0 : _a.handleRecordEvent(event, resolveMirrorNode);
             if (!_this.recordingStopped) {
                 if (_this.onlySessionWithErrorMode) {
                     _this.handleRecordEventForSessionWithError(event, isCheckout);
@@ -5793,7 +5721,7 @@ var SessionRecorder = (function () {
                 _this.batchTimeDelay = BATCH_TIME_DELAY;
             }
         };
-        CxGlobal[SESSION_RECORDER_KEY] = this;
+        setSdkState(SESSION_RECORDER_KEY, this);
         this.sessionManager = sessionManager;
         if ((_b = getSdkConfig().sessionConfig) === null || _b === void 0 ? void 0 : _b.keepSessionAfterReload) {
             this.restoreSegmentIndexCounter();
@@ -5834,9 +5762,12 @@ var SessionRecorder = (function () {
     SessionRecorder.prototype.getIsAutoStartRecording = function () {
         return this.isAutoStartRecording;
     };
+    SessionRecorder.prototype.isRecordingActive = function () {
+        return !!this.recordRef;
+    };
     SessionRecorder.prototype.isConsoleRecordingActive = function () {
         var _a;
-        return (!!this.recordRef &&
+        return (this.isRecordingActive() &&
             ((_a = getSdkConfig().sessionRecordingConfig) === null || _a === void 0 ? void 0 : _a.recordConsoleEvents) === true);
     };
     Object.defineProperty(SessionRecorder.prototype, "recordingStopDueToTimeout", {

package/src/constants.d.ts

@@ -4,7 +4,8 @@ export declare const CORALOGIX_LOGS_URL_SUFFIX = "/browser/v1beta/logs";
 export declare const CORALOGIX_RECORDING_URL_SUFFIX = "/sessionrecording";
 export declare const MFE_METADATA_FILE = "cx-metadata.json";
 export declare const MFE_METADATA_URL_PATTERN: RegExp;
-export declare const MAX_INTERACTION_ELEMENT_SIZE = 1024;
+export declare const MAX_INTERACTION_ELEMENT_SIZE = 100;
+export declare const INTERACTION_TEXT_TRUNCATION_MARKER = " [...]";
 export declare const MAX_CHARACTERS = 1024;
 export declare const REQUIRED_CONFIG_KEYS: Array<keyof CoralogixBrowserSdkConfig>;
 export { SDK_CONFIG_KEY, USER_AGENT_KEY } from './tools/global-keys';
@@ -18,6 +19,8 @@ export declare const MASKED_TEXT = "***";
 export declare const MASK_CLASS_DEFAULT = "cx-mask";
 export declare const CX_PREFIX = "cx";
 export declare const ARIA_LABEL_ATTRIBUTE = "aria-label";
+export declare const TITLE_ATTRIBUTE = "title";
+export declare const ALT_ATTRIBUTE = "alt";
 export declare const PASSWORD_INPUT_TYPE: InputType;
 export declare const MASK_INPUT_TYPES_DEFAULT: InputType[];
 export declare const FINGER_PRINT_KEY = "cx-fingerprint";

package/src/helpers.d.ts

@@ -4,10 +4,12 @@ import { CoralogixBrowserSdkConfig, UserAgentData } from './types';
 import { SnapshotManager } from './snapshot/snapshotManager';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import type { ClickScreenshotManager } from './instrumentations/screenshot/click-screenshot-manager';
+import type { DomChangeScreenshotTrigger } from './instrumentations/screenshot/dom-change-screenshot-trigger';
 export declare function getSnapshotManager(): SnapshotManager;
 export declare function getSessionManager(): SessionManager;
 export declare function getSessionRecorder(): SessionRecorder | undefined;
 export declare function getClickScreenshotManager(): ClickScreenshotManager | undefined;
+export declare function getDomChangeScreenshotTrigger(): DomChangeScreenshotTrigger | undefined;
 export declare function getSdkConfig(): CoralogixBrowserSdkConfig;
 export declare function getUserAgentData(): UserAgentData;
 export declare function clearMemoryFrom(keys: string[]): void;

package/src/instrumentations/screenshot/dom-change-screenshot-trigger.d.ts

@@ -0,0 +1,28 @@
+import { eventWithTime } from '../../cx-rrweb/rrweb-types';
+import { MirrorNodeResolver } from './dom-change-screenshot.consts';
+export declare class DomChangeScreenshotTrigger {
+    private settled;
+    private quietTimer;
+    private debounceTimer;
+    private lastInteractionAt;
+    private pendingReason;
+    private cachedElementCount;
+    private elementCountRefreshedAt;
+    private lastCaptureAt;
+    private capturesThisView;
+    static unregister(): void;
+    constructor();
+    reset: () => void;
+    onNavigation: () => void;
+    handleRecordEvent: (event: eventWithTime, resolveNode?: MirrorNodeResolver) => void;
+    private isUserInteraction;
+    private handleMutation;
+    private classify;
+    private capture;
+    private getElementCount;
+    private armSettleTimer;
+    private markSettled;
+    private clearTimers;
+    private clearSettleTimer;
+    private clearDebounceTimer;
+}

package/src/instrumentations/screenshot/dom-change-screenshot.consts.d.ts

@@ -0,0 +1,23 @@
+export declare const DOM_CHANGE_SCREENSHOT_TRIGGER_KEY = "rumDomChangeScreenshotTrigger";
+export declare const SETTLE_QUIET_MS = 500;
+export declare const CONTENT_ELEMENT_FLOOR = 50;
+export declare const CHANGE_DEBOUNCE_MS = 400;
+export declare const INTERACTION_TIGHT_MS = 150;
+export declare const INTERACTION_TIGHT_MIN_ELEMENTS = 1;
+export declare const INTERACTION_LOOSE_MS = 1500;
+export declare const INTERACTION_LOOSE_MIN_ELEMENTS = 3;
+export declare const OVERLAY_MAX_DEPTH = 3;
+export declare const MAX_DEPTH_WALK = 40;
+export declare const OVERLAY_MAX_REMOVES_ABSOLUTE = 2;
+export declare const OVERLAY_MAX_REMOVES_FRACTION = 0.1;
+export declare const VIEW_CHANGE_FRACTION = 0.02;
+export declare const VIEW_CHANGE_MIN_WEIGHT = 25;
+export declare const NODE_COUNT_REFRESH_MS = 2000;
+export declare const MIN_CAPTURE_INTERVAL_MS = 2000;
+export declare const MAX_CAPTURES_PER_VIEW = 10;
+export declare const MAX_NODES_FOR_CAPTURE = 20000;
+export type MirrorNodeResolver = (id: number) => Node | null;
+export declare const enum DomChangeReason {
+    Overlay = "dom-overlay",
+    ViewChange = "dom-view-change"
+}

package/src/instrumentations/screenshot/screenshot-gate.d.ts

@@ -0,0 +1 @@
+export declare function canCaptureAutomaticScreenshot(): boolean;

package/src/instrumentations/screenshot/screenshot.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const SCREENSHOT_INSTRUMENTATION_NAME = "screenshot";
 export declare const SCREENSHOT_INSTRUMENTATION_VERSION = "1.0.0";
+export declare const MAX_SCREENSHOT_ACTIONS = 100;
+export declare function collectDomActionNames(limit?: number): string[];

package/src/instrumentations/user-interaction/user-interaction.utils.d.ts

@@ -1,13 +1,13 @@
 import { CoralogixBrowserSdkConfig } from '../../types';
+export declare const CLICKABLE_SELECTOR: string;
 export declare function extractActionName(el: Element | HTMLElement | null): string;
 export declare function extractAriaLabel(el: Element | HTMLElement | null): string;
 export declare function extractTestId(el: Element | HTMLElement | null): string;
-export declare function extractResolvedName({ isDeadClick, element, config, actionName, ariaLabel, }: {
+export declare function extractResolvedName({ isDeadClick, element, config, actionName, }: {
     isDeadClick: boolean;
     element: Element | HTMLElement | null;
     config: CoralogixBrowserSdkConfig;
     actionName: string;
-    ariaLabel: string;
 }): string;
 export declare function extractMaskedOrTextContent(clickableElement: Element | HTMLElement | null, config: CoralogixBrowserSdkConfig): string;
 export declare function getClassName(element: Element | HTMLElement): string;

package/src/session/session.model.d.ts

@@ -12,6 +12,7 @@ export interface SessionRecordingConfig extends Omit<recordOptions<eventWithTime
     sessionRecordingSampleRate?: number;
     workerUrl?: string;
     immediateFlush?: boolean;
+    captureScreenshotOnDomChange?: boolean;
 }
 export interface SessionWithErrorConfig {
     enable: boolean;

package/src/session/sessionRecorder.d.ts

@@ -29,6 +29,7 @@ export declare class SessionRecorder {
     getSegmentIndexCounter(): Record<string, number>;
     private restoreSegmentIndexCounter;
     getIsAutoStartRecording(): boolean;
+    isRecordingActive(): boolean;
     isConsoleRecordingActive(): boolean;
     set recordingStopDueToTimeout(value: boolean);
     get recordingStopDueToTimeout(): boolean;

package/src/tools/sdk-store.d.ts

@@ -0,0 +1,6 @@
+export declare const SDK_STORE_KEY = "__cx_store__";
+export declare const CACHED_LOGS_KEY = "cachedLogs";
+export type SdkStore = Record<string, any>;
+export declare const sdkStore: SdkStore;
+export declare function setSdkState(key: string, value: unknown): void;
+export declare function deleteSdkState(key: string): void;

package/src/types.d.ts

@@ -73,6 +73,7 @@ export interface CustomTargetElement extends HTMLElement {
 export interface ScreenshotContext {
     id: string;
     description?: string;
+    actions?: string[];
 }
 export interface DomContext {
     visibility_state: DocumentVisibilityState;

package/src/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.23.5";
+export declare const SDK_VERSION = "3.24.0";