@openreplay/tracker 13.0.1 → 14.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# 15.0.0
+
+- updated graphql plugin and messages
+
+# 14.0.0
+
+- titles for tabs
+- new `MouseClick` message to introduce heatmaps instead of clickmaps
+- crossdomain iframe tracking functionality
+
+# 13.0.2
+
+- more file extensions for canvas
+
 # 13.0.1
 
 - moved canvas snapshots to webp, additional option to utilize useAnimationFrame method (for webgl)

package/cjs/app/canvas.d.ts

@@ -5,6 +5,7 @@ interface Options {
     isDebug?: boolean;
     fixedScaling?: boolean;
     useAnimationFrame?: boolean;
+    fileExt?: 'webp' | 'png' | 'jpeg' | 'avif';
 }
 declare class CanvasRecorder {
     private readonly app;
@@ -12,6 +13,7 @@ declare class CanvasRecorder {
     private snapshots;
     private readonly intervals;
     private readonly interval;
+    private readonly fileExt;
     constructor(app: App, options: Options);
     startTracking(): void;
     restartTracking: () => void;

package/cjs/app/canvas.js

@@ -59,7 +59,7 @@ class CanvasRecorder {
             const canvasMsg = (0, messages_gen_js_1.CanvasNode)(id.toString(), ts);
             this.app.send(canvasMsg);
             const captureFn = (canvas) => {
-                captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling, (blob) => {
+                captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling, this.fileExt, (blob) => {
                     if (!blob)
                         return;
                     this.snapshots[id].images.push({ id: this.app.timestamp(), data: blob });
@@ -91,6 +91,7 @@ class CanvasRecorder {
             }, this.interval);
             this.intervals.push(int);
         };
+        this.fileExt = options.fileExt ?? 'webp';
         this.interval = 1000 / options.fps;
     }
     startTracking() {
@@ -110,9 +111,9 @@ class CanvasRecorder {
             const blob = snapshot.data;
             if (!blob)
                 return;
-            formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.webp`);
+            formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
             if (this.options.isDebug) {
-                saveImageData(blob, `${createdAt}_${canvasId}_${snapshot.id}.webp`);
+                saveImageData(blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
             }
         });
         fetch(this.app.options.ingestPoint + '/v1/web/images', {
@@ -139,8 +140,8 @@ const qualityInt = {
     medium: 0.55,
     high: 0.8,
 };
-function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false, onBlob) {
-    const imageFormat = 'image/webp';
+function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false, fileExt, onBlob) {
+    const imageFormat = `image/${fileExt}`;
     if (fixedScaling) {
         const canvasScaleRatio = window.devicePixelRatio || 1;
         dummy.width = canvas.width / canvasScaleRatio;

package/cjs/app/index.d.ts

@@ -1,17 +1,17 @@
+import type { Options as WebworkerOptions } from '../common/interaction.js';
+import AttributeSender from '../modules/attributeSender.js';
 import FeatureFlags from '../modules/featureFlags.js';
+import type { Options as NetworkOptions } from '../modules/network.js';
+import Logger, { ILogLevel } from './logger.js';
 import Message from './messages.gen.js';
 import Nodes from './nodes.js';
-import Observer from './observer/top_observer.js';
-import Sanitizer from './sanitizer.js';
-import Ticker from './ticker.js';
-import Logger, { ILogLevel } from './logger.js';
-import Session from './session.js';
-import AttributeSender from '../modules/attributeSender.js';
 import type { Options as ObserverOptions } from './observer/top_observer.js';
+import Observer from './observer/top_observer.js';
 import type { Options as SanitizerOptions } from './sanitizer.js';
+import Sanitizer from './sanitizer.js';
 import type { Options as SessOptions } from './session.js';
-import type { Options as NetworkOptions } from '../modules/network.js';
-import type { Options as WebworkerOptions } from '../common/interaction.js';
+import Session from './session.js';
+import Ticker from './ticker.js';
 export interface StartOptions {
     userID?: string;
     metadata?: Record<string, string>;
@@ -50,28 +50,56 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: ILogLevel;
+    /** @deprecated see canvas prop */
     __save_canvas_locally?: boolean;
+    /** @deprecated see canvas prop */
     fixedCanvasScaling?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
+    /** Sometimes helps to prevent session breaking due to dict reset */
     disableStringDict?: boolean;
     assistSocketHost?: string;
+    /** @deprecated see canvas prop */
     disableCanvas?: boolean;
     canvas: {
         disableCanvas?: boolean;
+        /**
+         * If you expect HI-DPI users mostly, this will render canvas
+         * in 1:1 pixel ratio
+         * */
         fixedCanvasScaling?: boolean;
         __save_canvas_locally?: boolean;
+        /**
+         * Use with care since it hijacks one frame each time it captures
+         * snapshot for every canvas
+         * */
         useAnimationFrame?: boolean;
+        /**
+         * Use webp unless it produces too big images
+         * @default webp
+         * */
+        fileExt?: 'webp' | 'png' | 'jpeg' | 'avif';
+    };
+    crossdomain?: {
+        /**
+         * @default false
+         * */
+        enabled?: boolean;
+        /**
+         * used to send message up, will be '*' by default
+         * (check your CSP settings)
+         * @default '*'
+         * */
+        parentDomain?: string;
     };
-    /** @deprecated */
-    onStart?: StartCallback;
     network?: NetworkOptions;
 } & WebworkerOptions & SessOptions;
 export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
     private readonly signalError;
+    private readonly insideIframe;
     readonly nodes: Nodes;
     readonly ticker: Ticker;
     readonly projectKey: string;
@@ -97,21 +125,29 @@ export default class App {
     private readonly revID;
     private activityState;
     private readonly version;
-    private readonly worker?;
+    private worker?;
     attributeSender: AttributeSender;
     featureFlags: FeatureFlags;
     socketMode: boolean;
     private compressionThreshold;
-    private restartAttempts;
     private readonly bc;
     private readonly contextId;
     private canvasRecorder;
     private uxtManager;
     private conditionsManager;
     private readonly tagWatcher;
-    constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void);
+    private canStart;
+    private rootId;
+    private pageFrames;
+    private frameOderNumber;
+    private readonly initialHostName;
+    constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void, insideIframe: boolean);
+    startTimeout: ReturnType<typeof setTimeout> | null;
+    private allowAppStart;
+    private checkNodeId;
+    private initWorker;
+    private handleWorkerMsg;
     private _debug;
-    private _usingOldFetchPlugin;
     send(message: Message, urgent?: boolean): void;
     /**
      * Normal workflow: add timestamp and tab data to batch, then commit it
@@ -168,10 +204,11 @@ export default class App {
     private checkSessionToken;
     /**
      * start buffering messages without starting the actual session, which gives
-     * user 30 seconds to "activate" and record session by calling `start()` on conditional trigger
+     * user 30 seconds to "activate" and record session by calling `start()` on conditional trigger,
      * and we will then send buffered batch, so it won't get lost
      * */
     coldStart(startOpts?: StartOptions, conditional?: boolean): Promise<void>;
+    private setupConditionalStart;
     onSessionSent: () => void;
     /**
      * Starts offline session recording
@@ -186,7 +223,7 @@ export default class App {
     /**
      * Saves the captured messages in localStorage (or whatever is used in its place)
      *
-     * Then when this.offlineRecording is called, it will preload this messages and clear the storage item
+     * Then, when this.offlineRecording is called, it will preload this messages and clear the storage item
      *
      * Keeping the size of local storage reasonable is up to the end users of this library
      * */
@@ -213,6 +250,8 @@ export default class App {
     onUxtCb: never[];
     addOnUxtCb(cb: (id: number) => void): void;
     getUxtId(): number | null;
+    waitStart(): Promise<unknown>;
+    waitStarted(): Promise<unknown>;
     /**
      * basically we ask other tabs during constructor
      * and here we just apply 10ms delay just in case