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

package/src/components/GestureCaptureWrapper/GestureCaptureWrapper.tsx

@@ -1,86 +0,0 @@
-import React, { ReactNode, useCallback, useMemo } from 'react'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
-
-export interface GestureCaptureWrapperProps {
-  children: ReactNode
-  onGestureRecord: (gestureType: string, data: any) => void
-}
-
-export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
-  const recordGesture = useCallback(
-    (gestureType: string, data: any) => {
-      // Record with session recorder
-      onGestureRecord(gestureType, data)
-    },
-    [onGestureRecord]
-  )
-
-  // Create tap gesture
-  const tapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('tap', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create pan gesture (for swipes and drags)
-  const panGesture = useMemo(() => {
-    return Gesture.Pan()
-      .runOnJS(true)
-      .onStart((event) => {
-        recordGesture('pan_start', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now()
-        })
-      })
-      .onUpdate((event) => {
-        recordGesture('pan_update', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-      .onEnd((event) => {
-        recordGesture('pan_end', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  // Create long press gesture
-  const longPressGesture = useMemo(() => {
-    return Gesture.LongPress()
-      .runOnJS(true)
-      .minDuration(500)
-      .onStart((event) => {
-        recordGesture('long_press', {
-          x: event.x,
-          y: event.y,
-          duration: 500,
-          timestamp: Date.now()
-        })
-      })
-  }, [recordGesture])
-
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <GestureDetector gesture={Gesture.Simultaneous(tapGesture, panGesture, longPressGesture)}>{children}</GestureDetector>
-    </GestureHandlerRootView>
-  )
-}

package/src/components/GestureCaptureWrapper/index.ts

@@ -1 +0,0 @@
-export * from "./GestureCaptureWrapper";

package/src/components/ScreenRecorderView/ScreenRecorderView.tsx

@@ -1,72 +0,0 @@
-import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
-import React, { PropsWithChildren, useCallback } from 'react'
-import { View } from 'react-native'
-import { SessionState } from '../../types'
-import { logger } from '../../utils'
-import { GestureCaptureWrapper } from '../GestureCaptureWrapper'
-
-interface ScreenRecorderViewProps extends PropsWithChildren {}
-
-export const ScreenRecorderView = ({ children }: ScreenRecorderViewProps) => {
-  // Set up gesture recording callback
-  const handleGestureRecord = useCallback((gestureType: string, data: any) => {
-    if (SessionRecorder.sessionState !== SessionState.started) {
-      logger.debug('SessionRecorderContext', 'Gesture recording skipped', {
-        client: !!SessionRecorder.sessionState,
-        sessionState: SessionRecorder.sessionState
-      })
-      return
-    }
-    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
-    try {
-      // Record gesture as appropriate touch events
-      switch (gestureType) {
-        case 'tap':
-          // For tap, record both touch start and end
-          logger.debug('SessionRecorderContext', 'Recording tap as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_start':
-          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_update':
-          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
-          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_end':
-          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'long_press':
-          logger.debug('SessionRecorderContext', 'Recording long_press as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-        default:
-      }
-    } catch (error) {
-      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
-    }
-  }, [])
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref) {
-      SessionRecorder.setViewShotRef?.(ref)
-    }
-  }
-
-  return (
-    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
-      <View ref={setViewShotRef} style={{ flex: 1 }}>
-        {children}
-      </View>
-    </GestureCaptureWrapper>
-  )
-}

package/src/components/ScreenRecorderView/index.ts

@@ -1 +0,0 @@
-export * from "./ScreenRecorderView";

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './GestureCaptureWrapper'

package/src/config/constants.ts

@@ -1,60 +0,0 @@
-
-export const OTEL_MP_SAMPLE_TRACE_RATIO = 0.15
-
-export const SESSION_ID_PROP_NAME = 'multiplayer-session-id'
-
-export const SESSION_SHORT_ID_PROP_NAME = 'multiplayer-session-short-id'
-
-export const SESSION_CONTINUOUS_DEBUGGING_PROP_NAME = 'multiplayer-session-continuous-debugging'
-
-export const SESSION_STATE_PROP_NAME = 'multiplayer-session-state'
-
-export const SESSION_TYPE_PROP_NAME = 'multiplayer-session-type'
-
-export const SESSION_PROP_NAME = 'multiplayer-session-data'
-
-export const SESSION_STARTED_EVENT = 'debug-session:started'
-
-export const SESSION_STOPPED_EVENT = 'debug-session:stopped'
-
-export const SESSION_SUBSCRIBE_EVENT = 'debug-session:subscribe'
-
-export const SESSION_UNSUBSCRIBE_EVENT = 'debug-session:unsubscribe'
-
-export const SESSION_AUTO_CREATED = 'debug-session:auto-created'
-
-export const SESSION_ADD_EVENT = 'debug-session:rrweb:add-event'
-
-export const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000
-
-export const SESSION_RESPONSE = 'multiplayer-debug-session-response'
-
-export const CONTINUOUS_DEBUGGING_TIMEOUT = 60000 // 1 minutes
-
-export const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30 // TODO: move to shared config otel core
-
-// // Package version - injected by webpack during build
-// declare const PACKAGE_VERSION: string
-// export const PACKAGE_VERSION_EXPORT = PACKAGE_VERSION || '1.0.0'
-
-
-// Regex patterns for OpenTelemetry ignore URLs
-export const OTEL_IGNORE_URLS = [
-  // Traces endpoint
-  /.*\/v1\/traces/,
-  // Debug sessions endpoints
-  /.*\/v0\/radar\/debug-sessions\/start$/,
-  /.*\/v0\/radar\/debug-sessions\/[^/]+\/stop$/,
-  /.*\/v0\/radar\/debug-sessions\/[^/]+\/cancel$/,
-
-  // Continuous debug sessions endpoints
-  /.*\/v0\/radar\/continuous-debug-sessions\/start$/,
-  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/save$/,
-  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/cancel$/,
-
-  // Remote debug session endpoint
-  /.*\/v0\/radar\/remote-debug-session\/check$/,
-
-  // Or use a more general pattern to catch all radar API endpoints
-  // /.*\/v0\/radar\/.*/
-]

package/src/config/defaults.ts

@@ -1,82 +0,0 @@
-import {
-  SessionRecorderSdk,
-  MULTIPLAYER_BASE_API_URL,
-  MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
-} from '@multiplayer-app/session-recorder-common'
-import {
-  MaskingConfig,
-  SessionRecorderConfigs,
-  WidgetButtonPlacement,
-  WidgetTextOverridesConfig,
-} from '../types'
-import {
-  OTEL_MP_SAMPLE_TRACE_RATIO,
-  DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
-} from './constants'
-const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
-
-export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
-  isContentMaskingEnabled: true,
-  maskBody: mask(sensitiveFields),
-  maskHeaders: mask(sensitiveHeaders),
-  maskBodyFieldsList: sensitiveFields,
-  maskHeadersList: sensitiveHeaders,
-  headersToInclude: [],
-  headersToExclude: [],
-}
-
-export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {
-  initialTitleWithContinuous: 'Encountered an issue?',
-  initialTitleWithoutContinuous: 'Encountered an issue?',
-  initialDescriptionWithContinuous: 'Record your session so we can see the problem and fix it faster.',
-  initialDescriptionWithoutContinuous: 'Record your session so we can see the problem and fix it faster.',
-  continuousRecordingLabel: 'Continuous recording',
-  startRecordingButtonText: 'Start recording',
-  finalTitle: 'Done recording?',
-  finalDescription: 'You can also add a quick note with extra context, expectations, or questions. Thank you!',
-  commentPlaceholder: 'Add a message...',
-  saveButtonText: 'Submit recording',
-  cancelButtonText: 'Cancel recording',
-  continuousOverlayTitle: 'Save time, skip the reproductions',
-  continuousOverlayDescription: 'We keep a rolling record of your recent activity. If something doesn’t work as expected, just save the recording and continue working. No need to worry about exceptions and errors - we automatically save recordings for those!',
-  saveLastSnapshotButtonText: 'Save recording',
-  submitDialogTitle: 'Save recording',
-  submitDialogSubtitle: 'This full-stack session recording will be saved directly to your selected Multiplayer project. All data is automatically correlated end-to-end.',
-  submitDialogCommentLabel: 'You can also add context, comments, or notes.',
-  submitDialogCommentPlaceholder: 'Add a message...',
-  submitDialogSubmitText: 'Save',
-  submitDialogCancelText: 'Cancel',
-}
-
-export const BASE_CONFIG: Required<SessionRecorderConfigs> = {
-  apiKey: '',
-
-  version: '',
-  application: '',
-  environment: '',
-
-  showWidget: true,
-  showContinuousRecording: true,
-  widgetButtonPlacement: WidgetButtonPlacement.bottomRight,
-
-  usePostMessageFallback: false,
-  apiBaseUrl: MULTIPLAYER_BASE_API_URL,
-  exporterEndpoint: MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
-
-  schemifyDocSpanPayload: true,
-
-  ignoreUrls: [],
-  propagateTraceHeaderCorsUrls: [],
-
-  sampleTraceRatio: OTEL_MP_SAMPLE_TRACE_RATIO,
-  maxCapturingHttpPayloadSize: DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
-
-  captureBody: true,
-  captureHeaders: true,
-  masking: DEFAULT_MASKING_CONFIG,
-  widgetTextOverrides: DEFAULT_WIDGET_TEXT_CONFIG,
-
-  recordScreen: true,
-  recordGestures: true,
-  recordNavigation: true,
-}

package/src/config/index.ts

@@ -1,6 +0,0 @@
-// Export all config-related functions and constants
-export * from './constants'
-export * from './defaults'
-export * from './validators'
-export * from './masking'
-export * from './session-recorder'

package/src/config/masking.ts

@@ -1,27 +0,0 @@
-import { MaskingConfig } from '../types'
-import { DEFAULT_MASKING_CONFIG } from './defaults'
-import { isValidArray, isValidBoolean, isValidFunction } from './validators'
-import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
-
-const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
-
-export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
-  const baseMasking = DEFAULT_MASKING_CONFIG
-
-  if (typeof masking !== 'object') {
-    return baseMasking
-  }
-
-  const maskHeadersList = isValidArray(masking.maskHeadersList, sensitiveHeaders)
-  const maskBodyFieldsList = isValidArray(masking.maskBodyFieldsList, sensitiveFields)
-
-  return {
-    maskHeadersList,
-    maskBodyFieldsList,
-    headersToInclude: isValidArray(masking.headersToInclude, baseMasking.headersToInclude ?? []),
-    headersToExclude: isValidArray(masking.headersToExclude, baseMasking.headersToExclude ?? []),
-    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
-    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
-    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
-  }
-}

package/src/config/session-recorder.ts

@@ -1,55 +0,0 @@
-import { SessionRecorderConfigs, SessionRecorderOptions, WidgetButtonPlacement } from '../types'
-import { BASE_CONFIG } from './defaults'
-import { getMaskingConfig } from './masking'
-import {
-  isValidString,
-  isValidNumber,
-  isValidBoolean,
-  isValidArray,
-  isValidEnum,
-} from './validators'
-
-const getWidgetTextOverridesConfig = (config: any, defaultConfig: any) => {
-  if (!config || typeof config !== 'object') {
-    return defaultConfig
-  }
-  return Object.keys(defaultConfig).reduce((acc, key) => {
-    acc[key] = isValidString(config[key], defaultConfig[key])
-    return acc
-  }, {} as Record<string, any>)
-}
-
-export const getSessionRecorderConfig = (c: SessionRecorderOptions): SessionRecorderConfigs => {
-  if (!c) {
-    return BASE_CONFIG
-  }
-
-  return {
-    apiKey: isValidString(c.apiKey, BASE_CONFIG.apiKey),
-    version: isValidString(c.version, BASE_CONFIG.version),
-    application: isValidString(c.application, BASE_CONFIG.application),
-    environment: isValidString(c.environment, BASE_CONFIG.environment),
-
-    exporterEndpoint: isValidString(c.exporterEndpoint, BASE_CONFIG.exporterEndpoint),
-    apiBaseUrl: isValidString(c.apiBaseUrl, BASE_CONFIG.apiBaseUrl),
-    usePostMessageFallback: isValidBoolean(c.usePostMessageFallback, BASE_CONFIG.usePostMessageFallback),
-
-    showWidget: isValidBoolean(c.showWidget, BASE_CONFIG.showWidget),
-    showContinuousRecording: isValidBoolean(c.showContinuousRecording, BASE_CONFIG.showContinuousRecording),
-    widgetButtonPlacement: isValidEnum<WidgetButtonPlacement>(c.widgetButtonPlacement, BASE_CONFIG.widgetButtonPlacement, Object.values(WidgetButtonPlacement) as WidgetButtonPlacement[]),
-    ignoreUrls: isValidArray(c.ignoreUrls, BASE_CONFIG.ignoreUrls),
-    sampleTraceRatio: isValidNumber(c.sampleTraceRatio, BASE_CONFIG.sampleTraceRatio),
-    propagateTraceHeaderCorsUrls: c.propagateTraceHeaderCorsUrls || BASE_CONFIG.propagateTraceHeaderCorsUrls,
-    schemifyDocSpanPayload: isValidBoolean(c.schemifyDocSpanPayload, BASE_CONFIG.schemifyDocSpanPayload),
-    maxCapturingHttpPayloadSize: isValidNumber(c.maxCapturingHttpPayloadSize, BASE_CONFIG.maxCapturingHttpPayloadSize),
-
-    masking: getMaskingConfig(c.masking),
-    captureBody: isValidBoolean(c.captureBody, BASE_CONFIG.captureBody),
-    captureHeaders: isValidBoolean(c.captureHeaders, BASE_CONFIG.captureHeaders),
-    widgetTextOverrides: getWidgetTextOverridesConfig(c.widgetTextOverrides, BASE_CONFIG.widgetTextOverrides),
-
-    recordScreen: isValidBoolean(c.recordScreen, BASE_CONFIG.recordScreen),
-    recordGestures: isValidBoolean(c.recordGestures, BASE_CONFIG.recordGestures),
-    recordNavigation: isValidBoolean(c.recordNavigation, BASE_CONFIG.recordNavigation),
-  }
-}

package/src/config/validators.ts

@@ -1,31 +0,0 @@
-/**
- * Validation helper functions for configuration objects
- */
-
-export const isValidStringOrRegExp = (value: string | RegExp | undefined, defaultValue: string | RegExp) => {
-  return typeof value === 'string' || value instanceof RegExp ? value : defaultValue
-}
-
-export const isValidString = <T extends string>(value: string | undefined | T, defaultValue: string) => {
-  return typeof value === 'string' ? value.trim() : defaultValue
-}
-
-export const isValidNumber = (value: number | undefined, defaultValue: number) => {
-  return typeof value === 'number' ? value : defaultValue
-}
-
-export const isValidBoolean = (value: boolean | undefined, defaultValue: boolean) => {
-  return typeof value === 'boolean' ? value : defaultValue
-}
-
-export const isValidArray = (value: any[] | undefined, defaultValue: any[]) => {
-  return Array.isArray(value) ? value : defaultValue
-}
-
-export const isValidEnum = <T>(value: any | T, defaultValue: T, enumValues: T[]): T => {
-  return enumValues.includes(value as T) ? value as T : defaultValue
-}
-
-export const isValidFunction = (value: any, defaultValue: any) => {
-  return typeof value === 'function' ? value : defaultValue
-}

package/src/context/SessionRecorderContext.tsx

@@ -1,75 +0,0 @@
-import React, { createContext, useContext, PropsWithChildren, useState, useEffect, useRef } from 'react'
-import { Pressable, Text, View } from 'react-native'
-import { SessionRecorderOptions, SessionState } from '../types'
-import SessionRecorder from '../session-recorder'
-import sessionRecorder from '../session-recorder'
-import { ScreenRecorderView } from '../components/ScreenRecorderView'
-
-interface SessionRecorderContextType {
-  instance: typeof SessionRecorder
-}
-
-const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
-
-export interface SessionRecorderProviderProps extends PropsWithChildren {
-  options: SessionRecorderOptions
-}
-
-export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
-  const [sessionState, setSessionState] = useState<SessionState | null>(null)
-  const optionsRef = useRef<string>()
-
-  useEffect(() => {
-    const newOptions = JSON.stringify(options)
-    if (optionsRef.current === JSON.stringify(options)) return
-    optionsRef.current = newOptions
-    SessionRecorder.init(options)
-  }, [options])
-
-  useEffect(() => {
-    setSessionState(SessionRecorder.sessionState)
-    SessionRecorder.on('state-change', (state: SessionState) => {
-      setSessionState(state)
-    })
-  }, [])
-
-  const onToggleSession = () => {
-    if (SessionRecorder.sessionState === SessionState.started) {
-      SessionRecorder.stop()
-    } else {
-      SessionRecorder.start()
-    }
-  }
-
-  return (
-    <SessionRecorderContext.Provider value={{ instance: sessionRecorder }}>
-      <ScreenRecorderView>{children}</ScreenRecorderView>
-      <Pressable onPress={onToggleSession}>
-        <View
-          style={{
-            position: 'absolute',
-            right: 0,
-            bottom: 100,
-            width: 48,
-            height: 48,
-            paddingTop: 16,
-            paddingLeft: 10,
-            backgroundColor: 'red',
-            borderTopLeftRadius: 24,
-            borderBottomLeftRadius: 24
-          }}
-        >
-          <Text style={{ color: 'white' }}>{sessionState === SessionState.started ? 'Stop' : 'Start'}</Text>
-        </View>
-      </Pressable>
-    </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/expo.ts

@@ -1,11 +0,0 @@
-import './patch'
-import SessionRecorder from './session-recorder'
-export * from '@multiplayer-app/session-recorder-common'
-export * from './context/SessionRecorderContext'
-
-export { SessionRecorder }
-// Export the instance as default
-export default SessionRecorder
-
-// Export Expo-specific utilities
-export { isExpoEnvironment, getPlatformAttributes } from './utils/platform'

package/src/index.ts

@@ -1,17 +0,0 @@
-import './patch'
-import SessionRecorder from './session-recorder'
-export * from '@multiplayer-app/session-recorder-common'
-export * from './context/SessionRecorderContext'
-
-// Export platform utilities including app metadata configuration
-export {
-  detectPlatform,
-  isExpoEnvironment,
-  configureAppMetadata,
-  getPlatformAttributes,
-  getConfiguredAppMetadata,
-} from './utils/platform'
-
-export { SessionRecorder }
-// Export the instance as default
-export default SessionRecorder