@multiplayer-app/session-recorder-react-native 0.0.1-beta.1 → 0.0.1-beta.11

package/dist/utils/viewHierarchyTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewHierarchyTracker.js","sourceRoot":"","sources":["../../src/utils/viewHierarchyTracker.ts"],"names":[],"mappings":"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"}

package/ios/SessionRecorderNative.m

@@ -0,0 +1,17 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(SessionRecorderNative, NSObject)
+
+RCT_EXTERN_METHOD(captureAndMask:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(captureAndMaskWithOptions:(NSDictionary *)options
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+
+@end

package/ios/SessionRecorderNative.podspec

@@ -0,0 +1,26 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "SessionRecorderNative"
+  s.version      = package["version"]
+  s.summary      = "Native session recorder module for React Native"
+  s.description  = "A native module that provides session recording with automatic masking of sensitive UI elements"
+  s.homepage     = "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript"
+  s.license      = "MIT"
+  s.authors      = { "Multiplayer Software, Inc." => "https://www.multiplayer.app" }
+  s.platforms    = { :ios => "12.0" }
+  s.source       = { :git => "https://github.com/multiplayer-app/multiplayer-session-recorder-javascript.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.requires_arc = true
+
+  s.dependency "React-Core"
+  s.dependency "React"
+
+  # Ensure proper linking for Expo
+  s.pod_target_xcconfig = {
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/React-Core/React\""
+  }
+end

package/ios/SessionRecorderNative.swift

@@ -0,0 +1,205 @@
+import UIKit
+import React
+
+@objc(SessionRecorderNative)
+class SessionRecorderNative: NSObject {
+
+  @objc func captureAndMask(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking to sensitive elements
+      let maskedImage = self.applyMasking(to: image, in: window)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  @objc func captureAndMaskWithOptions(_ options: NSDictionary, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    DispatchQueue.main.async {
+      guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+        reject("NO_WINDOW", "Unable to get key window", nil)
+        return
+      }
+
+      UIGraphicsBeginImageContextWithOptions(window.bounds.size, false, UIScreen.main.scale)
+      window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
+      let screenshot = UIGraphicsGetImageFromCurrentImageContext()
+      UIGraphicsEndImageContext()
+
+      guard let image = screenshot else {
+        reject("CAPTURE_FAILED", "Failed to capture screen", nil)
+        return
+      }
+
+      // Apply masking with custom options
+      let maskedImage = self.applyMaskingWithOptions(to: image, in: window, options: options)
+
+      if let data = maskedImage.jpegData(compressionQuality: 0.5) {
+        let base64 = data.base64EncodedString()
+        resolve(base64)
+      } else {
+        reject("ENCODING_FAILED", "Failed to encode image", nil)
+      }
+    }
+  }
+
+  private func applyMasking(to image: UIImage, in window: UIWindow) -> UIImage {
+    return applyMaskingWithOptions(to: image, in: window, options: [:])
+  }
+
+  private func applyMaskingWithOptions(to image: UIImage, in window: UIWindow, options: NSDictionary) -> UIImage {
+    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
+    guard let context = UIGraphicsGetCurrentContext() else { return image }
+
+    // Draw the original image
+    image.draw(in: CGRect(origin: .zero, size: image.size))
+
+    // Find and mask sensitive elements
+    let sensitiveElements = findSensitiveElements(in: window)
+
+    for element in sensitiveElements {
+      let frame = element.frame
+      let maskingType = getMaskingType(for: element)
+
+      switch maskingType {
+      case .blur:
+        applyBlurMask(in: context, frame: frame)
+      case .rectangle:
+        applyRectangleMask(in: context, frame: frame)
+      case .pixelate:
+        applyPixelateMask(in: context, frame: frame, image: image)
+      case .none:
+        break
+      }
+    }
+
+    let maskedImage = UIGraphicsGetImageFromCurrentImageContext() ?? image
+    UIGraphicsEndImageContext()
+
+    return maskedImage
+  }
+
+  private func findSensitiveElements(in view: UIView) -> [UIView] {
+    var sensitiveElements: [UIView] = []
+
+    func traverseView(_ view: UIView) {
+      // Check if this view should be masked
+      if shouldMaskView(view) {
+        sensitiveElements.append(view)
+      }
+
+      // Recursively check subviews
+      for subview in view.subviews {
+        traverseView(subview)
+      }
+    }
+
+    traverseView(view)
+    return sensitiveElements
+  }
+
+  private func shouldMaskView(_ view: UIView) -> Bool {
+    // Check for UITextField - mask all text fields when inputMasking is enabled
+    if view is UITextField {
+      return true
+    }
+
+    // Check for UITextView - mask all text views when inputMasking is enabled
+    if view is UITextView {
+      return true
+    }
+
+    return false
+  }
+
+  private func getMaskingType(for view: UIView) -> MaskingType {
+    // Default masking type for all text inputs
+    return .rectangle
+  }
+
+  private func applyBlurMask(in context: CGContext, frame: CGRect) {
+    // Create a blur effect
+    context.setFillColor(UIColor.black.withAlphaComponent(0.8).cgColor)
+    context.fill(frame)
+
+    // Add some noise to make it look blurred
+    context.setFillColor(UIColor.white.withAlphaComponent(0.3).cgColor)
+    for _ in 0..<20 {
+      let randomX = frame.origin.x + CGFloat.random(in: 0...frame.width)
+      let randomY = frame.origin.y + CGFloat.random(in: 0...frame.height)
+      let randomSize = CGFloat.random(in: 2...8)
+      context.fillEllipse(in: CGRect(x: randomX, y: randomY, width: randomSize, height: randomSize))
+    }
+  }
+
+  private func applyRectangleMask(in context: CGContext, frame: CGRect) {
+    // Simple rectangle fill
+    context.setFillColor(UIColor.gray.cgColor)
+    context.fill(frame)
+
+    // Add some text-like pattern
+    context.setFillColor(UIColor.darkGray.cgColor)
+    let lineHeight: CGFloat = 4
+    let spacing: CGFloat = 8
+
+    for i in stride(from: frame.origin.y + spacing, to: frame.origin.y + frame.height - spacing, by: lineHeight + spacing) {
+      let lineWidth = CGFloat.random(in: frame.width * 0.3...frame.width * 0.8)
+      let lineX = frame.origin.x + CGFloat.random(in: 0...(frame.width - lineWidth))
+      context.fill(CGRect(x: lineX, y: i, width: lineWidth, height: lineHeight))
+    }
+  }
+
+  private func applyPixelateMask(in context: CGContext, frame: CGRect, image: UIImage) {
+    // Create a pixelated effect
+    let pixelSize: CGFloat = 8
+    let pixelCountX = Int(frame.width / pixelSize)
+    let pixelCountY = Int(frame.height / pixelSize)
+
+    for x in 0..<pixelCountX {
+      for y in 0..<pixelCountY {
+        let pixelFrame = CGRect(
+          x: frame.origin.x + CGFloat(x) * pixelSize,
+          y: frame.origin.y + CGFloat(y) * pixelSize,
+          width: pixelSize,
+          height: pixelSize
+        )
+
+        // Use a random color for each pixel
+        let randomColor = UIColor(
+          red: CGFloat.random(in: 0...1),
+          green: CGFloat.random(in: 0...1),
+          blue: CGFloat.random(in: 0...1),
+          alpha: 1.0
+        )
+        context.setFillColor(randomColor.cgColor)
+        context.fill(pixelFrame)
+      }
+    }
+  }
+}
+
+private enum MaskingType {
+  case blur
+  case rectangle
+  case pixelate
+  case none
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -21,10 +21,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./expo": {
-      "import": "./dist/expo.js",
-      "require": "./dist/expo.js"
-    }
+    "./app.plugin.js": "./app.plugin.js"
   },
   "engines": {
     "node": ">=18",
@@ -86,11 +83,29 @@
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.9.0",
-    "expo": ">=49.0.0 <54.0.0",
     "react": ">=18.0.0 <20.0.0",
-    "react-native": ">=0.72.0 <0.82.0"
+    "react-native": ">=0.72.0 <0.82.0",
+    "react-native-svg": "^15.13.0"
   },
   "optionalDependencies": {
     "expo-constants": "^15.0.0"
+  },
+  "react-native": {
+    "ios": {
+      "podspecPath": "./SessionRecorderNative.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    }
+  },
+  "expo": {
+    "ios": {
+      "podspecPath": "./SessionRecorderNative.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependencies: {
+    '@multiplayer-app/session-recorder-react-native': {
+      platforms: {
+        android: {
+          sourceDir: './android',
+          packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
+        },
+        ios: {
+          podspecPath: './SessionRecorderNative.podspec'
+        }
+      }
+    }
+  }
+}

package/RRWEB_INTEGRATION.md

@@ -1,336 +0,0 @@
-# RRWeb Integration for React Native Session Recorder
-
-This document explains the rrweb-compatible event generation system implemented for React Native session recording.
-
-## Overview
-
-The React Native session recorder automatically generates rrweb-compatible events that can be replayed using standard rrweb players. **No manual intervention is required** - the system automatically captures:
-
-1. **Screen snapshots** as `FullSnapshotEvent` with base64-encoded images (periodic + on interaction)
-2. **Touch interactions** as `IncrementalSnapshotEvent` with `MouseInteraction` data (automatic)
-3. **Navigation events** and other user interactions (automatic)
-
-**Recording starts automatically when you call `sessionRecorder.start()` and stops when you call `sessionRecorder.stop()`.**
-
-### 🚀 **Smart Change Detection**
-
-The system now includes **intelligent change detection** that prevents duplicate events:
-
-- **Automatic Comparison**: Each screen capture is compared with the previous one
-- **Hash-Based Detection**: Uses lightweight hashing to detect changes quickly
-- **Skip Unchanged Screens**: Only sends events when the screen actually changes
-- **Touch-Triggered Capture**: Forces capture after touch interactions regardless of change detection
-
-## Architecture
-
-### Core Components
-
-1. **RRWeb Types** (`src/types/rrweb.ts`)
-
-   - Complete TypeScript definitions for rrweb events
-   - React Native specific types for screen and touch data
-
-2. **SessionRecorder** (`src/session-recorder.ts`)
-
-   - Main entry point with `recordEvent()` method for custom events
-   - Automatic touch recording (internal methods)
-   - Automatic screen capture coordination
-
-3. **ScreenRecorder** (`src/recorder/screenRecorder.ts`)
-
-   - Captures screenshots and converts to `FullSnapshotEvent`
-   - Creates virtual DOM with `<img>` elements containing base64 screenshots
-
-4. **GestureRecorder** (`src/recorder/gestureRecorder.ts`)
-
-   - Automatically converts touch events to rrweb `MouseInteraction` events
-   - Maps React Native coordinates to rrweb format
-   - Sets up automatic touch capture on session start
-
-5. **TouchEventCapture** (`src/context/SessionRecorderContext.tsx`)
-   - React component that automatically captures touch events
-   - No manual setup required - works automatically when session is active
-
-## Event Types Generated
-
-### FullSnapshotEvent
-
-```typescript
-{
-  type: EventType.FullSnapshot,
-  data: {
-    node: {
-      type: 1, // Element node
-      id: 1,
-      tagName: 'div',
-      attributes: { style: 'width: 375px; height: 667px; position: relative;' },
-      childNodes: [{
-        type: 1,
-        id: 2,
-        tagName: 'img',
-        attributes: {
-          src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...',
-          width: '375',
-          height: '667',
-          style: 'width: 375px; height: 667px;'
-        }
-      }]
-    },
-    initialOffset: { left: 0, top: 0 }
-  },
-  timestamp: 1640995200000
-}
-```
-
-### IncrementalSnapshotEvent (Touch Interactions)
-
-```typescript
-{
-  type: EventType.IncrementalSnapshot,
-  data: {
-    source: IncrementalSource.MouseInteraction,
-    type: MouseInteractionType.TouchStart, // or TouchMove, TouchEnd
-    id: 2, // References the image node ID
-    x: 150,
-    y: 200
-  },
-  timestamp: 1640995201000
-}
-```
-
-## Usage
-
-### Basic Setup (Automatic Recording)
-
-```typescript
-import { SessionRecorderProvider } from '@multiplayer-app/session-recorder-react-native'
-
-function App() {
-  return (
-    <SessionRecorderProvider
-      options={{
-        apiKey: 'your-api-key',
-        version: '1.0.0',
-        application: 'MyApp',
-        environment: 'production',
-        recordScreen: true, // Automatic screen capture
-        recordGestures: true // Automatic touch recording
-      }}
-    >
-      <YourAppContent />
-    </SessionRecorderProvider>
-  )
-}
-```
-
-**That's it!** Recording is now automatic. When you start a session, the system will:
-
-- Automatically capture screen snapshots periodically
-- Automatically record all touch interactions
-- Generate rrweb-compatible events without any manual intervention
-
-### Custom Event Recording (Optional)
-
-```typescript
-import { useSessionRecorder } from '@multiplayer-app/session-recorder-react-native'
-
-function MyComponent() {
-  const { client } = useSessionRecorder()
-
-  const handleCustomEvent = () => {
-    // Record a custom rrweb event (optional)
-    client.recordEvent({
-      type: EventType.Custom,
-      data: { customData: 'value' },
-      timestamp: Date.now()
-    })
-  }
-
-  return <Button onPress={handleCustomEvent} title='Record Custom Event' />
-}
-```
-
-## Integration Points
-
-### Screen Capture Integration
-
-The `ScreenRecorder` class now includes **complete react-native-view-shot integration**:
-
-```typescript
-// In screenRecorder.ts - _captureScreenBase64 method
-private async _captureScreenBase64(): Promise<string | null> {
-  try {
-    if (!this.viewShotRef) {
-      console.warn('ViewShot ref not available for screen capture')
-      return null
-    }
-
-    // Capture the screen using react-native-view-shot
-    const result = await captureRef(this.viewShotRef, {
-      format: this.captureFormat,
-      quality: this.captureQuality,
-      result: 'base64'
-    })
-
-    return result
-  } catch (error) {
-    console.error('Failed to capture screen:', error)
-    return null
-  }
-}
-```
-
-**The ViewShot ref is automatically set up** in the `TouchEventCapture` component, so no manual configuration is needed!
-
-### Automatic ViewShot Setup
-
-The `TouchEventCapture` component automatically sets up the ViewShot ref:
-
-```typescript
-// In SessionRecorderContext.tsx
-const TouchEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const context = useContext(SessionRecorderContext)
-  const viewShotRef = useRef<View>(null)
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref && context?.client) {
-      context.client.setViewShotRef?.(ref)
-    }
-  }
-
-  return (
-    <View
-      ref={(ref) => {
-        viewShotRef.current = ref
-        setViewShotRef(ref)
-      }}
-      style={{ flex: 1 }}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      {children}
-    </View>
-  )
-}
-```
-
-This ensures that:
-
-- The same View that captures touch events is used for screen capture
-- Perfect synchronization between touch interactions and screen captures
-- No manual ref setup required
-
-### Required Dependencies
-
-Add these to your `package.json`:
-
-```json
-{
-  "dependencies": {
-    "react-native-view-shot": "^3.8.0"
-  }
-}
-```
-
-## Automatic Event Flow
-
-1. **Session Start**: `SessionRecorder.start()` automatically initializes all recorders
-2. **Automatic Screen Capture**: `ScreenRecorder` automatically captures screenshots periodically + on interactions
-3. **Automatic Touch Events**: `TouchEventCapture` automatically captures all touch interactions
-4. **Automatic Event Generation**: Touch events are automatically converted to rrweb `MouseInteraction` events
-5. **Automatic Event Recording**: All events are automatically stored and can be exported
-
-**No manual intervention required!** The entire process is automatic once you start a session.
-
-## Customization
-
-### Screen Capture Frequency
-
-```typescript
-// Adjust capture interval in ScreenRecorder
-screenRecorder.setCaptureInterval(3000) // Capture every 3 seconds
-```
-
-### Change Detection Configuration
-
-```typescript
-// Enable/disable change detection
-screenRecorder.setChangeDetection(true) // Default: true
-
-// Adjust hash sample size for change detection
-screenRecorder.setHashSampleSize(200) // Default: 100 characters
-
-// Force capture (bypasses change detection)
-screenRecorder.forceCapture()
-```
-
-### Touch Event Throttling
-
-```typescript
-// Adjust gesture throttling in GestureRecorder
-gestureRecorder.setGestureThrottle(100) // Throttle to 100ms
-```
-
-### Event Filtering
-
-You can filter events by modifying the `recordEvent` method in `SessionRecorder`:
-
-```typescript
-recordEvent(event: RRWebEvent): void {
-  if (!this._isInitialized || this.sessionState !== SessionState.started) {
-    return
-  }
-
-  // Add custom filtering logic here
-  if (event.type === EventType.IncrementalSnapshot) {
-    // Filter out certain touch events if needed
-  }
-
-  this._recorder.recordEvent(event)
-}
-```
-
-## Exporting Events
-
-To export recorded events for rrweb playback:
-
-```typescript
-const events = sessionRecorder.getRecordedEvents()
-// Save events to file or send to server
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Screen capture not working**: Ensure `react-native-view-shot` is properly installed and configured
-2. **Touch events not recorded**: Check that `TouchEventCapture` wraps your app content
-3. **Events not generated**: Verify session is in `started` state
-
-### Debug Mode
-
-Enable debug logging by setting:
-
-```typescript
-// In your app configuration
-console.log('Recording stats:', sessionRecorder.getRecordingStats())
-```
-
-## Future Enhancements
-
-- [ ] Support for multiple screen orientations
-- [ ] Gesture recognition and classification
-- [ ] Performance optimization for large sessions
-- [ ] Integration with additional React Native libraries
-- [ ] Custom event types for React Native specific interactions
-
-## Compatibility
-
-This implementation is compatible with:
-
-- rrweb 1.x and 2.x
-- React Native 0.60+
-- iOS and Android platforms
-- Standard rrweb players and replay tools