@multiplayer-app/session-recorder-react-native 0.0.1 → 1.0.0

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

package/src/otel/helpers.ts

@@ -1,275 +0,0 @@
-import { 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 { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
-import { TracerReactNativeConfig } from '../types'
-
-const { schemify } = SessionRecorderSdk
-
-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`
-}

package/src/otel/index.ts

@@ -1,138 +0,0 @@
-import { resourceFromAttributes } from '@opentelemetry/resources'
-import { W3CTraceContextPropagator } from '@opentelemetry/core'
-import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
-import * as SemanticAttributes from '@opentelemetry/semantic-conventions'
-import { registerInstrumentations } from '@opentelemetry/instrumentation'
-import {
-  SessionType,
-  ATTR_MULTIPLAYER_SESSION_ID,
-  SessionRecorderIdGenerator,
-  SessionRecorderTraceIdRatioBasedSampler,
-  SessionRecorderBrowserTraceExporter,
-} from '@multiplayer-app/session-recorder-common'
-import { TracerReactNativeConfig } from '../types'
-import { getInstrumentations } from './instrumentations'
-import { getExporterEndpoint } from './helpers'
-
-import { getPlatformAttributes } from '../utils/platform'
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
-
-
-
-
-export class TracerReactNativeSDK {
-  private tracerProvider?: WebTracerProvider
-  private config?: TracerReactNativeConfig
-
-  private sessionId = ''
-  private idGenerator?: SessionRecorderIdGenerator
-  private exporter?: any
-  private isInitialized = false
-
-  constructor() { }
-
-  private _setSessionId(
-    sessionId: string,
-    sessionType: SessionType = SessionType.PLAIN,
-  ) {
-    this.sessionId = sessionId
-    this.idGenerator?.setSessionId(sessionId, sessionType)
-  }
-
-  init(options: TracerReactNativeConfig): void {
-    this.config = options
-
-    const { application, version, environment } = this.config
-
-    this.idGenerator = new SessionRecorderIdGenerator()
-
-    this.exporter = new SessionRecorderBrowserTraceExporter({
-      apiKey: options.apiKey,
-      url: getExporterEndpoint(options.exporterEndpoint),
-      usePostMessageFallback: options.usePostMessageFallback,
-    })
-
-    this.tracerProvider = new WebTracerProvider({
-      resource: resourceFromAttributes({
-        [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
-        [SemanticAttributes.SEMRESATTRS_SERVICE_VERSION]: version,
-        [SemanticAttributes.SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: environment,
-        ...getPlatformAttributes(),
-      }),
-      idGenerator: this.idGenerator,
-      sampler: new SessionRecorderTraceIdRatioBasedSampler(this.config.sampleTraceRatio || 0.15),
-      spanProcessors: [
-        this._getSpanSessionIdProcessor(),
-        new BatchSpanProcessor(this.exporter),
-      ],
-    })
-
-    this.tracerProvider.register({
-      propagator: new W3CTraceContextPropagator(),
-    })
-
-    // Register instrumentations
-    registerInstrumentations({
-      tracerProvider: this.tracerProvider,
-      instrumentations: getInstrumentations(this.config),
-    })
-
-    this.isInitialized = true
-  }
-
-  private _getSpanSessionIdProcessor() {
-    return {
-      onStart: (span: any) => {
-        if (this.sessionId) {
-          span.setAttribute(ATTR_MULTIPLAYER_SESSION_ID, this.sessionId)
-        }
-        // Add React Native specific attributes
-        span.setAttribute('platform', 'react-native')
-        span.setAttribute('timestamp', Date.now())
-      },
-      onEnd: () => { },
-      shutdown: () => Promise.resolve(),
-      forceFlush: () => Promise.resolve(),
-    }
-  }
-
-  start(sessionId: string, sessionType: SessionType): void {
-    if (!this.tracerProvider) {
-      throw new Error(
-        'Configuration not initialized. Call init() before start().',
-      )
-    }
-
-    this._setSessionId(sessionId, sessionType)
-  }
-
-  stop(): void {
-    if (!this.tracerProvider) {
-      throw new Error(
-        'Configuration not initialized. Call init() before start().',
-      )
-    }
-
-    this._setSessionId('')
-  }
-
-  setApiKey(apiKey: string): void {
-    if (!this.exporter) {
-      throw new Error(
-        'Configuration not initialized. Call init() before setApiKey().',
-      )
-    }
-
-    this.exporter.setApiKey?.(apiKey)
-  }
-
-  setSessionId(sessionId: string, sessionType: SessionType): void {
-    this._setSessionId(sessionId, sessionType)
-  }
-
-  // Shutdown (React Native specific)
-  shutdown(): Promise<void> {
-    this.isInitialized = false
-    return Promise.resolve()
-  }
-}