iidrak-analytics-react 1.2.8 → 1.2.9

package/README.md

@@ -19,7 +19,7 @@ This package relies on several peer dependencies for device info, storage, and s
 npm install iidrak-analytics-react
 
 # Install required peer dependencies
-npm install @react-native-async-storage/async-storage @react-native-community/netinfo react-native-device-info react-native-view-shot
+npm install @react-native-async-storage/async-storage @react-native-community/netinfo react-native-device-info react-native-view-shot react-native-safe-area-context
 ```
 
 **iOS Users**: after installing, remember to run:
@@ -137,7 +137,25 @@ Though `MetaStreamProvider` captures the video, you can manually log screen view
 tracker.screen("HomeScreen", {});
 ```
 
-### 4. Shopping Cart
+### 4. Privacy & Redaction
+
+To protect sensitive user data (PII) like passwords or credit card numbers during session replay, wrap your sensitive components with the `<Redact>` component.
+
+```javascript
+import { Redact } from 'iidrak-analytics-react';
+
+<Redact>
+  <TextInput
+    placeholder="Enter Password"
+    secureTextEntry={true}
+    onChangeText={setPassword}
+  />
+</Redact>
+```
+
+This ensures the wrapped area is covered by a privacy mask in the recorded video, while remaining fully functional for the user.
+
+### 5. Shopping Cart
 
 Manage a persistent shopping cart state:
 

package/index.d.ts

@@ -1 +1,15 @@
-declare module 'MetaStreamIO';
+declare module 'iidrak-analytics-react' {
+    import { Component } from 'react';
+    import { ViewStyle } from 'react-native';
+
+    export class MetaStreamIO {
+        constructor(config: any);
+        start_session(options?: any): any;
+        trackEvent(options: any): void;
+        // Add other methods as needed
+    }
+
+    export class MetaStreamProvider extends Component<{ tracker: MetaStreamIO, children?: any, style?: ViewStyle }> { }
+
+    export class Redact extends Component<{ children: any, style?: ViewStyle }> { }
+}

package/index.js

@@ -1,4 +1,6 @@
 import MetaStreamIO from "./metastreamio/metastreamio.interface.js";
 import { MetaStreamProvider } from "./metastreamio/metastreamio.provider.js";
 
-export { MetaStreamIO, MetaStreamProvider };
+import Redact from "./metastreamio/components/Redact.js";
+
+export { MetaStreamIO, MetaStreamProvider, Redact };

package/metastreamio/components/Redact.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { MetaStreamContext } from '../metastreamio.provider';
+
+const generateId = () => {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+};
+
+/**
+ * Redact Component
+ * 
+ * Wraps sensitive UI elements and registers their coordinates with the MetaStreamIORecorder.
+ * The recorder will then send these coordinates to the server (or mask them locally) so that 
+ * sensitive data is not stored/viewable in session replays.
+ * 
+ * Usage:
+ * <Redact>
+ *   <Text>Sensitive Data</Text>
+ * </Redact>
+ */
+class Redact extends Component {
+    static contextType = MetaStreamContext;
+
+    constructor(props) {
+        super(props);
+        this.id = generateId();
+        this.viewRef = React.createRef();
+    }
+
+    componentDidMount() {
+        // Registration is handled by onLayout
+    }
+
+    componentWillUnmount() {
+        this.unregister();
+    }
+
+    register() {
+        const { tracker } = this.context || {};
+        if (tracker && tracker.recorder) {
+            // We pass the ref so the recorder can measure it on demand
+            tracker.recorder.addPrivacyZone(this.id, this.viewRef.current);
+        }
+    }
+
+    unregister() {
+        const { tracker } = this.context || {};
+        if (tracker && tracker.recorder) {
+            tracker.recorder.removePrivacyZone(this.id);
+        }
+    }
+
+    render() {
+        const { children, style } = this.props;
+        // Check if context is available. If not, just render children without redaction logic to avoid crash.
+        // But for development we might want to warn.
+
+        return (
+            <View ref={this.viewRef} testID={this.id} style={[{ opacity: 1 }, style]} collapsable={false} onLayout={() => this.register()}>
+                {children}
+            </View>
+        );
+    }
+}
+
+export default Redact;

package/metastreamio/metastreamio.provider.js

@@ -1,7 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, createContext } from 'react';
 import { View, StyleSheet, Dimensions } from 'react-native';
 import ViewShot from 'react-native-view-shot';
 
+const MetaStreamContext = createContext(null);
+
 class MetaStreamProvider extends Component {
     constructor(props) {
         super(props);
@@ -27,16 +29,18 @@ class MetaStreamProvider extends Component {
         const { children, style } = this.props;
 
         return (
-            <ViewShot ref={this.viewShotRef} style={{ flex: 1 }} options={{ format: "jpg", quality: 0.3 }}>
-                <View
-                    style={[styles.container, style]}
-                    onTouchStart={(e) => this.handleTouch(e, 'touch_start')}
-                    onTouchMove={(e) => this.handleTouch(e, 'touch_move')}
-                    onTouchEnd={(e) => this.handleTouch(e, 'touch_end')}
-                >
-                    {children}
-                </View>
-            </ViewShot>
+            <MetaStreamContext.Provider value={{ tracker: this.props.tracker }}>
+                <ViewShot ref={this.viewShotRef} style={{ flex: 1 }} options={{ format: "jpg", quality: 0.3 }}>
+                    <View
+                        style={[styles.container, style]}
+                        onTouchStart={(e) => this.handleTouch(e, 'touch_start')}
+                        onTouchMove={(e) => this.handleTouch(e, 'touch_move')}
+                        onTouchEnd={(e) => this.handleTouch(e, 'touch_end')}
+                    >
+                        {children}
+                    </View>
+                </ViewShot>
+            </MetaStreamContext.Provider>
         );
     }
 }
@@ -47,4 +51,4 @@ const styles = StyleSheet.create({
     }
 });
 
-export { MetaStreamProvider };
+export { MetaStreamProvider, MetaStreamContext };

package/metastreamio/metastreamio.recorder.js

@@ -2,7 +2,8 @@
 
 import { strf } from "./string.format.js";
 import { captureRef } from "react-native-view-shot";
-import { Platform, Dimensions } from "react-native";
+import { Platform, Dimensions, Keyboard, StatusBar } from "react-native";
+import { initialWindowMetrics } from "react-native-safe-area-context";
 
 strf();
 
@@ -29,12 +30,102 @@ class MetaStreamIORecorder {
         // Priority: config.appName > user.user_id > config.app_id > "default"
         this.app_id = config.appName ? config.appName : ((user && user.user_id) ? user.user_id : (config.app_id || "default"));
         this.lastBase64 = null;
+        this.privacyZones = new Map();
     }
 
     setSessionId(id) {
         this.sessionId = id;
     }
 
+    addPrivacyZone(id, ref) {
+        if (id && ref) {
+            this.privacyZones.set(id, ref);
+        }
+    }
+
+    removePrivacyZone(id) {
+        if (id) {
+            this.privacyZones.delete(id);
+        }
+    }
+
+    async measurePrivacyZones(rootViewRef) {
+        if (!rootViewRef || !rootViewRef.current) return [];
+
+        const zones = [];
+
+        // Measure root view to get its page offset (position on screen)
+        // using measureInWindow first as it handles viewport clipping/resize better on Android
+        const rootMetrics = await new Promise(resolve => {
+            try {
+                if (rootViewRef.current.measureInWindow) {
+                    rootViewRef.current.measureInWindow((x, y, width, height) => {
+                        resolve({ width, height, pageX: x, pageY: y });
+                    });
+                } else {
+                    rootViewRef.current.measure((x, y, width, height, pageX, pageY) => {
+                        resolve({ width, height, pageX, pageY });
+                    });
+                }
+            } catch (e) {
+                resolve(null);
+            }
+        });
+
+        const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+        const { height: fullScreenHeight } = Dimensions.get('screen');
+
+        // Calculate visible height. If keyboard is open, the visible area is reduced.
+        // We subtract Insets (Top/Status + Bottom/Nav) and KeyboardHeight.
+        // This ensures baseH represents the actual "Visible View Content Height", matching the capture.
+        // This fixes both Macro shifts and Micro gaps (e.g. Nav Bar gap).
+        const insets = initialWindowMetrics ? initialWindowMetrics.insets : { top: 0, bottom: 0 };
+        const effectiveHeight = (this.keyboardHeight && this.keyboardHeight > 0)
+            ? Math.min(screenHeight, fullScreenHeight - this.keyboardHeight - insets.top - insets.bottom)
+            : screenHeight;
+
+        // Fallback or use root metrics, clamped to effective visible height
+        const baseW = (rootMetrics && rootMetrics.width > 0) ? Math.min(rootMetrics.width, screenWidth) : screenWidth;
+        const baseH = (rootMetrics && rootMetrics.height > 0) ? Math.min(rootMetrics.height, effectiveHeight) : effectiveHeight;
+        // Force 0 offset to avoid shifting redaction up if measure reports a top offset (e.g. status bar)
+        const baseX = 0;
+        const baseY = 0;
+
+        const promises = Array.from(this.privacyZones.entries()).map(([id, ref]) => {
+            return new Promise((resolve) => {
+                if (!ref || !ref.measure) {
+                    resolve(null);
+                    return;
+                }
+                try {
+                    ref.measure((x, y, width, height, pageX, pageY) => {
+                        if (baseW <= 0 || baseH <= 0) { resolve(null); return; }
+
+                        // Relative calculation: (ItemPageY - RootPageY) / RootHeight
+                        const relX = (pageX - baseX) / baseW;
+                        const relY = (pageY - baseY) / baseH;
+                        const relW = width / baseW;
+                        const relH = height / baseH;
+
+                        resolve({
+                            id,
+                            x: relX,
+                            y: relY,
+                            width: relW,
+                            height: relH
+                        });
+                    });
+                } catch (e) {
+                    resolve(null);
+                }
+            });
+        });
+
+        const results = await Promise.all(promises);
+        return results.filter(r => r !== null);
+    }
+
+
     async startRecording(viewRef) {
         if (this.isRecording || !this.sessionId || !this.endpoint) {
             if (!this.endpoint) this.logger.warn("recorder", "No recording endpoint configured");
@@ -86,6 +177,9 @@ class MetaStreamIORecorder {
             clearInterval(this.intervalId);
             this.intervalId = null;
         }
+        if (this.keyboardShowListener && this.keyboardShowListener.remove) this.keyboardShowListener.remove();
+        if (this.keyboardHideListener && this.keyboardHideListener.remove) this.keyboardHideListener.remove();
+
         this.isRecording = false;
         this.logger.log("recorder", "Stopped recording");
     }
@@ -93,6 +187,16 @@ class MetaStreamIORecorder {
     startLoop(viewRef) {
         const intervalMs = 1000 / this.fps;
         this.lastUploadTime = 0;
+
+        // Track keyboard height to fix redaction alignment issues when 'window' dimensions are stale
+        this.keyboardHeight = 0;
+        this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
+            this.keyboardHeight = e.endCoordinates.height;
+        });
+        this.keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
+            this.keyboardHeight = 0;
+        });
+
         console.log("Starting loop");
         this.intervalId = setInterval(async () => {
             if (!viewRef.current) return;
@@ -101,10 +205,15 @@ class MetaStreamIORecorder {
                 // Capture as base64 for comparison and direct upload
                 // Resize to width 400px (height maintained automatically) to reduce size
                 // Use PNG to ensure deterministic output for diffing
+                // Use screen dimensions to prevent zooming when keyboard opens
+                // Use screen dimensions to prevent zooming when keyboard opens
+                // width: 360, height implicitly calculated to preserve aspect ratio
+                const captureWidth = 360;
+
                 const base64 = await captureRef(viewRef, {
                     format: "jpg",
                     quality: this.quality,
-                    width: 350,
+                    width: captureWidth,
                     result: "base64"
                 });
 
@@ -129,8 +238,11 @@ class MetaStreamIORecorder {
                 const timeSinceLastUpload = (now - this.lastUploadTime) / 1000;
 
                 if (!isDuplicate || timeSinceLastUpload > 5.0) {
-                    console.log("DBG:: Uploading frame");
-                    this.uploadFrame(base64, isDuplicate);
+                    // Measure privacy zones
+                    const zones = await this.measurePrivacyZones(viewRef);
+
+                    console.log("DBG:: Uploading frame with " + zones.length + " privacy zones");
+                    this.uploadFrame(base64, isDuplicate, zones);
                     this.lastUploadTime = now;
                     this.lastBase64 = base64;
                 }
@@ -140,7 +252,7 @@ class MetaStreamIORecorder {
         }, intervalMs);
     }
 
-    async uploadFrame(data, isDuplicate) {
+    async uploadFrame(data, isDuplicate, privacyZones = []) {
         if (!this.recorderSessionId) return;
 
         const formData = new FormData();
@@ -150,6 +262,10 @@ class MetaStreamIORecorder {
         formData.append('timestamp', String(timestamp));
         formData.append('duration', String(duration));
 
+        if (privacyZones && privacyZones.length > 0) {
+            formData.append('privacy_zones', JSON.stringify(privacyZones));
+        }
+
         if (isDuplicate) {
             formData.append('is_duplicate', 'true');
         } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iidrak-analytics-react",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "react native client for metastreamio",
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.2.0",
@@ -8,11 +8,11 @@
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-device-info": ">=10.0.0",
-    "react-native-view-shot": ">=3.0.0"
+    "react-native-view-shot": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "dependencies": {
-    "string-format": "^0.5.0",
-    "uuid": "^8.3.2"
+    "string-format": "^0.5.0"
   },
   "main": "index.js",
   "repository": "https://github.com/analyticsdept/metastreamio-reactjs.git",