@checkflow/sdk 1.0.4 → 1.0.6

package/dist/analytics-tracker.d.ts

@@ -69,10 +69,13 @@ export declare class AnalyticsTracker {
     private lastScrollTime;
     private isFirstPageView;
     private performanceObserver?;
+    private recordingUploadTimer;
+    private readonly RECORDING_UPLOAD_INTERVAL;
     constructor(apiClient: APIClient, options?: Partial<AnalyticsOptions>);
     startTracking(): Promise<void>;
     stopTracking(): Promise<void>;
     private saveSessionRecording;
+    private setupPeriodicRecordingUpload;
     private createSession;
     private updateSessionEnd;
     private setupEventListeners;
@@ -88,6 +91,7 @@ export declare class AnalyticsTracker {
     private setupSPATracking;
     private setupPerformanceTracking;
     private trackPageView;
+    private capturePageScreenshotForHeatmap;
     private trackPageLoadPerformance;
     private queueInteraction;
     private flushInteractions;

package/dist/index.esm.js

@@ -608,14 +608,40 @@ async function captureScreenshot(options = {}) {
         }
         // Mask elements if specified
         const maskedElements = [];
-        if (options.maskElements) {
-            options.maskElements.forEach((selector) => {
-                document.querySelectorAll(selector).forEach((el) => {
-                    maskedElements.push({ element: el, innerHTML: el.innerHTML });
-                    el.innerHTML = '••••••••';
-                });
+        // Default sensitive selectors to mask
+        const defaultMaskSelectors = [
+            'input[type="password"]',
+            'input[type="email"]',
+            'input[type="tel"]',
+            'input[name*="password"]',
+            'input[name*="email"]',
+            'input[name*="phone"]',
+            'input[placeholder*="password"]',
+            'input[placeholder*="email"]',
+            'textarea[name*="message"]',
+            '[data-sensitive]'
+        ];
+        const maskSelectors = [...defaultMaskSelectors, ...(options.maskElements || [])];
+        maskSelectors.forEach((selector) => {
+            document.querySelectorAll(selector).forEach((el) => {
+                maskedElements.push({ element: el, innerHTML: el.innerHTML });
+                // Mask based on element type
+                if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
+                    const input = el;
+                    if (input.value) {
+                        input.setAttribute('data-original-value', input.value);
+                        input.value = '*'.repeat(Math.min(input.value.length, 8));
+                    }
+                }
+                else {
+                    // Mask text content
+                    const text = el.textContent || '';
+                    if (text.trim()) {
+                        el.innerHTML = '*'.repeat(Math.min(text.length, 10));
+                    }
+                }
             });
-        }
+        });
         // Wait for delay if specified
         if (options.delay) {
             await new Promise((resolve) => setTimeout(resolve, options.delay));
@@ -635,7 +661,17 @@ async function captureScreenshot(options = {}) {
         });
         // Restore masked elements
         maskedElements.forEach(({ element, innerHTML }) => {
-            element.innerHTML = innerHTML;
+            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+                const input = element;
+                const originalValue = input.getAttribute('data-original-value');
+                if (originalValue) {
+                    input.value = originalValue;
+                    input.removeAttribute('data-original-value');
+                }
+            }
+            else {
+                element.innerHTML = innerHTML;
+            }
         });
         // Convert to base64
         const quality = (options.quality || 80) / 100;
@@ -723,6 +759,14 @@ class ContextCapture {
     }
 }
 
+var contextCapture = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContextCapture: ContextCapture,
+    capturePageContext: capturePageContext,
+    capturePerformance: capturePerformance,
+    captureScreenshot: captureScreenshot
+});
+
 /**
  * Error Capture Module
  * Automatic error capture and reporting
@@ -2898,7 +2942,7 @@ class SessionRecording {
             const isSensitive = this.isSensitiveElement(target);
             this.addEvent('input', {
                 selector: this.getElementSelector(target),
-                value: isSensitive ? '••••••••' : target.value?.substring(0, 100),
+                value: isSensitive ? '********' : target.value?.substring(0, 100),
                 type: target.type || 'text',
             });
         };
@@ -3481,6 +3525,9 @@ class AnalyticsTracker {
         this.scrollEvents = 0;
         this.lastScrollTime = 0;
         this.isFirstPageView = true;
+        // Session recording upload timer (every 10 minutes)
+        this.recordingUploadTimer = null;
+        this.RECORDING_UPLOAD_INTERVAL = 10 * 60 * 1000; // 10 minutes
         // ==================== Private Methods - Event Handlers ====================
         this.handleClick = (event) => {
             const target = event.target;
@@ -3562,6 +3609,7 @@ class AnalyticsTracker {
             this.queueInteraction(interaction);
         };
         this.handlePageUnload = () => {
+            console.log('🎬 [AnalyticsTracker] Page unload detected - saving session recording and interactions');
             // Send any pending interactions synchronously
             if (this.interactionBuffer.length > 0) {
                 // Use sendBeacon for reliable delivery
@@ -3571,11 +3619,51 @@ class AnalyticsTracker {
                     navigator.sendBeacon(url, data);
                 }
             }
+            // Save session recording synchronously before page unloads
+            try {
+                const checkflowInstance = window.checkflow;
+                if (checkflowInstance?.sessionRecording) {
+                    const recordingData = checkflowInstance.sessionRecording.getRecordingData();
+                    if (recordingData && recordingData.events.length > 0) {
+                        console.log('🎬 [AnalyticsTracker] Sending session recording via sendBeacon', {
+                            eventCount: recordingData.events.length,
+                            duration: recordingData.duration
+                        });
+                        // Send recording data via sendBeacon
+                        const recordingPayload = JSON.stringify({
+                            events: recordingData.events,
+                            durationMs: recordingData.duration * 1000
+                        });
+                        const recordingUrl = `${this.apiClient.getBaseUrl()}/api/v1/analytics/sessions/${this.sessionId}/recording`;
+                        if (navigator.sendBeacon) {
+                            const success = navigator.sendBeacon(recordingUrl, recordingPayload);
+                            console.log('🎬 [AnalyticsTracker] sendBeacon recording result:', success);
+                        }
+                    }
+                    else {
+                        console.warn('🎬 [AnalyticsTracker] No recording events to save on unload');
+                    }
+                }
+                else {
+                    console.warn('🎬 [AnalyticsTracker] No session recording instance found on unload');
+                }
+            }
+            catch (error) {
+                console.error('🎬 [AnalyticsTracker] Failed to save recording on unload:', error);
+            }
         };
         this.handleVisibilityChange = () => {
             if (document.hidden) {
-                // Page became hidden - flush interactions
+                console.log('🎬 [AnalyticsTracker] Tab became hidden - saving data immediately');
+                // Page became hidden - flush interactions AND save session recording
                 this.flushInteractions();
+                // Save session recording immediately when tab becomes hidden
+                this.saveSessionRecording().catch(error => {
+                    console.warn('🎬 [AnalyticsTracker] Failed to save recording on visibility change:', error);
+                });
+            }
+            else {
+                console.log('🎬 [AnalyticsTracker] Tab became visible again');
             }
         };
         this.apiClient = apiClient;
@@ -3610,6 +3698,8 @@ class AnalyticsTracker {
             this.setupEventListeners();
             // Track initial page view
             this.trackPageView();
+            // Start periodic session recording upload timer (every 10 minutes)
+            this.setupPeriodicRecordingUpload();
             this.isActive = true;
             this.log('Analytics tracking started', { sessionId: this.sessionId });
         }
@@ -3635,6 +3725,10 @@ class AnalyticsTracker {
                 clearTimeout(this.batchTimer);
                 this.batchTimer = null;
             }
+            if (this.recordingUploadTimer) {
+                clearInterval(this.recordingUploadTimer);
+                this.recordingUploadTimer = null;
+            }
             // Stop performance observer
             if (this.performanceObserver) {
                 this.performanceObserver.disconnect();
@@ -3697,6 +3791,24 @@ class AnalyticsTracker {
         }
     }
     // ==================== Private Methods - Session Management ====================
+    setupPeriodicRecordingUpload() {
+        console.log('🎬 [AnalyticsTracker] Setting up periodic recording upload (every 10 minutes)');
+        this.recordingUploadTimer = window.setInterval(async () => {
+            try {
+                console.log('🎬 [AnalyticsTracker] Periodic upload triggered');
+                await this.saveSessionRecording();
+                // Clear events from recording to avoid duplicate uploads
+                const checkflowInstance = window.checkflow;
+                if (checkflowInstance?.sessionRecording) {
+                    checkflowInstance.sessionRecording.clearEvents();
+                    console.log('🎬 [AnalyticsTracker] Cleared recording events after upload');
+                }
+            }
+            catch (error) {
+                console.error('🎬 [AnalyticsTracker] Periodic recording upload failed:', error);
+            }
+        }, this.RECORDING_UPLOAD_INTERVAL);
+    }
     async createSession() {
         const sessionData = {
             sessionId: this.sessionId,
@@ -3827,7 +3939,7 @@ class AnalyticsTracker {
             this.log('Performance tracking setup failed:', error);
         }
     }
-    trackPageView() {
+    async trackPageView() {
         const loadTime = this.isFirstPageView ? this.getPageLoadTime() : undefined;
         const domReadyTime = this.isFirstPageView ? this.getDOMReadyTime() : undefined;
         const interaction = {
@@ -3841,6 +3953,30 @@ class AnalyticsTracker {
         this.isFirstPageView = false;
         // Reset scroll tracking for new page
         this.scrollEvents = 0;
+        // Capture page screenshot for heatmap background (async, don't wait)
+        this.capturePageScreenshotForHeatmap().catch(error => {
+            console.warn('🖼️ [AnalyticsTracker] Page screenshot capture failed:', error);
+        });
+    }
+    async capturePageScreenshotForHeatmap() {
+        try {
+            console.log('🖼️ [AnalyticsTracker] Capturing page screenshot for heatmap...');
+            // Dynamic import of html2canvas to avoid bundle bloat
+            const { captureScreenshot } = await Promise.resolve().then(function () { return contextCapture; });
+            const screenshot = await captureScreenshot({
+                quality: 60, // Lower quality for heatmap backgrounds
+                fullPage: false, // Capture viewport only for consistency
+            });
+            if (screenshot) {
+                // Upload screenshot to backend for heatmap association
+                await this.apiClient.uploadScreenshotOnly(screenshot, window.location.href);
+                console.log('🖼️ [AnalyticsTracker] Page screenshot uploaded for heatmap');
+            }
+        }
+        catch (error) {
+            // Don't throw - screenshot capture is optional for heatmaps
+            console.warn('🖼️ [AnalyticsTracker] Could not capture page screenshot:', error);
+        }
     }
     trackPageLoadPerformance(timing) {
         const loadTime = Math.round(timing.loadEventEnd - timing.loadEventStart);