@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1

package/src/sessionRecorder.ts

@@ -0,0 +1,367 @@
+import { SessionRecorderOptions, RecorderConfig, TracerReactNativeConfig } from './types'
+import { TracerReactNativeSDK } from './otel'
+import { RecorderReactNativeSDK } from './recorder'
+import { ApiService } from './services/api.service'
+import { StorageService } from './services/storage.service'
+import {
+  SessionType,
+} from '@multiplayer-app/session-recorder-common'
+
+// Define these locally since they're not exported from common
+export enum SessionState {
+  started = '2',
+  paused = '1',
+  stopped = '0',
+}
+
+export interface ISession {
+  id: string
+  shortId: string
+  type: SessionType
+  state: SessionState
+  createdAt: string
+  updatedAt: string
+  tempApiKey?: string
+  metadata?: Record<string, any>
+}
+
+export class SessionRecorder {
+  private _configs: SessionRecorderOptions | null = null
+  private _tracer: TracerReactNativeSDK
+  private _recorder: RecorderReactNativeSDK
+  private _apiService: ApiService
+  private _storageService: StorageService
+  private _session: ISession | null = null
+  private _isInitialized = false
+
+  constructor() {
+    this._tracer = new TracerReactNativeSDK()
+    this._recorder = new RecorderReactNativeSDK()
+    this._apiService = new ApiService()
+    this._storageService = new StorageService()
+  }
+
+  async init(options: SessionRecorderOptions): Promise<void> {
+    if (this._isInitialized) {
+      console.warn('SessionRecorder already initialized')
+      return
+    }
+
+    this._configs = options
+
+    // Initialize tracer
+    const tracerConfig: TracerReactNativeConfig = {
+      apiKey: options.apiKey,
+      application: options.application,
+      version: options.version,
+      environment: options.environment,
+      exporterEndpoint: options.exporterEndpoint,
+      ignoreUrls: options.ignoreUrls,
+      captureBody: options.captureBody,
+      captureHeaders: options.captureHeaders,
+      sampleTraceRatio: options.sampleTraceRatio,
+      httpMasking: options.httpMasking,
+    }
+
+    this._tracer.init(tracerConfig)
+
+    // Initialize recorder
+    const recorderConfig: RecorderConfig = {
+      apiKey: options.apiKey,
+      apiBaseUrl: options.apiBaseUrl,
+      recordScreen: options.recordScreen,
+      recordGestures: options.recordGestures,
+      recordNavigation: options.recordNavigation,
+
+    }
+
+    this._recorder.init(recorderConfig)
+
+    // Initialize API service
+    this._apiService.init(options)
+
+    this._isInitialized = true
+    console.log('SessionRecorder initialized successfully')
+  }
+
+  async start(sessionId?: string, sessionType: SessionType = SessionType.PLAIN): Promise<void> {
+    if (!this._isInitialized) {
+      throw new Error('SessionRecorder not initialized. Call init() first.')
+    }
+
+    if (!this._configs) {
+      throw new Error('Configuration not found')
+    }
+
+    try {
+      // Create or use existing session
+      if (sessionId) {
+        this._session = {
+          id: sessionId,
+          shortId: sessionId.substring(0, 8),
+          type: sessionType,
+          state: SessionState.started,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        }
+      } else {
+        // Start new session via API
+        this._session = await this._apiService.startSession({
+          application: this._configs.application,
+          version: this._configs.version,
+          environment: this._configs.environment,
+        })
+      }
+
+      if (!this._session) {
+        throw new Error('Failed to create session')
+      }
+
+      // Set session ID in tracer
+      this._tracer.setSessionId(this._session.id, this._session.type)
+
+      // Start recording
+      this._recorder.start(this._session.id, this._session.type)
+
+      // Save session data
+      await this._storageService.saveSessionId(this._session.id)
+      await this._storageService.saveSessionType(this._session.type)
+      await this._storageService.saveSessionState(this._session.state)
+      await this._storageService.saveSessionObject(this._session)
+
+      console.log('Session started:', this._session.id)
+    } catch (error) {
+      console.error('Failed to start session:', error)
+      throw error
+    }
+  }
+
+  async stop(): Promise<void> {
+    if (!this._isInitialized || !this._session) {
+      console.warn('Session not active')
+      return
+    }
+
+    try {
+      // Stop recording
+      this._recorder.stop()
+
+      // Update session state
+      this._session.state = SessionState.stopped
+      this._session.updatedAt = new Date().toISOString()
+
+      // Save updated session
+      await this._storageService.saveSessionState(this._session.state)
+      await this._storageService.saveSessionObject(this._session)
+
+      // Stop session via API
+      await this._apiService.stopSession({
+        sessionId: this._session.id,
+      })
+
+      console.log('Session stopped:', this._session.id)
+    } catch (error) {
+      console.error('Failed to stop session:', error)
+      throw error
+    }
+  }
+
+  async pause(): Promise<void> {
+    if (!this._isInitialized || !this._session) {
+      console.warn('Session not active')
+      return
+    }
+
+    try {
+      // Pause recording
+      this._recorder.pause()
+
+      // Update session state
+      this._session.state = SessionState.paused
+      this._session.updatedAt = new Date().toISOString()
+
+      // Save updated session
+      await this._storageService.saveSessionState(this._session.state)
+      await this._storageService.saveSessionObject(this._session)
+
+      console.log('Session paused:', this._session.id)
+    } catch (error) {
+      console.error('Failed to pause session:', error)
+      throw error
+    }
+  }
+
+  async resume(): Promise<void> {
+    if (!this._isInitialized || !this._session) {
+      console.warn('Session not active')
+      return
+    }
+
+    try {
+      // Resume recording
+      this._recorder.resume()
+
+      // Update session state
+      this._session.state = SessionState.started
+      this._session.updatedAt = new Date().toISOString()
+
+      // Save updated session
+      await this._storageService.saveSessionState(this._session.state)
+      await this._storageService.saveSessionObject(this._session)
+
+      console.log('Session resumed:', this._session.id)
+    } catch (error) {
+      console.error('Failed to resume session:', error)
+      throw error
+    }
+  }
+
+  async cancel(): Promise<void> {
+    if (!this._isInitialized || !this._session) {
+      console.warn('Session not active')
+      return
+    }
+
+    try {
+      // Stop recording
+      this._recorder.stop()
+
+      // Clear session data
+      await this._storageService.clearSessionData()
+
+      // Cancel session via API
+      await this._apiService.stopSession({
+        sessionId: this._session.id,
+      })
+
+      this._session = null
+      console.log('Session cancelled')
+    } catch (error) {
+      console.error('Failed to cancel session:', error)
+      throw error
+    }
+  }
+
+  async save(): Promise<void> {
+    if (!this._isInitialized || !this._session) {
+      console.warn('Session not active')
+      return
+    }
+
+    try {
+      // Save session via API
+      await this._apiService.saveSession(this._session.id)
+
+      console.log('Session saved:', this._session.id)
+    } catch (error) {
+      console.error('Failed to save session:', error)
+      throw error
+    }
+  }
+
+  // Navigation methods
+  setNavigationRef(ref: any): void {
+    if (this._isInitialized) {
+      this._tracer.setNavigationRef(ref)
+      this._recorder.setNavigationRef(ref)
+    }
+  }
+
+  // Gesture methods
+  enableGestureTracking(): void {
+    if (this._isInitialized) {
+      this._tracer.enableGestureTracking()
+    }
+  }
+
+  disableGestureTracking(): void {
+    if (this._isInitialized) {
+      this._tracer.disableGestureTracking()
+    }
+  }
+
+  // Manual recording methods
+  recordTap(x: number, y: number, target?: string): void {
+    if (this._isInitialized) {
+      this._tracer.recordTap(x, y, target)
+    }
+  }
+
+  recordSwipe(direction: string, target?: string): void {
+    if (this._isInitialized) {
+      this._tracer.recordSwipe(direction, target)
+    }
+  }
+
+  recordNavigate(routeName: string, params?: Record<string, any>): void {
+    if (this._isInitialized) {
+      this._tracer.recordNavigate(routeName, params)
+    }
+  }
+
+  recordGoBack(): void {
+    if (this._isInitialized) {
+      this._tracer.recordGoBack()
+    }
+  }
+
+  // Session attributes
+  setSessionAttribute(key: string, value: any): void {
+    if (this._session) {
+      if (!this._session.metadata) {
+        this._session.metadata = {}
+      }
+      this._session.metadata[key] = value
+      this._session.updatedAt = new Date().toISOString()
+    }
+  }
+
+  getSessionAttribute(key: string): any {
+    return this._session?.metadata?.[key]
+  }
+
+  // Get current session
+  getCurrentSession(): ISession | null {
+    return this._session
+  }
+
+  // Get session data from storage
+  async getStoredSessionData(): Promise<{
+    sessionId: string | null
+    sessionType: SessionType | null
+    sessionState: SessionState | null
+    sessionObject: ISession | null
+  }> {
+    return await this._storageService.getAllSessionData()
+  }
+
+  // Performance monitoring methods
+  startTrace(name: string, attributes?: Record<string, any>): any {
+    if (this._isInitialized) {
+      return this._tracer.startTrace(name, attributes)
+    }
+    return null
+  }
+
+  endTrace(span: any, status?: any): void {
+    if (this._isInitialized && span) {
+      this._tracer.endTrace(span, status)
+    }
+  }
+
+  captureException(error: Error, context?: Record<string, any>): void {
+    if (this._isInitialized) {
+      this._tracer.captureException(error, context)
+    }
+  }
+
+  // Shutdown
+  async shutdown(): Promise<void> {
+    if (this._isInitialized) {
+      await this.stop()
+      await this._tracer.shutdown()
+      this._isInitialized = false
+      console.log('SessionRecorder shutdown')
+    }
+  }
+}

package/src/types/expo.d.ts

@@ -0,0 +1,23 @@
+import { SessionRecorderOptions, PlatformInfo } from './index'
+
+declare module '@multiplayer-app/session-recorder-react-native' {
+  export interface ExpoSessionRecorderOptions extends SessionRecorderOptions {
+    platform: 'expo'
+    expoVersion?: string
+  }
+
+  export interface ExpoPlatformInfo {
+    isExpo: true
+    isReactNative: true
+    platform: 'ios' | 'android' | 'web'
+    expoVersion: string
+    deviceType: 'expo'
+  }
+
+  export function isExpoEnvironment(): boolean
+  export function getPlatformAttributes(): Record<string, any>
+  export function detectPlatform(): PlatformInfo | ExpoPlatformInfo
+}
+
+// Expo-specific exports
+export * from './index'

package/src/types/index.ts

@@ -0,0 +1,88 @@
+import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { HttpMaskingConfig } from '../config/masking'
+
+export enum SessionState {
+  started = '2',
+  paused = '1',
+  stopped = '0',
+}
+
+export interface ISession {
+  id: string
+  shortId: string
+  type: SessionType
+  state: SessionState
+  createdAt: string
+  updatedAt: string
+  tempApiKey?: string
+  metadata?: Record<string, any>
+}
+
+
+
+export interface SessionRecorderOptions {
+  apiKey: string
+  version: string
+  application: string
+  environment: string
+  exporterEndpoint?: string
+  apiBaseUrl?: string
+  ignoreUrls?: Array<string | RegExp>
+  showWidget?: boolean
+  recordScreen?: boolean
+  recordGestures?: boolean
+  recordNavigation?: boolean
+  sampleTraceRatio?: number
+  captureBody?: boolean
+  captureHeaders?: boolean
+  maxCapturingHttpPayloadSize?: number
+  usePostMessageFallback?: boolean
+  httpMasking?: HttpMaskingConfig
+  platform?: 'react-native' | 'expo'
+}
+
+export interface TracerReactNativeConfig {
+  apiKey: string
+  application: string
+  version: string
+  environment: string
+  exporterEndpoint?: string
+  ignoreUrls?: Array<string | RegExp>
+  propagateTraceHeaderCorsUrls?: Array<string | RegExp>
+  captureBody?: boolean
+  captureHeaders?: boolean
+  sampleTraceRatio?: number
+  httpMasking?: HttpMaskingConfig
+}
+
+export interface RecorderConfig {
+  apiKey: string
+  apiBaseUrl?: string
+  usePostMessageFallback?: boolean
+  recordScreen?: boolean
+  recordGestures?: boolean
+  recordNavigation?: boolean
+}
+
+export interface GestureEvent {
+  type: 'tap' | 'swipe' | 'pinch' | 'pan' | 'longPress' | 'doubleTap' | 'rotate' | 'fling' | 'multiTouch' | 'scroll' | 'zoom' | 'gestureSequence' | 'gestureError' | 'gesturePerformance'
+  timestamp: number
+  target?: string
+  coordinates?: { x: number; y: number }
+  metadata?: Record<string, any>
+}
+
+export interface NavigationEvent {
+  type: 'navigate' | 'goBack' | 'reset'
+  timestamp: number
+  routeName?: string
+  params?: Record<string, any>
+  metadata?: Record<string, any>
+}
+
+export interface ScreenEvent {
+  type: 'screenCapture'
+  timestamp: number
+  dataUrl?: string
+  metadata?: Record<string, any>
+}

package/src/utils/platform.ts

@@ -0,0 +1,75 @@
+export interface PlatformInfo {
+  isExpo: boolean
+  isReactNative: boolean
+  platform: 'ios' | 'android' | 'web' | 'unknown'
+  platformVersion?: string
+  expoVersion?: string
+  deviceType: string
+}
+
+export function detectPlatform(): PlatformInfo {
+  try {
+    // Check if we're in an Expo environment
+    const expoConstants = require('expo-constants')
+    const isExpo = !!expoConstants.default?.expoVersion || !!expoConstants.expoVersion
+
+    if (isExpo) {
+      const expoVersion = expoConstants.default?.expoVersion || expoConstants.expoVersion
+      const platform = expoConstants.default?.platform || expoConstants.platform
+
+      return {
+        isExpo: true,
+        isReactNative: true,
+        platform: platform?.ios ? 'ios' : platform?.android ? 'android' : 'unknown',
+        expoVersion,
+        deviceType: 'expo',
+      }
+    }
+
+    // Fallback to React Native detection
+    const { Platform } = require('react-native')
+
+    return {
+      isExpo: false,
+      isReactNative: true,
+      platform: Platform.OS as 'ios' | 'android' | 'web' | 'unknown',
+      platformVersion: Platform.Version?.toString(),
+      deviceType: Platform.OS,
+    }
+  } catch (error) {
+    // Fallback for web or other environments
+    return {
+      isExpo: false,
+      isReactNative: false,
+      platform: 'unknown',
+      deviceType: 'unknown',
+    }
+  }
+}
+
+export function getPlatformAttributes(): Record<string, any> {
+  const platformInfo = detectPlatform()
+
+  const attributes: Record<string, any> = {
+    'platform': platformInfo.isExpo ? 'expo' : 'react-native',
+    'device.type': platformInfo.deviceType,
+  }
+
+  if (platformInfo.platformVersion) {
+    attributes['platform.version'] = platformInfo.platformVersion
+  }
+
+  if (platformInfo.expoVersion) {
+    attributes['expo.version'] = platformInfo.expoVersion
+  }
+
+  return attributes
+}
+
+export function isExpoEnvironment(): boolean {
+  return detectPlatform().isExpo
+}
+
+export function isReactNativeEnvironment(): boolean {
+  return detectPlatform().isReactNative
+}

package/src/version.ts

@@ -0,0 +1 @@
+export const version = "0.0.1-alpha.1"

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "declaration": true,
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "incremental": false,
+    "lib": ["ESNext"],
+    "module": "ES2015",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "ES2018",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist", "examples"],
+  "files": ["src/index.ts", "src/expo.ts"]
+}