@repliqo/sdk-react-native 0.2.0 → 0.2.2

package/android/src/main/java/com/repliqo/screencapture/FullContentCapture.java

@@ -103,6 +103,17 @@ public class FullContentCapture {
                 return viewportFallback(activity);
             }
 
+            // Force the content view to measure and layout at its full
+            // height. React Native's ScrollView optimization may skip
+            // laying out off-screen children, causing draw() to only
+            // render the visible portion. This forces a full layout pass.
+            int widthSpec = View.MeasureSpec.makeMeasureSpec(
+                    contentWidth, View.MeasureSpec.EXACTLY);
+            int heightSpec = View.MeasureSpec.makeMeasureSpec(
+                    captureHeight, View.MeasureSpec.EXACTLY);
+            contentView.measure(widthSpec, heightSpec);
+            contentView.layout(0, 0, contentWidth, captureHeight);
+
             // Create bitmap — wrapped in OOM catch
             Bitmap bitmap;
             try {
@@ -120,6 +131,10 @@ public class FullContentCapture {
             // Draw the full content
             contentView.draw(canvas);
 
+            // Restore the original layout so the UI isn't affected.
+            // requestLayout triggers an async re-layout on the next frame.
+            contentView.requestLayout();
+
             // Compress to JPEG
             ByteArrayOutputStream baos = new ByteArrayOutputStream();
             bitmap.compress(Bitmap.CompressFormat.JPEG, JPEG_QUALITY, baos);

package/dist/core/client.js

@@ -54,7 +54,8 @@ class AppAnalytics {
         }
         // Screen capture manager for heatmap backgrounds.
         // Captures full ScrollView content on screen enter (24h cache).
-        if (this.config.enableSnapshots) {
+        // Independent of session replay snapshots.
+        if (this.config.enableHeatmapCapture) {
             this.screenCaptureManager = new ScreenCaptureManager_1.ScreenCaptureManager((screenName, image, width, height, isFullContent) => this.apiClient.uploadScreenCapture(screenName, image, width, height, isFullContent), this.config.debug);
         }
         if (this.config.enableCrashTracking) {

package/dist/core/config.js

@@ -19,6 +19,7 @@ exports.DEFAULT_CONFIG = {
     snapshotFlushInterval: 15000,
     // ~32 * 30KB ≈ 1 MB cap on in-memory buffer if the backend is down.
     snapshotMaxBufferSize: 32,
+    enableHeatmapCapture: true,
     enableCrashTracking: true,
     debug: false,
 };

package/dist/snapshot/ScreenCaptureManager.d.ts

@@ -1,15 +1,17 @@
-type UploadFn = (screenName: string, image: string, width: number, height: number, isFullContent: boolean) => Promise<void>;
+export type UploadFn = (screenName: string, image: string, width: number, height: number, isFullContent: boolean) => Promise<void>;
 /**
  * Manages full-content screen captures for heatmap backgrounds.
  *
  * - Captures the full ScrollView content on screen enter
  * - Local cache with 24h TTL to avoid redundant captures
+ * - Cancels pending captures when navigating away (prevents cross-screen bugs)
  * - Async and non-blocking: never delays navigation or crashes the app
- * - Independent of the session replay snapshot system
  */
 export declare class ScreenCaptureManager {
     private cache;
     private pending;
+    private pendingTimer;
+    private currentScreen;
     private uploadFn;
     private debug;
     constructor(uploadFn: UploadFn, debug?: boolean);
@@ -17,15 +19,12 @@ export declare class ScreenCaptureManager {
      * Called when the user enters a screen. Schedules a full-content
      * capture after a delay if no recent capture exists.
      *
-     * Fire-and-forget: never awaited by the caller, never throws.
+     * Cancels any pending capture from a previous screen to prevent
+     * cross-screen data corruption (capturing screen B but labeling as A).
      */
     onScreenEnter(screenName: string): void;
-    /**
-     * Check if a capture is needed for this screen.
-     */
     private shouldCapture;
     private captureAndUpload;
-    /** Reset the cache (e.g. on session end). */
+    private cancelPending;
     reset(): void;
 }
-export {};

package/dist/snapshot/ScreenCaptureManager.js

@@ -6,18 +6,22 @@ const NativeScreenCapture_1 = require("./NativeScreenCapture");
 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 /** Wait for screen to render before capturing. */
 const RENDER_DELAY_MS = 800;
+/** Max base64 size to upload (3MB base64 ≈ ~2.2MB binary). */
+const MAX_IMAGE_SIZE = 3 * 1024 * 1024;
 /**
  * Manages full-content screen captures for heatmap backgrounds.
  *
  * - Captures the full ScrollView content on screen enter
  * - Local cache with 24h TTL to avoid redundant captures
+ * - Cancels pending captures when navigating away (prevents cross-screen bugs)
  * - Async and non-blocking: never delays navigation or crashes the app
- * - Independent of the session replay snapshot system
  */
 class ScreenCaptureManager {
     constructor(uploadFn, debug = false) {
         this.cache = new Map();
         this.pending = new Set();
+        this.pendingTimer = null;
+        this.currentScreen = null;
         this.uploadFn = uploadFn;
         this.debug = debug;
     }
@@ -25,26 +29,32 @@ class ScreenCaptureManager {
      * Called when the user enters a screen. Schedules a full-content
      * capture after a delay if no recent capture exists.
      *
-     * Fire-and-forget: never awaited by the caller, never throws.
+     * Cancels any pending capture from a previous screen to prevent
+     * cross-screen data corruption (capturing screen B but labeling as A).
      */
     onScreenEnter(screenName) {
+        // Cancel any pending capture from the previous screen
+        this.cancelPending();
+        this.currentScreen = screenName;
         if (!this.shouldCapture(screenName))
             return;
-        // Mark as pending to avoid duplicate captures from rapid navigation
         this.pending.add(screenName);
-        // Delay to let the screen render completely (animations, data loading)
-        setTimeout(() => {
+        this.pendingTimer = setTimeout(() => {
+            this.pendingTimer = null;
+            // Verify the user is STILL on this screen before capturing
+            if (this.currentScreen !== screenName) {
+                this.pending.delete(screenName);
+                if (this.debug) {
+                    console.log(`[Repliqo] Screen capture skipped: navigated away from "${screenName}"`);
+                }
+                return;
+            }
             this.captureAndUpload(screenName).catch(() => { });
         }, RENDER_DELAY_MS);
     }
-    /**
-     * Check if a capture is needed for this screen.
-     */
     shouldCapture(screenName) {
-        // Already capturing this screen
         if (this.pending.has(screenName))
             return false;
-        // Check local cache TTL
         const lastCapture = this.cache.get(screenName);
         if (lastCapture && Date.now() - lastCapture < CACHE_TTL_MS) {
             return false;
@@ -60,13 +70,25 @@ class ScreenCaptureManager {
                 }
                 return;
             }
+            // Guard: check we're still on the same screen after the async capture
+            if (this.currentScreen !== screenName) {
+                if (this.debug) {
+                    console.log(`[Repliqo] Screen capture discarded: user left "${screenName}" during capture`);
+                }
+                return;
+            }
+            // Guard: reject oversized images to prevent OOM during upload
+            if (result.image.length > MAX_IMAGE_SIZE) {
+                if (this.debug) {
+                    console.warn(`[Repliqo] Screen capture too large (${Math.round(result.image.length / 1024)}KB), skipping "${screenName}"`);
+                }
+                return;
+            }
             if (this.debug) {
                 console.log(`[Repliqo] Screen captured: "${screenName}" ${result.width}x${result.height} ` +
-                    `(fullContent=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`);
+                    `(full=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`);
             }
-            // Upload to backend (fire-and-forget, errors are swallowed)
             await this.uploadFn(screenName, result.image, result.width, result.height, result.isFullContent);
-            // Update local cache
             this.cache.set(screenName, Date.now());
             if (this.debug) {
                 console.log(`[Repliqo] Screen capture uploaded: "${screenName}"`);
@@ -81,10 +103,17 @@ class ScreenCaptureManager {
             this.pending.delete(screenName);
         }
     }
-    /** Reset the cache (e.g. on session end). */
+    cancelPending() {
+        if (this.pendingTimer !== null) {
+            clearTimeout(this.pendingTimer);
+            this.pendingTimer = null;
+        }
+    }
     reset() {
+        this.cancelPending();
         this.cache.clear();
         this.pending.clear();
+        this.currentScreen = null;
     }
 }
 exports.ScreenCaptureManager = ScreenCaptureManager;

package/dist/types/events.d.ts

@@ -47,6 +47,8 @@ export interface SDKConfig {
     snapshotFlushInterval?: number;
     /** Max snapshots kept in memory if the backend is unreachable. Defaults to 32. */
     snapshotMaxBufferSize?: number;
+    /** Enable full-content screen captures for heatmap backgrounds. Defaults to true when enableSnapshots is true. */
+    enableHeatmapCapture?: boolean;
     enableCrashTracking?: boolean;
     debug?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repliqo/sdk-react-native",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Session replay & analytics SDK for React Native. Captures screenshots (including modals/alerts), navigation, screen visits, and custom events.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/core/client.ts

@@ -98,7 +98,8 @@ export class AppAnalytics {
 
     // Screen capture manager for heatmap backgrounds.
     // Captures full ScrollView content on screen enter (24h cache).
-    if (this.config.enableSnapshots) {
+    // Independent of session replay snapshots.
+    if (this.config.enableHeatmapCapture) {
       this.screenCaptureManager = new ScreenCaptureManager(
         (screenName, image, width, height, isFullContent) =>
           this.apiClient.uploadScreenCapture(

package/src/core/config.ts

@@ -18,6 +18,7 @@ export const DEFAULT_CONFIG: Required<Omit<SDKConfig, 'apiKey' | 'appId'>> = {
   snapshotFlushInterval: 15000,
   // ~32 * 30KB ≈ 1 MB cap on in-memory buffer if the backend is down.
   snapshotMaxBufferSize: 32,
+  enableHeatmapCapture: true,
   enableCrashTracking: true,
   debug: false,
 };

package/src/snapshot/ScreenCaptureManager.ts

@@ -1,4 +1,4 @@
-import { captureFullContent, type FullContentResult } from './NativeScreenCapture';
+import { captureFullContent } from './NativeScreenCapture';
 
 /** 24 hours in milliseconds. */
 const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
@@ -6,7 +6,10 @@ const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 /** Wait for screen to render before capturing. */
 const RENDER_DELAY_MS = 800;
 
-type UploadFn = (
+/** Max base64 size to upload (3MB base64 ≈ ~2.2MB binary). */
+const MAX_IMAGE_SIZE = 3 * 1024 * 1024;
+
+export type UploadFn = (
   screenName: string,
   image: string,
   width: number,
@@ -19,12 +22,14 @@ type UploadFn = (
  *
  * - Captures the full ScrollView content on screen enter
  * - Local cache with 24h TTL to avoid redundant captures
+ * - Cancels pending captures when navigating away (prevents cross-screen bugs)
  * - Async and non-blocking: never delays navigation or crashes the app
- * - Independent of the session replay snapshot system
  */
 export class ScreenCaptureManager {
   private cache = new Map<string, number>();
   private pending = new Set<string>();
+  private pendingTimer: ReturnType<typeof setTimeout> | null = null;
+  private currentScreen: string | null = null;
   private uploadFn: UploadFn;
   private debug: boolean;
 
@@ -37,28 +42,37 @@ export class ScreenCaptureManager {
    * Called when the user enters a screen. Schedules a full-content
    * capture after a delay if no recent capture exists.
    *
-   * Fire-and-forget: never awaited by the caller, never throws.
+   * Cancels any pending capture from a previous screen to prevent
+   * cross-screen data corruption (capturing screen B but labeling as A).
    */
   onScreenEnter(screenName: string): void {
+    // Cancel any pending capture from the previous screen
+    this.cancelPending();
+    this.currentScreen = screenName;
+
     if (!this.shouldCapture(screenName)) return;
 
-    // Mark as pending to avoid duplicate captures from rapid navigation
     this.pending.add(screenName);
 
-    // Delay to let the screen render completely (animations, data loading)
-    setTimeout(() => {
+    this.pendingTimer = setTimeout(() => {
+      this.pendingTimer = null;
+      // Verify the user is STILL on this screen before capturing
+      if (this.currentScreen !== screenName) {
+        this.pending.delete(screenName);
+        if (this.debug) {
+          console.log(
+            `[Repliqo] Screen capture skipped: navigated away from "${screenName}"`,
+          );
+        }
+        return;
+      }
       this.captureAndUpload(screenName).catch(() => {});
     }, RENDER_DELAY_MS);
   }
 
-  /**
-   * Check if a capture is needed for this screen.
-   */
   private shouldCapture(screenName: string): boolean {
-    // Already capturing this screen
     if (this.pending.has(screenName)) return false;
 
-    // Check local cache TTL
     const lastCapture = this.cache.get(screenName);
     if (lastCapture && Date.now() - lastCapture < CACHE_TTL_MS) {
       return false;
@@ -77,14 +91,33 @@ export class ScreenCaptureManager {
         return;
       }
 
+      // Guard: check we're still on the same screen after the async capture
+      if (this.currentScreen !== screenName) {
+        if (this.debug) {
+          console.log(
+            `[Repliqo] Screen capture discarded: user left "${screenName}" during capture`,
+          );
+        }
+        return;
+      }
+
+      // Guard: reject oversized images to prevent OOM during upload
+      if (result.image.length > MAX_IMAGE_SIZE) {
+        if (this.debug) {
+          console.warn(
+            `[Repliqo] Screen capture too large (${Math.round(result.image.length / 1024)}KB), skipping "${screenName}"`,
+          );
+        }
+        return;
+      }
+
       if (this.debug) {
         console.log(
           `[Repliqo] Screen captured: "${screenName}" ${result.width}x${result.height} ` +
-            `(fullContent=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`,
+            `(full=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`,
         );
       }
 
-      // Upload to backend (fire-and-forget, errors are swallowed)
       await this.uploadFn(
         screenName,
         result.image,
@@ -93,7 +126,6 @@ export class ScreenCaptureManager {
         result.isFullContent,
       );
 
-      // Update local cache
       this.cache.set(screenName, Date.now());
 
       if (this.debug) {
@@ -108,9 +140,17 @@ export class ScreenCaptureManager {
     }
   }
 
-  /** Reset the cache (e.g. on session end). */
+  private cancelPending(): void {
+    if (this.pendingTimer !== null) {
+      clearTimeout(this.pendingTimer);
+      this.pendingTimer = null;
+    }
+  }
+
   reset(): void {
+    this.cancelPending();
     this.cache.clear();
     this.pending.clear();
+    this.currentScreen = null;
   }
 }

package/src/types/events.ts

@@ -53,6 +53,8 @@ export interface SDKConfig {
   snapshotFlushInterval?: number;
   /** Max snapshots kept in memory if the backend is unreachable. Defaults to 32. */
   snapshotMaxBufferSize?: number;
+  /** Enable full-content screen captures for heatmap backgrounds. Defaults to true when enableSnapshots is true. */
+  enableHeatmapCapture?: boolean;
   enableCrashTracking?: boolean;
   debug?: boolean;
 }