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

package/src/otel/index.ts

@@ -0,0 +1,348 @@
+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,
+} from '@multiplayer-app/session-recorder-common'
+import { TracerReactNativeConfig } from '../types'
+import { getInstrumentations } from './instrumentations'
+import { getExporterEndpoint } from './helpers'
+import { ReactNavigationInstrumentation } from './instrumentations/reactNavigationInstrumentation'
+import { GestureInstrumentation } from './instrumentations/gestureInstrumentation'
+import { getHttpMaskingConfig } from '../config/masking'
+import { getPlatformAttributes } from '../utils/platform'
+
+
+// Create a custom TracerProvider for React Native
+class ReactNativeTracerProvider {
+  private resource: any
+  private idGenerator: any
+  private sampler: any
+  private spanProcessors: any[]
+  private propagator: any
+
+  constructor(options: any) {
+    this.resource = options.resource
+    this.idGenerator = options.idGenerator
+    this.sampler = options.sampler
+    this.spanProcessors = options.spanProcessors
+    this.propagator = options.propagator
+  }
+
+  register(options: any) {
+    // Register the provider with OpenTelemetry
+    console.log('ReactNativeTracerProvider registered')
+  }
+
+  getTracer(name: string, version?: string, options?: any): any {
+    // Return a mock tracer for now
+    return {
+      startSpan: (name: string, options?: any) => ({
+        setAttribute: (key: string, value: any) => { },
+        setStatus: (status: any) => { },
+        end: () => { },
+        recordException: (error: Error) => { },
+      }),
+    }
+  }
+}
+
+export class TracerReactNativeSDK {
+  private tracerProvider?: ReactNativeTracerProvider
+  private config?: TracerReactNativeConfig
+  private httpMaskingConfig: any
+  private sessionId = ''
+  private idGenerator: SessionRecorderIdGenerator
+  private exporter?: any
+  private navigationInstrumentation: ReactNavigationInstrumentation
+  private gestureInstrumentation: GestureInstrumentation
+  private isInitialized = false
+
+  constructor() {
+    this.idGenerator = new SessionRecorderIdGenerator()
+    this.navigationInstrumentation = new ReactNavigationInstrumentation()
+    this.gestureInstrumentation = new GestureInstrumentation()
+  }
+
+  private _setSessionId(
+    sessionId: string,
+    sessionType: SessionType = SessionType.PLAIN,
+  ) {
+    this.sessionId = sessionId
+    this.idGenerator.setSessionId(sessionId, sessionType)
+  }
+
+  init(options: TracerReactNativeConfig): void {
+    if (this.isInitialized) {
+      console.warn('TracerReactNativeSDK already initialized')
+      return
+    }
+
+    this.config = options
+    this.httpMaskingConfig = getHttpMaskingConfig(options.httpMasking)
+    const { application, version, environment } = this.config
+
+    // Create OTLP exporter
+    const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http')
+    this.exporter = new OTLPTraceExporter({
+      url: getExporterEndpoint(options.exporterEndpoint),
+      headers: {
+        'Authorization': `Bearer ${options.apiKey}`,
+      },
+    })
+
+    this.tracerProvider = new ReactNativeTracerProvider({
+      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
+    console.log('TracerReactNativeSDK initialized successfully')
+  }
+
+  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(),
+    }
+  }
+
+  setSessionId(sessionId: string, sessionType: SessionType): void {
+    this._setSessionId(sessionId, sessionType)
+  }
+
+  // Navigation instrumentation methods
+  setNavigationRef(ref: any): void {
+    this.navigationInstrumentation.setNavigationRef(ref)
+  }
+
+  recordNavigate(routeName: string, params?: Record<string, any>): void {
+    this.navigationInstrumentation.recordNavigate(routeName, params)
+  }
+
+  recordGoBack(): void {
+    this.navigationInstrumentation.recordGoBack()
+  }
+
+  recordReset(routes: any[]): void {
+    this.navigationInstrumentation.recordReset(routes)
+  }
+
+  // Gesture instrumentation methods
+  enableGestureTracking(): void {
+    this.gestureInstrumentation.enable()
+  }
+
+  disableGestureTracking(): void {
+    this.gestureInstrumentation.disable()
+  }
+
+  recordTap(x: number, y: number, target?: string): void {
+    this.gestureInstrumentation.recordTap(x, y, target)
+  }
+
+  recordSwipe(direction: string, target?: string): void {
+    this.gestureInstrumentation.recordSwipe(direction, target)
+  }
+
+  recordPinch(scale: number, target?: string): void {
+    this.gestureInstrumentation.recordPinch(scale, target)
+  }
+
+  recordPan(deltaX: number, deltaY: number, target?: string): void {
+    this.gestureInstrumentation.recordPan(deltaX, deltaY, target)
+  }
+
+  recordLongPress(duration: number, target?: string): void {
+    this.gestureInstrumentation.recordLongPress(duration, target)
+  }
+
+  recordGestureError(error: Error, gestureType: string): void {
+    this.gestureInstrumentation.recordGestureError(error, gestureType)
+  }
+
+  // Performance monitoring methods
+  startTrace(name: string, attributes?: Record<string, any>): any {
+    if (!this.isInitialized) {
+      console.warn('TracerReactNativeSDK not initialized')
+      return null
+    }
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan(name, {
+      attributes: {
+        'trace.type': 'performance',
+        'trace.name': name,
+        ...attributes,
+      },
+    })
+
+    return span
+  }
+
+  endTrace(span: any, status?: any): void {
+    if (span) {
+      if (status) {
+        span.setStatus(status)
+      }
+      span.end()
+    }
+  }
+
+  // Error tracking
+  captureException(error: Error, context?: Record<string, any>): void {
+    if (!this.isInitialized) return
+
+    const { trace, SpanStatusCode } = require('@opentelemetry/api')
+    const span = trace.startSpan('error.capture', {
+      attributes: {
+        'error.type': error.name,
+        'error.message': error.message,
+        'error.stack': error.stack,
+        ...context,
+      },
+    })
+
+    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
+    span.recordException(error)
+    span.end()
+  }
+
+  // Network monitoring
+  recordNetworkRequest(url: string, method: string, statusCode: number, duration: number): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('network.request', {
+      attributes: {
+        'http.url': url,
+        'http.method': method,
+        'http.status_code': statusCode,
+        'http.duration': duration,
+        'network.type': 'fetch',
+      },
+    })
+
+    span.setStatus({ code: statusCode >= 400 ? 2 : 1 })
+    span.end()
+  }
+
+  // Screen performance
+  recordScreenLoad(screenName: string, loadTime: number): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('screen.load', {
+      attributes: {
+        'screen.name': screenName,
+        'screen.load_time': loadTime,
+        'screen.type': 'react_native',
+      },
+    })
+
+    span.end()
+  }
+
+  // Memory monitoring
+  recordMemoryUsage(usedMemory: number, totalMemory: number): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('memory.usage', {
+      attributes: {
+        'memory.used': usedMemory,
+        'memory.total': totalMemory,
+        'memory.percentage': (usedMemory / totalMemory) * 100,
+      },
+    })
+
+    span.end()
+  }
+
+  // Battery monitoring
+  recordBatteryLevel(level: number, isCharging: boolean): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('battery.status', {
+      attributes: {
+        'battery.level': level,
+        'battery.charging': isCharging,
+      },
+    })
+
+    span.end()
+  }
+
+  // App lifecycle events
+  recordAppStateChange(state: string): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('app.state_change', {
+      attributes: {
+        'app.state': state,
+        'app.timestamp': Date.now(),
+      },
+    })
+
+    span.end()
+  }
+
+  // Custom event tracking
+  recordCustomEvent(eventName: string, attributes?: Record<string, any>): void {
+    if (!this.isInitialized) return
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan(`custom.${eventName}`, {
+      attributes: {
+        'event.name': eventName,
+        'event.type': 'custom',
+        ...attributes,
+      },
+    })
+
+    span.end()
+  }
+
+  // Shutdown
+  shutdown(): Promise<void> {
+    this.isInitialized = false
+    console.log('TracerReactNativeSDK shutdown')
+    return Promise.resolve()
+  }
+}

package/src/otel/instrumentations/gestureInstrumentation.ts

@@ -0,0 +1,141 @@
+import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+export class GestureInstrumentation extends InstrumentationBase {
+  private _isEnabled = false
+
+  constructor() {
+    super('react-native-gesture', '1.0.0', {})
+  }
+
+  init(): void {
+    // Initialize the instrumentation
+  }
+
+  enable(): void {
+    this._isEnabled = true
+  }
+
+  disable(): void {
+    this._isEnabled = false
+  }
+
+  isEnabled(): boolean {
+    return this._isEnabled
+  }
+
+  // Manual gesture tracking methods
+  recordTap(x: number, y: number, target?: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan('Gesture.tap', {
+      attributes: {
+        'gesture.type': 'tap',
+        'gesture.coordinates.x': x,
+        'gesture.coordinates.y': y,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    if (target) {
+      span.setAttribute('gesture.target', target)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordSwipe(direction: string, target?: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan('Gesture.swipe', {
+      attributes: {
+        'gesture.type': 'swipe',
+        'gesture.direction': direction,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    if (target) {
+      span.setAttribute('gesture.target', target)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordPinch(scale: number, target?: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan('Gesture.pinch', {
+      attributes: {
+        'gesture.type': 'pinch',
+        'gesture.scale': scale,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    if (target) {
+      span.setAttribute('gesture.target', target)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordPan(deltaX: number, deltaY: number, target?: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan('Gesture.pan', {
+      attributes: {
+        'gesture.type': 'pan',
+        'gesture.delta_x': deltaX,
+        'gesture.delta_y': deltaY,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    if (target) {
+      span.setAttribute('gesture.target', target)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordLongPress(duration: number, target?: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan('Gesture.longPress', {
+      attributes: {
+        'gesture.type': 'longPress',
+        'gesture.duration': duration,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    if (target) {
+      span.setAttribute('gesture.target', target)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  // Error tracking for gesture failures
+  recordGestureError(error: Error, gestureType: string) {
+    if (!this._isEnabled) return
+
+    const span = trace.getTracer('gesture').startSpan(`Gesture.${gestureType}.error`, {
+      attributes: {
+        'gesture.type': gestureType,
+        'gesture.error': true,
+        'gesture.timestamp': Date.now(),
+      },
+    })
+
+    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
+    span.recordException(error)
+    span.end()
+  }
+}

package/src/otel/instrumentations/index.ts

@@ -0,0 +1,86 @@
+import { TracerReactNativeConfig } from '../../types'
+import { ReactNativeInstrumentation } from './reactNativeInstrumentation'
+import { getHttpMaskingConfig } from '../../config/masking'
+
+export function getInstrumentations(config: TracerReactNativeConfig) {
+  const httpMaskingConfig = getHttpMaskingConfig(config.httpMasking)
+  const instrumentations = []
+
+  // Fetch instrumentation
+  try {
+    const { FetchInstrumentation } = require('@opentelemetry/instrumentation-fetch')
+    instrumentations.push(
+      new FetchInstrumentation({
+        ignoreUrls: config.ignoreUrls || [],
+        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls || [],
+        applyCustomAttributesOnSpan: (span: any, request: any) => {
+          if (config.captureHeaders) {
+            const headers = request.headers
+            if (headers && httpMaskingConfig.maskHeaders) {
+              const maskedHeaders = httpMaskingConfig.maskHeaders(headers, span)
+              Object.keys(maskedHeaders).forEach(key => {
+                span.setAttribute(`http.request.header.${key}`, maskedHeaders[key])
+              })
+            } else if (headers) {
+              Object.keys(headers).forEach(key => {
+                span.setAttribute(`http.request.header.${key}`, headers[key])
+              })
+            }
+          }
+        },
+        applyCustomAttributesOnSpanResponse: (span: any, response: any) => {
+          if (config.captureBody && httpMaskingConfig.maskBody) {
+            const maskedBody = httpMaskingConfig.maskBody(response.body, span)
+            span.setAttribute('http.response.body', JSON.stringify(maskedBody))
+          } else if (config.captureBody) {
+            span.setAttribute('http.response.body', JSON.stringify(response.body))
+          }
+        },
+      })
+    )
+  } catch (error) {
+    console.warn('Fetch instrumentation not available:', error)
+  }
+
+  // XMLHttpRequest instrumentation
+  try {
+    const { XMLHttpRequestInstrumentation } = require('@opentelemetry/instrumentation-xml-http-request')
+    instrumentations.push(
+      new XMLHttpRequestInstrumentation({
+        ignoreUrls: config.ignoreUrls || [],
+        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls || [],
+        applyCustomAttributesOnSpan: (span: any, xhr: any) => {
+          if (config.captureHeaders) {
+            const headers = xhr.getAllResponseHeaders()
+            if (headers && httpMaskingConfig.maskHeaders) {
+              const maskedHeaders = httpMaskingConfig.maskHeaders(headers, span)
+              Object.keys(maskedHeaders).forEach(key => {
+                span.setAttribute(`http.response.header.${key}`, maskedHeaders[key])
+              })
+            } else if (headers) {
+              Object.keys(headers).forEach(key => {
+                span.setAttribute(`http.response.header.${key}`, headers[key])
+              })
+            }
+          }
+        },
+      })
+    )
+  } catch (error) {
+    console.warn('XMLHttpRequest instrumentation not available:', error)
+  }
+
+  // Custom React Native instrumentations
+  try {
+    instrumentations.push(new ReactNativeInstrumentation())
+  } catch (error) {
+    console.warn('React Native instrumentation not available:', error)
+  }
+
+  return instrumentations
+}
+
+// Export custom instrumentations for manual use
+export { ReactNativeInstrumentation } from './reactNativeInstrumentation'
+export { ReactNavigationInstrumentation } from './reactNavigationInstrumentation'
+export { GestureInstrumentation } from './gestureInstrumentation'