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

package/src/context/SessionRecorderContext.tsx

@@ -0,0 +1,138 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+  type PropsWithChildren,
+} from 'react';
+import { type SessionRecorderOptions, SessionState } from '../types';
+import sessionRecorder from '../session-recorder';
+import { ScreenRecorderView } from '../components/ScreenRecorderView';
+import SessionRecorderWidget from '../components/SessionRecorderWidget';
+import { SessionType } from '@multiplayer-app/session-recorder-common';
+import {
+  sessionRecorderStore,
+  type SessionRecorderState,
+} from './SessionRecorderStore';
+import { useStoreSelector } from './useStoreSelector';
+
+interface SessionRecorderContextType {
+  instance: typeof sessionRecorder;
+  openWidgetModal: () => void;
+  closeWidgetModal: () => void;
+  startSession: (sessionType?: SessionType) => Promise<void>;
+  stopSession: (comment?: string) => Promise<void>;
+  pauseSession: () => Promise<void>;
+  resumeSession: () => Promise<void>;
+  cancelSession: () => Promise<void>;
+  saveSession: () => Promise<void>;
+}
+
+const SessionRecorderContext = createContext<SessionRecorderContextType | null>(
+  null
+);
+
+export interface SessionRecorderProviderProps extends PropsWithChildren {
+  options?: SessionRecorderOptions;
+}
+
+export const SessionRecorderProvider: React.FC<
+  SessionRecorderProviderProps
+> = ({ children, options }) => {
+  const isInitialized = useStoreSelector<SessionRecorderState, boolean>(
+    sessionRecorderStore,
+    (s) => s.isInitialized
+  );
+
+  useEffect(() => {
+    if (options) {
+      sessionRecorder.init(options);
+    }
+    sessionRecorderStore.setState({
+      isInitialized: sessionRecorder.isInitialized,
+    });
+  }, []);
+
+  useEffect(() => {
+    sessionRecorderStore.setState({
+      sessionState: sessionRecorder.sessionState,
+      sessionType: sessionRecorder.sessionType,
+    });
+    const onStateChange = (
+      sessionState: SessionState,
+      sessionType: SessionType
+    ) => {
+      sessionRecorderStore.setState({ sessionState, sessionType });
+    };
+    sessionRecorder.on('state-change', onStateChange);
+    return () => {
+      sessionRecorder.off('state-change', onStateChange);
+    };
+  }, []);
+
+  const startSession = useCallback(
+    (sessionType: SessionType = SessionType.PLAIN) => {
+      return sessionRecorder.start(sessionType);
+    },
+    []
+  );
+
+  const stopSession = useCallback((comment?: string) => {
+    return sessionRecorder.stop(comment);
+  }, []);
+
+  const pauseSession = useCallback(() => {
+    return sessionRecorder.pause();
+  }, []);
+
+  const resumeSession = useCallback(() => {
+    return sessionRecorder.resume();
+  }, []);
+
+  const cancelSession = useCallback(() => {
+    return sessionRecorder.cancel();
+  }, []);
+
+  const saveSession = useCallback(() => {
+    return sessionRecorder.save();
+  }, []);
+
+  const openWidgetModal = useCallback(() => {
+    sessionRecorderStore.setState({ isWidgetModalVisible: true });
+  }, []);
+
+  const closeWidgetModal = useCallback(() => {
+    sessionRecorderStore.setState({ isWidgetModalVisible: false });
+  }, []);
+
+  return (
+    <SessionRecorderContext.Provider
+      value={{
+        instance: sessionRecorder,
+        openWidgetModal,
+        closeWidgetModal,
+        startSession,
+        stopSession,
+        pauseSession,
+        resumeSession,
+        cancelSession,
+        saveSession,
+      }}
+    >
+      <ScreenRecorderView>{children}</ScreenRecorderView>
+      {isInitialized && !!sessionRecorder.config.widget.enabled && (
+        <SessionRecorderWidget />
+      )}
+    </SessionRecorderContext.Provider>
+  );
+};
+
+export const useSessionRecorder = (): SessionRecorderContextType => {
+  const context = useContext(SessionRecorderContext);
+  if (!context) {
+    throw new Error(
+      'useSessionRecorder must be used within a SessionRecorderProvider'
+    );
+  }
+  return context;
+};

package/src/context/SessionRecorderStore.ts

@@ -0,0 +1,21 @@
+import { createStore, type Store } from '../utils/createStore'
+import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { SessionState } from '../types'
+
+export type SessionRecorderState = {
+  isInitialized: boolean
+  sessionType: SessionType | null
+  sessionState: SessionState | null
+  isWidgetModalVisible: boolean
+  isOnline: boolean
+  error: string | null
+}
+
+export const sessionRecorderStore: Store<SessionRecorderState> = createStore<SessionRecorderState>({
+  isInitialized: false,
+  sessionType: null,
+  sessionState: null,
+  isWidgetModalVisible: false,
+  isOnline: true,
+  error: null,
+})

package/src/context/useSessionRecorderStore.ts

@@ -0,0 +1,27 @@
+import { SessionType } from "@multiplayer-app/session-recorder-common"
+import { SessionState } from "../types"
+import { useStoreSelector } from "./useStoreSelector"
+import { type SessionRecorderState, sessionRecorderStore } from "./SessionRecorderStore"
+
+export function useSessionRecorderStore<TSlice>(
+  selector: (s: SessionRecorderState) => TSlice,
+  equalityFn?: (a: TSlice, b: TSlice) => boolean
+): TSlice {
+  return useStoreSelector<SessionRecorderState, TSlice>(sessionRecorderStore, selector, equalityFn)
+}
+
+export function useSessionRecordingState() {
+  return useSessionRecorderStore<SessionState | null>((s) => s.sessionState)
+}
+
+export function useSessionType() {
+  return useSessionRecorderStore<SessionType | null>((s) => s.sessionType)
+}
+
+export function useIsInitialized() {
+  return useSessionRecorderStore<boolean>((s) => s.isInitialized)
+}
+
+export function useWidgetModalVisible() {
+  return useSessionRecorderStore<boolean>((s) => s.isWidgetModalVisible)
+}

package/src/context/useStoreSelector.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react'
+import { type Store } from '../utils/createStore'
+import { shallowEqual } from '../utils/shallowEqual'
+
+export function useStoreSelector<TState extends object, TSlice>(
+  store: Store<TState>,
+  selector: (state: TState) => TSlice,
+  equalityFn: (a: TSlice, b: TSlice) => boolean = Object.is,
+): TSlice {
+  const latestSelectorRef = useRef(selector)
+  const latestEqualityRef = useRef(equalityFn)
+  latestSelectorRef.current = selector
+  latestEqualityRef.current = equalityFn
+
+  const [slice, setSlice] = useState<TSlice>(() => latestSelectorRef.current(store.getState()))
+
+  useEffect(() => {
+    function handleChange(nextState: TState, prevState: TState) {
+      const nextSlice = latestSelectorRef.current(nextState)
+      const prevSlice = latestSelectorRef.current(prevState)
+      if (!latestEqualityRef.current(nextSlice, prevSlice)) {
+        setSlice(nextSlice)
+      }
+    }
+    const unsubscribe = store.subscribe(handleChange)
+    // Sync once in case changed between render and effect
+    handleChange(store.getState(), store.getState())
+    return unsubscribe
+  }, [store])
+
+  return slice
+}
+
+export const shallow = shallowEqual

package/src/index.ts

@@ -0,0 +1,10 @@
+import './patch'
+import SessionRecorder from './session-recorder'
+export * from '@multiplayer-app/session-recorder-common'
+export * from './context/SessionRecorderContext'
+export * from './context/useSessionRecorderStore'
+
+// Export the class for type checking
+export { SessionRecorder }
+// Export the instance as default
+export default SessionRecorder

package/src/native/SessionRecorderNative.ts

@@ -0,0 +1,164 @@
+
+import { NativeEventEmitter, Platform, TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+
+  // Gesture recording APIs
+  startGestureRecording(): Promise<void>
+  stopGestureRecording(): Promise<void>
+  isGestureRecordingActive(): Promise<boolean>
+  setGestureCallback(callback: (event: any) => void): void
+}
+
+export interface MaskingOptions {
+  /** Quality of the captured image (0.1 to 1.0, default: 0.3 for smaller file size) */
+  quality?: number
+  /** Scale of the captured image (0.1 to 1.0, default: 1.0) */
+  scale?: number
+  /** Whether to mask text inputs (UITextField, UITextView, React Native text components) */
+  maskTextInputs?: boolean
+  /** Whether to mask images (UIImageView, React Native Image components) */
+  maskImages?: boolean
+  /** Whether to mask buttons (UIButton) */
+  maskButtons?: boolean
+  /** Whether to mask labels (UILabel) */
+  maskLabels?: boolean
+  /** Whether to mask web views (WKWebView) */
+  maskWebViews?: boolean
+  /** Whether to mask sandboxed views (system views that don't belong to current process) */
+  maskSandboxedViews?: boolean
+}
+
+
+export interface SessionRecorderNativeModule {
+  /**
+   * Capture the current screen and apply masking to sensitive elements
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMask(): Promise<string>
+
+  /**
+   * Capture the current screen and apply masking with custom options
+   * @param options Custom masking options
+   * @returns Promise that resolves to base64 encoded image
+   */
+  captureAndMaskWithOptions(options: MaskingOptions): Promise<string>
+
+  // Gesture recording APIs
+  startGestureRecording(): Promise<void>
+  stopGestureRecording(): Promise<void>
+  isGestureRecordingActive(): Promise<boolean>
+  setGestureCallback(callback: (event: any) => void): void
+}
+
+// Check if we're on web platform
+const isWeb = Platform.OS === 'web'
+
+// Get the Turbo Module
+let SessionRecorderNative: Spec | null = null
+let eventEmitter: NativeEventEmitter | null = null
+
+if (!isWeb) {
+  try {
+    SessionRecorderNative = TurboModuleRegistry.getEnforcing<Spec>('SessionRecorderNative')
+    eventEmitter = new NativeEventEmitter(SessionRecorderNative as any)
+  } catch (error) {
+    console.warn('Failed to access SessionRecorderNative Turbo Module:', error)
+  }
+}
+
+// Validate that the native module is available
+if (!SessionRecorderNative && !isWeb) {
+  console.warn('SessionRecorderNative Turbo Module is not available. Auto-linking may not have completed yet.')
+} else if (isWeb) {
+  console.info('SessionRecorderNative: Running on web platform, native module disabled')
+}
+
+// Create a safe wrapper that handles web platform
+const SafeSessionRecorderNative: Spec = {
+  async captureAndMask(): Promise<string> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    return SessionRecorderNative.captureAndMask()
+  },
+
+  async captureAndMaskWithOptions(options: MaskingOptions): Promise<string> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    return SessionRecorderNative.captureAndMaskWithOptions(options)
+  },
+
+  async startGestureRecording(): Promise<void> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    return SessionRecorderNative.startGestureRecording()
+  },
+
+  async stopGestureRecording(): Promise<void> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    return SessionRecorderNative.stopGestureRecording()
+  },
+
+  async isGestureRecordingActive(): Promise<boolean> {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    return SessionRecorderNative.isGestureRecordingActive()
+  },
+
+  setGestureCallback(callback: (event: any) => void): void {
+    if (isWeb || !SessionRecorderNative) {
+      throw new Error('SessionRecorderNative is not available on web platform')
+    }
+    // Native side will also invoke callback if provided; also subscribe to events here
+    try {
+      SessionRecorderNative.setGestureCallback(callback as any)
+    } catch { }
+    eventEmitter?.removeAllListeners('onGestureDetected')
+    eventEmitter?.addListener('onGestureDetected', callback)
+  }
+}
+
+export interface NativeGestureEvent {
+  type: 'tap' | 'pan_start' | 'pan_move' | 'pan_end' | 'long_press' | 'pinch' | 'swipe'
+  timestamp: number
+  x: number
+  y: number
+  target?: string
+  targetInfo?: {
+    identifier: string
+    label?: string
+    role?: string
+    testId?: string
+    text?: string
+  }
+  metadata?: {
+    pressure?: number
+    velocity?: number
+    scale?: number
+    direction?: string
+    distance?: number
+  }
+}
+
+export default SafeSessionRecorderNative
+
+// Export event emitter for gesture events to maintain previous API
+export const gestureEventEmitter = eventEmitter

package/src/native/index.ts

@@ -0,0 +1 @@
+export { default as SessionRecorderNative, gestureEventEmitter, type NativeGestureEvent } from './SessionRecorderNative'

package/src/otel/helpers.ts

@@ -0,0 +1,274 @@
+import { type Span } from '@opentelemetry/api'
+import {
+  MULTIPLAYER_TRACE_DEBUG_PREFIX,
+  MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX,
+  ATTR_MULTIPLAYER_HTTP_REQUEST_BODY,
+  ATTR_MULTIPLAYER_HTTP_REQUEST_HEADERS,
+  ATTR_MULTIPLAYER_HTTP_RESPONSE_BODY,
+  ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS,
+} from '@multiplayer-app/session-recorder-common'
+import { logger } from '../utils'
+import { type TracerReactNativeConfig } from '../types'
+
+
+
+export interface HttpPayloadData {
+  requestBody?: any
+  responseBody?: any
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+}
+
+export interface ProcessedHttpPayload {
+  requestBody?: string
+  responseBody?: string
+  requestHeaders?: string
+  responseHeaders?: string
+}
+
+/**
+ * Checks if the trace should be processed based on trace ID prefixes
+ */
+export function shouldProcessTrace(traceId: string): boolean {
+  return (
+    traceId.startsWith(MULTIPLAYER_TRACE_DEBUG_PREFIX) ||
+    traceId.startsWith(MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX)
+  )
+}
+
+/**
+ * Processes request and response body based on trace type and configuration
+ */
+export function processBody(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): { requestBody?: string; responseBody?: string } {
+  const { captureBody, masking } = config
+  const traceId = span.spanContext().traceId
+
+  if (!captureBody) {
+    return {}
+  }
+
+  let { requestBody, responseBody } = payload
+
+  if (requestBody !== undefined && requestBody !== null) {
+    requestBody = JSON.parse(JSON.stringify(requestBody))
+  }
+  if (responseBody !== undefined && responseBody !== null) {
+    responseBody = JSON.parse(JSON.stringify(responseBody))
+  }
+
+  // Apply masking for debug traces
+  if (
+    traceId.startsWith(MULTIPLAYER_TRACE_DEBUG_PREFIX) ||
+    traceId.startsWith(MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX)
+  ) {
+    if (masking.isContentMaskingEnabled) {
+      requestBody = requestBody && masking.maskBody?.(requestBody, span)
+      responseBody = responseBody && masking.maskBody?.(responseBody, span)
+    }
+  }
+
+  // Convert to string if needed
+  if (typeof requestBody !== 'string') {
+    requestBody = JSON.stringify(requestBody)
+  }
+
+  if (typeof responseBody !== 'string') {
+    responseBody = JSON.stringify(responseBody)
+  }
+
+  return {
+    requestBody: requestBody?.length ? requestBody : undefined,
+    responseBody: responseBody?.length ? responseBody : undefined,
+  }
+}
+
+/**
+ * Processes request and response headers based on configuration
+ */
+export function processHeaders(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): { requestHeaders?: string; responseHeaders?: string } {
+  const { captureHeaders, masking } = config
+
+  if (!captureHeaders) {
+    return {}
+  }
+
+  let { requestHeaders = {}, responseHeaders = {} } = payload
+
+  // Handle header filtering
+  if (
+    !masking.headersToInclude?.length &&
+    !masking.headersToExclude?.length
+  ) {
+    // Add null checks to prevent JSON.parse error when headers is undefined
+    if (requestHeaders !== undefined && requestHeaders !== null) {
+      requestHeaders = JSON.parse(JSON.stringify(requestHeaders))
+    }
+    if (responseHeaders !== undefined && responseHeaders !== null) {
+      responseHeaders = JSON.parse(JSON.stringify(responseHeaders))
+    }
+  } else {
+    if (masking.headersToInclude) {
+      const _requestHeaders: Record<string, string> = {}
+      const _responseHeaders: Record<string, string> = {}
+
+      for (const headerName of masking.headersToInclude) {
+        if (requestHeaders[headerName]) {
+          _requestHeaders[headerName] = requestHeaders[headerName]
+        }
+        if (responseHeaders[headerName]) {
+          _responseHeaders[headerName] = responseHeaders[headerName]
+        }
+      }
+
+      requestHeaders = _requestHeaders
+      responseHeaders = _responseHeaders
+    }
+
+    if (masking.headersToExclude?.length) {
+      for (const headerName of masking.headersToExclude) {
+        delete requestHeaders[headerName]
+        delete responseHeaders[headerName]
+      }
+    }
+  }
+
+  // Apply masking
+  const maskedRequestHeaders = masking.maskHeaders?.(requestHeaders, span) || requestHeaders
+  const maskedResponseHeaders = masking.maskHeaders?.(responseHeaders, span) || responseHeaders
+
+  // Convert to string
+  const requestHeadersStr = typeof maskedRequestHeaders === 'string'
+    ? maskedRequestHeaders
+    : JSON.stringify(maskedRequestHeaders)
+
+  const responseHeadersStr = typeof maskedResponseHeaders === 'string'
+    ? maskedResponseHeaders
+    : JSON.stringify(maskedResponseHeaders)
+
+  return {
+    requestHeaders: requestHeadersStr?.length ? requestHeadersStr : undefined,
+    responseHeaders: responseHeadersStr?.length ? responseHeadersStr : undefined,
+  }
+}
+
+/**
+ * Processes HTTP payload (body and headers) and sets span attributes
+ */
+export function processHttpPayload(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): void {
+  const traceId = span.spanContext().traceId
+
+  if (!shouldProcessTrace(traceId)) {
+    return
+  }
+
+  const { requestBody, responseBody } = processBody(payload, config, span)
+  const { requestHeaders, responseHeaders } = processHeaders(payload, config, span)
+
+  // Set span attributes
+  if (requestBody) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_REQUEST_BODY, requestBody)
+  }
+
+  if (responseBody) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_BODY, responseBody)
+  }
+
+  if (requestHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_REQUEST_HEADERS, requestHeaders)
+  }
+
+  if (responseHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS, responseHeaders)
+  }
+}
+
+/**
+ * Converts Headers object to plain object
+ */
+export function headersToObject(headers: Headers | Record<string, string> | Record<string, string | string[]> | string[][] | undefined): Record<string, string> {
+  const result: Record<string, string> = {}
+
+  if (!headers) {
+    return result
+  }
+
+  if (headers instanceof Headers) {
+    headers.forEach((value: string, key: string) => {
+      result[key] = value
+    })
+  } else if (Array.isArray(headers)) {
+    // Handle array of [key, value] pairs
+    for (const [key, value] of headers) {
+      if (typeof key === 'string' && typeof value === 'string') {
+        result[key] = value
+      }
+    }
+  } else if (typeof headers === 'object' && !Array.isArray(headers)) {
+    for (const [key, value] of Object.entries(headers)) {
+      if (typeof key === 'string' && typeof value === 'string') {
+        result[key] = value
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * Extracts response body as string from Response object
+ */
+export async function extractResponseBody(response: Response): Promise<string | null> {
+  if (!response.body) {
+    return null
+  }
+
+  try {
+    if (response.body instanceof ReadableStream) {
+      // Check if response body is already consumed
+      if (response.bodyUsed) {
+        return null
+      }
+
+      const responseClone = response.clone()
+      return responseClone.text()
+    } else {
+      return JSON.stringify(response.body)
+    }
+  } catch (error) {
+    // If cloning fails (body already consumed), return null
+    // eslint-disable-next-line no-console
+    logger.warn('DEBUGGER_LIB', 'Failed to extract response body', error)
+    return null
+  }
+}
+
+export const getExporterEndpoint = (exporterEndpoint: string): string => {
+  const hasPath = exporterEndpoint && (() => {
+    try {
+      const url = new URL(exporterEndpoint)
+      return url.pathname !== '/' && url.pathname !== ''
+    } catch {
+      return false
+    }
+  })()
+
+  if (hasPath) {
+    return exporterEndpoint
+  }
+
+  const trimmedExporterEndpoint = new URL(exporterEndpoint).origin
+
+  return `${trimmedExporterEndpoint}/v1/traces`
+}