@multiplayer-app/session-recorder-react-native 1.0.1-beta.4 → 1.0.1-beta.6

package/src/recorder/index.ts

@@ -1,89 +1,87 @@
-import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { SessionType } from '@multiplayer-app/session-recorder-common';
 // import { pack } from '@rrweb/packer' // Removed to avoid blob creation issues in Hermes
-import { EventExporter } from './eventExporter'
-import { logger } from '../utils'
-import { ScreenRecorder } from './screenRecorder'
-import { GestureRecorder } from './gestureRecorder'
-import { NavigationTracker } from './navigationTracker'
-import { type RecorderConfig, type EventRecorder } from '../types'
-import { type eventWithTime } from '@rrweb/types'
+import { EventExporter } from './eventExporter';
+import { logger } from '../utils';
+import { ScreenRecorder } from './screenRecorder';
+import { GestureRecorder } from './gestureRecorder';
+import { NavigationTracker } from './navigationTracker';
+import { type RecorderConfig, type EventRecorder } from '../types';
+import { type eventWithTime } from '@rrweb/types';
 export class RecorderReactNativeSDK implements EventRecorder {
-  private isRecording = false
-  private config?: RecorderConfig
-  private screenRecorder: ScreenRecorder
-  private gestureRecorder: GestureRecorder
-  private navigationTracker: NavigationTracker
-  private recordedEvents: eventWithTime[] = []
-  private exporter: EventExporter
-  private sessionId: string | null = null
-  private sessionType: SessionType = SessionType.PLAIN
-
+  private isRecording = false;
+  private config?: RecorderConfig;
+  private screenRecorder: ScreenRecorder;
+  private gestureRecorder: GestureRecorder;
+  private navigationTracker: NavigationTracker;
+  private recordedEvents: eventWithTime[] = [];
+  private exporter: EventExporter;
+  private sessionId: string | null = null;
+  private sessionType: SessionType = SessionType.PLAIN;
 
   constructor() {
-    this.screenRecorder = new ScreenRecorder()
-    this.gestureRecorder = new GestureRecorder()
-    this.navigationTracker = new NavigationTracker()
+    this.screenRecorder = new ScreenRecorder();
+    this.gestureRecorder = new GestureRecorder();
+    this.navigationTracker = new NavigationTracker();
     this.exporter = new EventExporter({
       socketUrl: '',
       apiKey: '',
-    })
+    });
   }
 
   init(config: RecorderConfig): void {
-    this.config = config
-    this.screenRecorder.init(config, this)
-    this.navigationTracker.init(config, this.screenRecorder)
-    this.gestureRecorder.init(config, this, this.screenRecorder)
+    this.config = config;
+    this.screenRecorder.init(config, this);
+    this.navigationTracker.init(config, this.screenRecorder);
+    this.gestureRecorder.init(config, this, this.screenRecorder);
 
-    this.exporter.setApiKey(config.apiKey)
-    this.exporter.setSocketUrl(config.apiBaseUrl)
+    this.exporter.setApiKey(config.apiKey);
+    this.exporter.setSocketUrl(config.apiBaseUrl);
   }
 
   setApiKey(apiKey: string): void {
-    this.exporter.setApiKey(apiKey)
+    this.exporter.setApiKey(apiKey);
   }
 
   setSocketUrl(socketUrl: string): void {
-    this.exporter.setSocketUrl(socketUrl)
+    this.exporter.setSocketUrl(socketUrl);
   }
 
   start(sessionId: string | null, sessionType: SessionType): void {
     if (!this.config) {
-      throw new Error('Configuration not initialized. Call init() before start().')
+      throw new Error(
+        'Configuration not initialized. Call init() before start().'
+      );
     }
 
-    this.sessionId = sessionId
-    this.sessionType = sessionType
-    this.isRecording = true
+    this.sessionId = sessionId;
+    this.sessionType = sessionType;
+    this.isRecording = true;
 
     // Emit recording started meta event
 
     if (this.config.recordScreen) {
-      this.screenRecorder.start()
+      this.screenRecorder.start();
     }
 
     if (this.config.recordGestures) {
-      this.gestureRecorder.start()
+      this.gestureRecorder.start();
     }
 
     if (this.config.recordNavigation) {
-      this.navigationTracker.start()
+      this.navigationTracker.start();
     }
-
-
   }
 
   stop(): void {
-    this.isRecording = false
-    this.gestureRecorder.stop()
-    this.navigationTracker.stop()
-    this.screenRecorder.stop()
-    this.exporter?.close()
+    this.isRecording = false;
+    this.gestureRecorder.stop();
+    this.navigationTracker.stop();
+    this.screenRecorder.stop();
+    this.exporter?.close();
   }
 
-
   setNavigationRef(ref: any): void {
-    this.navigationTracker.setNavigationRef(ref)
+    this.navigationTracker.setNavigationRef(ref);
   }
 
   /**
@@ -91,7 +89,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * @param ref - React Native View ref for screen capture
    */
   setViewShotRef(ref: any): void {
-    this.screenRecorder.setViewShotRef(ref)
+    this.screenRecorder.setViewShotRef(ref);
   }
 
   /**
@@ -100,11 +98,11 @@ export class RecorderReactNativeSDK implements EventRecorder {
    */
   recordEvent(event: eventWithTime): void {
     if (!this.isRecording) {
-      return
+      return;
     }
 
     if (this.exporter) {
-      logger.debug('RecorderReactNativeSDK', 'Sending to exporter', event)
+      logger.debug('RecorderReactNativeSDK', 'Sending to exporter', event);
       // Skip packing to avoid blob creation issues in Hermes
       // const packedEvent = pack(event)
       this.exporter.send({
@@ -113,7 +111,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
         timestamp: event.timestamp,
         debugSessionId: this.sessionId,
         debugSessionType: this.sessionType,
-      })
+      });
     }
   }
 
@@ -124,12 +122,17 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * @param target - Target element identifier
    * @param pressure - Touch pressure
    */
-  recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
+  recordTouchStart(
+    x: number,
+    y: number,
+    target?: string,
+    pressure?: number
+  ): void {
     if (!this.isRecording) {
-      return
+      return;
     }
 
-    this.gestureRecorder.recordTouchStart(x, y, target, pressure)
+    this.gestureRecorder.recordTouchStart(x, y, target, pressure);
   }
 
   /**
@@ -139,12 +142,17 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * @param target - Target element identifier
    * @param pressure - Touch pressure
    */
-  recordTouchMove(x: number, y: number, target?: string, pressure?: number): void {
+  recordTouchMove(
+    x: number,
+    y: number,
+    target?: string,
+    pressure?: number
+  ): void {
     if (!this.isRecording) {
-      return
+      return;
     }
 
-    this.gestureRecorder.recordTouchMove(x, y, target, pressure)
+    this.gestureRecorder.recordTouchMove(x, y, target, pressure);
   }
 
   /**
@@ -154,12 +162,17 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * @param target - Target element identifier
    * @param pressure - Touch pressure
    */
-  recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
+  recordTouchEnd(
+    x: number,
+    y: number,
+    target?: string,
+    pressure?: number
+  ): void {
     if (!this.isRecording) {
-      return
+      return;
     }
 
-    this.gestureRecorder.recordTouchEnd(x, y, target, pressure)
+    this.gestureRecorder.recordTouchEnd(x, y, target, pressure);
   }
 
   /**
@@ -167,14 +180,14 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * @returns Array of recorded rrweb events
    */
   getRecordedEvents(): eventWithTime[] {
-    return [...this.recordedEvents]
+    return [...this.recordedEvents];
   }
 
   /**
    * Clear all recorded events
    */
   clearRecordedEvents(): void {
-    this.recordedEvents = []
+    this.recordedEvents = [];
   }
 
   /**
@@ -185,6 +198,6 @@ export class RecorderReactNativeSDK implements EventRecorder {
     return {
       totalEvents: this.recordedEvents.length,
       isRecording: this.isRecording,
-    }
+    };
   }
 }

package/src/recorder/navigationTracker.ts

@@ -1,87 +1,98 @@
-import { type NavigationEvent, type RecorderConfig } from '../types'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-import { logger } from '../utils'
+import { type NavigationEvent, type RecorderConfig } from '../types';
+import { trace, SpanStatusCode } from '@opentelemetry/api';
+import { logger } from '../utils';
 
 export class NavigationTracker {
-  private config?: RecorderConfig
-  private isRecording = false
-  private navigationRef: any = null
-  private navigationListeners: Map<string, any> = new Map()
-  private currentRoute: string | null = null
-  private navigationStack: string[] = []
-  private navigationStartTime: number = 0
-  private screenRecorder?: any // Reference to screen recorder for force capture
+  private config?: RecorderConfig;
+  private isRecording = false;
+  private navigationRef: any = null;
+  private navigationListeners: Map<string, any> = new Map();
+  private currentRoute: string | null = null;
+  private navigationStack: string[] = [];
+  private navigationStartTime: number = 0;
+  private screenRecorder?: any; // Reference to screen recorder for force capture
 
   init(config: RecorderConfig, screenRecorder?: any): void {
-    this.config = config
-    this.screenRecorder = screenRecorder
-    logger.info('NavigationTracker', 'Navigation tracker initialized',
-      { config: this.config, screenRecorder: this.screenRecorder })
+    this.config = config;
+    this.screenRecorder = screenRecorder;
+    logger.info('NavigationTracker', 'Navigation tracker initialized', {
+      config: this.config,
+      screenRecorder: this.screenRecorder,
+    });
   }
 
   setNavigationRef(ref: any): void {
-    this.navigationRef = ref
+    this.navigationRef = ref;
     if (this.isRecording) {
-      this._setupNavigationListener()
+      this._setupNavigationListener();
     }
   }
 
   start(): void {
-    logger.info('NavigationTracker', 'Navigation tracking started')
-    this.isRecording = true
-    this.navigationStack = []
-    this.navigationStartTime = Date.now()
-    this._setupNavigationListener()
+    logger.info('NavigationTracker', 'Navigation tracking started');
+    this.isRecording = true;
+    this.navigationStack = [];
+    this.navigationStartTime = Date.now();
+    this._setupNavigationListener();
     // Navigation tracking started
   }
 
   stop(): void {
-    this.isRecording = false
-    this._removeNavigationListener()
+    this.isRecording = false;
+    this._removeNavigationListener();
     // Navigation tracking stopped
   }
 
   pause(): void {
-    this.isRecording = false
+    this.isRecording = false;
   }
 
   resume(): void {
-    this.isRecording = true
-    this._setupNavigationListener()
+    this.isRecording = true;
+    this._setupNavigationListener();
   }
 
   private _setupNavigationListener(): void {
     if (!this.navigationRef) {
       // Navigation ref not set - silently continue
-      return
+      return;
     }
 
     try {
       // Listen to navigation state changes
-      const stateListener = this.navigationRef.addListener('state', (e: any) => {
-        this._recordNavigationEvent('state_change', e.data)
-      })
+      const stateListener = this.navigationRef.addListener(
+        'state',
+        (e: any) => {
+          this._recordNavigationEvent('state_change', e.data);
+        }
+      );
 
       // Listen to focus events
-      const focusListener = this.navigationRef.addListener('focus', (e: any) => {
-        this._recordNavigationEvent('focus', e.data)
-      })
+      const focusListener = this.navigationRef.addListener(
+        'focus',
+        (e: any) => {
+          this._recordNavigationEvent('focus', e.data);
+        }
+      );
 
       // Listen to blur events
       const blurListener = this.navigationRef.addListener('blur', (e: any) => {
-        this._recordNavigationEvent('blur', e.data)
-      })
+        this._recordNavigationEvent('blur', e.data);
+      });
 
       // Listen to beforeRemove events
-      const beforeRemoveListener = this.navigationRef.addListener('beforeRemove', (e: any) => {
-        this._recordNavigationEvent('beforeRemove', e.data)
-      })
+      const beforeRemoveListener = this.navigationRef.addListener(
+        'beforeRemove',
+        (e: any) => {
+          this._recordNavigationEvent('beforeRemove', e.data);
+        }
+      );
 
       // Store listeners for cleanup
-      this.navigationListeners.set('state', stateListener)
-      this.navigationListeners.set('focus', focusListener)
-      this.navigationListeners.set('blur', blurListener)
-      this.navigationListeners.set('beforeRemove', beforeRemoveListener)
+      this.navigationListeners.set('state', stateListener);
+      this.navigationListeners.set('focus', focusListener);
+      this.navigationListeners.set('blur', blurListener);
+      this.navigationListeners.set('beforeRemove', beforeRemoveListener);
 
       // Navigation listeners setup complete
     } catch (error) {
@@ -94,10 +105,10 @@ export class NavigationTracker {
       // Remove all listeners
       this.navigationListeners.forEach((listener, _) => {
         if (listener && typeof listener.remove === 'function') {
-          listener.remove()
+          listener.remove();
         }
-      })
-      this.navigationListeners.clear()
+      });
+      this.navigationListeners.clear();
       // Navigation listeners removed
     } catch (error) {
       // Failed to remove navigation listeners - silently continue
@@ -106,38 +117,49 @@ export class NavigationTracker {
 
   private _getFriendlyRouteTitle(): string | null {
     try {
-      const current = this.navigationRef?.getCurrentRoute?.()
-      if (!current) return null
+      const current = this.navigationRef?.getCurrentRoute?.();
+      if (!current) return null;
       // Prefer a title set via navigation.setOptions({ title }) if present in params
-      const titleFromParams = (current.params && (current.params as any).title) as string | undefined
+      const titleFromParams = (current.params &&
+        (current.params as any).title) as string | undefined;
       if (titleFromParams && typeof titleFromParams === 'string') {
-        return titleFromParams
+        return titleFromParams;
       }
 
       // Fallback to a prettified route name (handles Expo Router style names like 'user-posts/[id]')
       if (current.name && typeof current.name === 'string') {
-        const raw = current.name as string
+        const raw = current.name as string;
         // Remove group segments like "(tabs)/" at the beginning
-        const withoutGroups = raw.replace(/^\([^)]*\)\//, '')
+        const withoutGroups = raw.replace(/^\([^)]*\)\//, '');
         // Take last path segment (e.g., 'user-posts/[id]' -> '[id]' is removed later, 'post/[id]' -> 'post')
-        const lastSegment = withoutGroups.split('/').filter(Boolean).slice(-2).join(' ')
+        const lastSegment = withoutGroups
+          .split('/')
+          .filter(Boolean)
+          .slice(-2)
+          .join(' ');
         // Remove dynamic segments like '[id]'
-        const withoutParams = lastSegment.replace(/\[[^\]]+\]/g, '').trim()
+        const withoutParams = lastSegment.replace(/\[[^\]]+\]/g, '').trim();
         // Replace dashes/underscores with spaces and collapse spaces
-        const spaced = withoutParams.replace(/[-_]+/g, ' ').replace(/\s+/g, ' ').trim()
+        const spaced = withoutParams
+          .replace(/[-_]+/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim();
         // Title case
-        const titleCase = spaced.split(' ').map(w => w ? (w.charAt(0).toUpperCase() + w.slice(1)) : w).join(' ')
-        return titleCase || raw
+        const titleCase = spaced
+          .split(' ')
+          .map((w) => (w ? w.charAt(0).toUpperCase() + w.slice(1) : w))
+          .join(' ');
+        return titleCase || raw;
       }
 
-      return null
+      return null;
     } catch {
-      return null
+      return null;
     }
   }
 
   private _recordNavigationEvent(eventType: string, data: any): void {
-    if (!this.isRecording) return
+    if (!this.isRecording) return;
 
     const event: NavigationEvent = {
       type: 'navigate',
@@ -147,74 +169,75 @@ export class NavigationTracker {
         navigationDuration: Date.now() - this.navigationStartTime,
         stackDepth: this.navigationStack.length,
       },
-    }
+    };
 
-    const currentRoute = this.navigationRef?.getCurrentRoute?.() || {}
-    const friendlyTitle = this._getFriendlyRouteTitle()
-    const routeName = data?.routeName || currentRoute?.name
-    const params = data?.params || currentRoute?.params
-    const key = data?.key || currentRoute?.key
+    const currentRoute = this.navigationRef?.getCurrentRoute?.() || {};
+    const friendlyTitle = this._getFriendlyRouteTitle();
+    const routeName = data?.routeName || currentRoute?.name;
+    const params = data?.params || currentRoute?.params;
+    const key = data?.key || currentRoute?.key;
 
     if (routeName) {
-      event.routeName = routeName
-      this._updateNavigationStack(routeName, eventType)
+      event.routeName = routeName;
+      this._updateNavigationStack(routeName, eventType);
     }
     if (params) {
-      event.params = params
+      event.params = params;
     }
     if (key) {
-      event.metadata!.routeKey = key
+      event.metadata!.routeKey = key;
     }
     if (friendlyTitle) {
-      event.metadata!.friendlyRouteName = friendlyTitle
+      event.metadata!.friendlyRouteName = friendlyTitle;
     }
-    this._recordOpenTelemetrySpan(event)
+    this._recordOpenTelemetrySpan(event);
 
     // Force screen capture on navigation events
     // this.screenRecorder?.forceCapture(event.timestamp)
   }
 
-
   private _updateNavigationStack(routeName: string, eventType: string): void {
     if (eventType === 'focus' || eventType === 'state_change') {
       if (this.currentRoute !== routeName) {
-        this.currentRoute = routeName
-        this.navigationStack.push(routeName)
+        this.currentRoute = routeName;
+        this.navigationStack.push(routeName);
       }
     } else if (eventType === 'blur' || eventType === 'beforeRemove') {
-      const index = this.navigationStack.indexOf(routeName)
+      const index = this.navigationStack.indexOf(routeName);
       if (index > -1) {
-        this.navigationStack.splice(index, 1)
+        this.navigationStack.splice(index, 1);
       }
     }
   }
 
   private _recordOpenTelemetrySpan(event: NavigationEvent): void {
     try {
-      const span = trace.getTracer('navigation').startSpan(`Navigation.${event.type}`, {
-        attributes: {
-          'navigation.system': 'ReactNavigation',
-          'navigation.operation': event.type,
-          'navigation.type': event.type,
-          'navigation.timestamp': event.timestamp,
-          'navigation.platform': 'react-native',
-        },
-      })
+      const span = trace
+        .getTracer('navigation')
+        .startSpan(`Navigation.${event.type}`, {
+          attributes: {
+            'navigation.system': 'ReactNavigation',
+            'navigation.operation': event.type,
+            'navigation.type': event.type,
+            'navigation.timestamp': event.timestamp,
+            'navigation.platform': 'react-native',
+          },
+        });
 
       if (event.routeName) {
-        span.setAttribute('navigation.route_name', event.routeName)
+        span.setAttribute('navigation.route_name', event.routeName);
       }
       if (event.params) {
-        span.setAttribute('navigation.params', JSON.stringify(event.params))
+        span.setAttribute('navigation.params', JSON.stringify(event.params));
       }
       if (event.metadata) {
         Object.entries(event.metadata).forEach(([key, value]) => {
-          span.setAttribute(`navigation.metadata.${key}`, String(value))
-        })
+          span.setAttribute(`navigation.metadata.${key}`, String(value));
+        });
       }
 
-      span.setStatus({ code: SpanStatusCode.OK })
-      span.end()
+      span.setStatus({ code: SpanStatusCode.OK });
+      span.end();
     } catch (error) {
       // Failed to record OpenTelemetry span for navigation - silently continue
     }
@@ -222,24 +245,24 @@ export class NavigationTracker {
 
   // Get current navigation state
   getCurrentRoute(): string | null {
-    return this.currentRoute
+    return this.currentRoute;
   }
 
   getNavigationStack(): string[] {
-    return [...this.navigationStack]
+    return [...this.navigationStack];
   }
 
   getNavigationDepth(): number {
-    return this.navigationStack.length
+    return this.navigationStack.length;
   }
 
   // Get recording status
   isRecordingEnabled(): boolean {
-    return this.isRecording
+    return this.isRecording;
   }
 
   // Get navigation duration
   getNavigationDuration(): number {
-    return Date.now() - this.navigationStartTime
+    return Date.now() - this.navigationStartTime;
   }
 }