@multiplayer-app/session-recorder-react-native 0.0.1-alpha.7 → 0.0.1-alpha.8

package/dist/utils/logger.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Centralized logger utility for the session recorder
+ * Provides consistent logging across all components
+ */
+export declare enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3
+}
+export interface LoggerConfig {
+    level: LogLevel;
+    enableConsole: boolean;
+    enablePrefix: boolean;
+    prefix: string;
+}
+declare class Logger {
+    private config;
+    private componentPrefixes;
+    /**
+     * Configure the logger
+     * @param config - Logger configuration
+     */
+    configure(config: Partial<LoggerConfig>): void;
+    /**
+     * Set the log level
+     * @param level - Log level to set
+     */
+    setLevel(level: LogLevel): void;
+    /**
+     * Enable or disable console output
+     * @param enabled - Whether to enable console output
+     */
+    setConsoleEnabled(enabled: boolean): void;
+    /**
+     * Add or update a component prefix
+     * @param component - Component name
+     * @param emoji - Emoji prefix for the component
+     */
+    setComponentPrefix(component: string, emoji: string): void;
+    /**
+     * Get the formatted prefix for a component
+     * @param component - Component name
+     * @returns Formatted prefix string
+     */
+    private getPrefix;
+    /**
+     * Check if a log level should be output
+     * @param level - Log level to check
+     * @returns True if should output
+     */
+    private shouldLog;
+    /**
+     * Format the log message
+     * @param component - Component name
+     * @param level - Log level
+     * @param message - Log message
+     * @param data - Additional data to log
+     * @returns Formatted log message
+     */
+    private formatMessage;
+    /**
+     * Log a debug message
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    debug(component: string, message: string, data?: any): void;
+    /**
+     * Log an info message
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    info(component: string, message: string, data?: any): void;
+    /**
+     * Log a warning message
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    warn(component: string, message: string, data?: any): void;
+    /**
+     * Log an error message
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    error(component: string, message: string, data?: any): void;
+    /**
+     * Log a success message (info level with success emoji)
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    success(component: string, message: string, data?: any): void;
+    /**
+     * Log a failure message (error level with failure emoji)
+     * @param component - Component name
+     * @param message - Log message
+     * @param data - Additional data to log
+     */
+    failure(component: string, message: string, data?: any): void;
+}
+export declare const logger: Logger;
+export declare const logDebug: (component: string, message: string, data?: any) => void;
+export declare const logInfo: (component: string, message: string, data?: any) => void;
+export declare const logWarn: (component: string, message: string, data?: any) => void;
+export declare const logError: (component: string, message: string, data?: any) => void;
+export declare const logSuccess: (component: string, message: string, data?: any) => void;
+export declare const logFailure: (component: string, message: string, data?: any) => void;
+export {};

package/dist/utils/logger.js

@@ -0,0 +1 @@
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.logger=exports.logWarn=exports.logSuccess=exports.logInfo=exports.logFailure=exports.logError=exports.logDebug=exports.LogLevel=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable;})),t.push.apply(t,o);}return t;}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){(0,_defineProperty2["default"])(e,r,t[r]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r));});}return e;}var LogLevel;(function(LogLevel){LogLevel[LogLevel["DEBUG"]=0]="DEBUG";LogLevel[LogLevel["INFO"]=1]="INFO";LogLevel[LogLevel["WARN"]=2]="WARN";LogLevel[LogLevel["ERROR"]=3]="ERROR";})(LogLevel||(exports.LogLevel=LogLevel={}));var Logger=function(){function Logger(){(0,_classCallCheck2["default"])(this,Logger);this.config={level:LogLevel.INFO,enableConsole:true,enablePrefix:true,prefix:'[SessionRecorder]'};this.componentPrefixes=new Map([['ScreenRecorder','📸'],['GestureRecorder','👆'],['GestureCaptureWrapper','📸'],['SessionRecorderContext','🎯'],['EventExporter','📤'],['NavigationTracker','📸'],['RecorderReactNativeSDK','📤'],['DEBUGGER_LIB','🔍']]);}return(0,_createClass2["default"])(Logger,[{key:"configure",value:function configure(config){this.config=_objectSpread(_objectSpread({},this.config),config);}},{key:"setLevel",value:function setLevel(level){this.config.level=level;}},{key:"setConsoleEnabled",value:function setConsoleEnabled(enabled){this.config.enableConsole=enabled;}},{key:"setComponentPrefix",value:function setComponentPrefix(component,emoji){this.componentPrefixes.set(component,emoji);}},{key:"getPrefix",value:function getPrefix(component){if(!this.config.enablePrefix)return'';var emoji=this.componentPrefixes.get(component)||'📝';return"".concat(this.config.prefix," ").concat(emoji," [").concat(component,"]");}},{key:"shouldLog",value:function shouldLog(level){return level>=this.config.level&&this.config.enableConsole;}},{key:"formatMessage",value:function formatMessage(component,level,message,data){var prefix=this.getPrefix(component);var timestamp=new Date().toISOString();var levelName=LogLevel[level];var formattedMessage="".concat(prefix," ").concat(levelName," ").concat(message);if(data!==undefined){formattedMessage+=" ".concat(JSON.stringify(data));}return formattedMessage;}},{key:"debug",value:function debug(component,message,data){if(!this.shouldLog(LogLevel.DEBUG))return;var formattedMessage=this.formatMessage(component,LogLevel.DEBUG,message,data);console.log(formattedMessage);}},{key:"info",value:function info(component,message,data){if(!this.shouldLog(LogLevel.INFO))return;var formattedMessage=this.formatMessage(component,LogLevel.INFO,message,data);console.log(formattedMessage);}},{key:"warn",value:function warn(component,message,data){if(!this.shouldLog(LogLevel.WARN))return;var formattedMessage=this.formatMessage(component,LogLevel.WARN,message,data);console.warn(formattedMessage);}},{key:"error",value:function error(component,message,data){if(!this.shouldLog(LogLevel.ERROR))return;var formattedMessage=this.formatMessage(component,LogLevel.ERROR,message,data);console.error(formattedMessage);}},{key:"success",value:function success(component,message,data){if(!this.shouldLog(LogLevel.INFO))return;var prefix=this.getPrefix(component);var timestamp=new Date().toISOString();var formattedMessage="".concat(prefix," \u2705 ").concat(message);var fullMessage=formattedMessage;if(data!==undefined){fullMessage+=" ".concat(JSON.stringify(data));}console.log(fullMessage);}},{key:"failure",value:function failure(component,message,data){if(!this.shouldLog(LogLevel.ERROR))return;var prefix=this.getPrefix(component);var timestamp=new Date().toISOString();var formattedMessage="".concat(prefix," \u274C ").concat(message);var fullMessage=formattedMessage;if(data!==undefined){fullMessage+=" ".concat(JSON.stringify(data));}console.error(fullMessage);}}]);}();var logger=exports.logger=new Logger();var logDebug=exports.logDebug=function logDebug(component,message,data){return logger.debug(component,message,data);};var logInfo=exports.logInfo=function logInfo(component,message,data){return logger.info(component,message,data);};var logWarn=exports.logWarn=function logWarn(component,message,data){return logger.warn(component,message,data);};var logError=exports.logError=function logError(component,message,data){return logger.error(component,message,data);};var logSuccess=exports.logSuccess=function logSuccess(component,message,data){return logger.success(component,message,data);};var logFailure=exports.logFailure=function logFailure(component,message,data){return logger.failure(component,message,data);};

package/dist/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":"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"}

package/dist/utils/rrweb-events.d.ts

@@ -0,0 +1,65 @@
+import { eventWithTime, serializedNodeWithId } from '@rrweb/types';
+/**
+ * Creates a meta event to mark the start of recording
+ * @param sessionId - The session ID
+ * @param sessionType - The type of session (PLAIN or CONTINUOUS)
+ * @param additionalData - Additional data to include in the meta event
+ * @returns MetaEvent object
+ */
+export declare function createRecordingMetaEvent(): eventWithTime;
+/**
+ * Create a full snapshot event with the given base64 image
+ * @param base64Image - Base64 encoded image data
+ * @param width - Screen width
+ * @param height - Screen height
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @param nodeIdCounter - Starting node ID counter (will be modified)
+ * @returns Full snapshot event
+ */
+export declare function createFullSnapshotEvent(base64Image: string, width: number, height: number, captureFormat: string | undefined, nodeIdCounter: {
+    current: number;
+}): eventWithTime;
+/**
+ * Create an incremental snapshot event with mutation data to update image src
+ * @param base64Image - New base64 encoded image data
+ * @param imageNodeId - ID of the image node to update
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @returns Incremental snapshot event with mutation data
+ */
+export declare function createIncrementalSnapshotWithImageUpdate(base64Image: string, imageNodeId: number, captureFormat?: string): eventWithTime;
+/**
+ * Create a simple image node for React Native screen capture
+ * @param base64Image - Base64 encoded image data
+ * @param width - Image width
+ * @param height - Image height
+ * @param captureFormat - Image format (png, jpg, etc.)
+ * @param nodeId - Node ID for the image
+ * @returns Serialized node with ID
+ */
+export declare function createImageNode(base64Image: string, width: number, height: number, captureFormat: string | undefined, nodeId: number): serializedNodeWithId;
+/**
+ * Create a document node for React Native screen capture
+ * @param imageNode - The image node to include
+ * @param width - Screen width
+ * @param height - Screen height
+ * @param nodeIdCounter - Node ID counter (will be modified)
+ * @returns Document node
+ */
+export declare function createDocumentNode(imageNode: serializedNodeWithId, width: number, height: number, nodeIdCounter: {
+    current: number;
+}): serializedNodeWithId;
+/**
+ * Generate a simple hash for screen comparison
+ * This is a lightweight hash that focuses on the beginning and end of the base64 string
+ * to detect changes without doing a full comparison
+ * @param base64Image - Base64 encoded image
+ * @param sampleSize - Number of characters to sample from each part
+ * @returns Hash string for comparison
+ */
+export declare function generateScreenHash(base64Image: string, sampleSize?: number): string;
+/**
+ * Simple hash function for string comparison
+ * @param str - String to hash
+ * @returns Hash value as string
+ */
+export declare function simpleHash(str: string): string;

package/dist/utils/rrweb-events.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.createDocumentNode=createDocumentNode;exports.createFullSnapshotEvent=createFullSnapshotEvent;exports.createImageNode=createImageNode;exports.createIncrementalSnapshotWithImageUpdate=createIncrementalSnapshotWithImageUpdate;exports.createRecordingMetaEvent=createRecordingMetaEvent;exports.generateScreenHash=generateScreenHash;exports.simpleHash=simpleHash;var _reactNative=require("react-native");var _types=require("@rrweb/types");function createRecordingMetaEvent(){var screenDimensions=_reactNative.Dimensions.get('window');return{type:_types.EventType.Meta,data:{href:'https://go.multiplayer.app/session-recorder-react-native',width:screenDimensions.width,height:screenDimensions.height},timestamp:Date.now()};}function createFullSnapshotEvent(base64Image,width,height){var captureFormat=arguments.length>3&&arguments[3]!==undefined?arguments[3]:'jpg';var nodeIdCounter=arguments.length>4?arguments[4]:undefined;var imageNodeId=nodeIdCounter.current++;var imageNode={type:_types.NodeType.Element,id:imageNodeId,tagName:'img',attributes:{src:"data:image/".concat(captureFormat,";base64,").concat(base64Image),width:width.toString(),height:height.toString(),style:"width: ".concat(width,"px; height: ").concat(height,"px;")},childNodes:[]};var rootNode={type:_types.NodeType.Element,id:nodeIdCounter.current++,tagName:'div',attributes:{style:"width: ".concat(width,"px; height: ").concat(height,"px; position: relative;")},childNodes:[imageNode]};var domNode={type:_types.NodeType.Document,childNodes:[{type:_types.NodeType.DocumentType,name:'html',publicId:'',systemId:'',id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'html',attributes:{},childNodes:[{type:_types.NodeType.Element,tagName:'head',attributes:{},childNodes:[{type:_types.NodeType.Element,tagName:'meta',attributes:{charset:'utf-8'},childNodes:[],id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'meta',attributes:{name:'viewport',content:'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'},childNodes:[],id:nodeIdCounter.current++}],id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'body',attributes:{},childNodes:[rootNode],id:nodeIdCounter.current++}],id:nodeIdCounter.current++}],id:nodeIdCounter.current++};return{type:_types.EventType.FullSnapshot,data:{node:domNode,initialOffset:{left:0,top:0}},timestamp:Date.now()};}function createIncrementalSnapshotWithImageUpdate(base64Image,imageNodeId){var captureFormat=arguments.length>2&&arguments[2]!==undefined?arguments[2]:'jpg';var mutationData={source:_types.IncrementalSource.Mutation,texts:[],attributes:[{id:imageNodeId,attributes:{src:"data:image/".concat(captureFormat,";base64,").concat(base64Image)}}],removes:[],adds:[]};return{type:_types.EventType.IncrementalSnapshot,data:mutationData,timestamp:Date.now()};}function createImageNode(base64Image,width,height){var captureFormat=arguments.length>3&&arguments[3]!==undefined?arguments[3]:'jpg';var nodeId=arguments.length>4?arguments[4]:undefined;return{type:_types.NodeType.Element,id:nodeId,tagName:'img',attributes:{src:"data:image/".concat(captureFormat,";base64,").concat(base64Image),width:width.toString(),height:height.toString(),style:"width: ".concat(width,"px; height: ").concat(height,"px;")},childNodes:[]};}function createDocumentNode(imageNode,width,height,nodeIdCounter){var rootNode={type:_types.NodeType.Element,id:nodeIdCounter.current++,tagName:'div',attributes:{style:"width: ".concat(width,"px; height: ").concat(height,"px; position: relative;")},childNodes:[imageNode]};return{type:_types.NodeType.Document,childNodes:[{type:_types.NodeType.DocumentType,name:'html',publicId:'',systemId:'',id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'html',attributes:{},childNodes:[{type:_types.NodeType.Element,tagName:'head',attributes:{},childNodes:[{type:_types.NodeType.Element,tagName:'meta',attributes:{charset:'utf-8'},childNodes:[],id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'meta',attributes:{name:'viewport',content:'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'},childNodes:[],id:nodeIdCounter.current++}],id:nodeIdCounter.current++},{type:_types.NodeType.Element,tagName:'body',attributes:{},childNodes:[rootNode],id:nodeIdCounter.current++}],id:nodeIdCounter.current++}],id:nodeIdCounter.current++};}function generateScreenHash(base64Image){var sampleSize=arguments.length>1&&arguments[1]!==undefined?arguments[1]:100;var start=base64Image.substring(0,sampleSize);var middle=base64Image.substring(Math.floor(base64Image.length/2)-sampleSize/2,Math.floor(base64Image.length/2)+sampleSize/2);var end=base64Image.substring(base64Image.length-sampleSize);var combined=start+middle+end;return simpleHash(combined);}function simpleHash(str){var hash=0;for(var i=0;i<str.length;i++){var _char=str.charCodeAt(i);hash=(hash<<5)-hash+_char;hash=hash&hash;}return Math.abs(hash).toString(36);}

package/dist/utils/rrweb-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rrweb-events.js","sourceRoot":"","sources":["../../src/utils/rrweb-events.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.1-alpha.7";
+export declare const version = "0.0.1-alpha.8";

package/dist/version.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.version=void 0;var version=exports.version="0.0.1-alpha.7";
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.version=void 0;var version=exports.version="0.0.1-alpha.8";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -79,11 +79,13 @@
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-community/netinfo": "^11.1.0",
     "@rrweb/packer": "^2.0.0-alpha.15",
+    "@rrweb/types": "^2.0.0-alpha.18",
     "lib0": "0.2.82",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-mmkv": "^2.11.0",
     "react-native-reanimated": "^3.6.0",
     "react-native-view-shot": "^4.0.3",
+    "rrweb": "^2.0.0-alpha.15",
     "socket.io-client": "4.7.5"
   },
   "peerDependencies": {

package/src/components/GestureCaptureWrapper.tsx

@@ -0,0 +1,110 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { GestureInstrumentation } from '../otel/instrumentations/gestureInstrumentation'
+import { logger } from '../utils'
+
+export interface GestureCaptureWrapperProps {
+  children: ReactNode
+  onGestureRecord: (gestureType: string, data: any) => void
+}
+
+export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
+  const gestureInstrumentation = useRef(new GestureInstrumentation())
+
+  useEffect(() => {
+    gestureInstrumentation.current.enable()
+  }, [])
+
+  const recordGesture = useCallback(
+    (gestureType: string, data: any) => {
+      // Record with OpenTelemetry
+      logger.debug('GestureCaptureWrapper', 'Recording gesture', { gestureType, data })
+      switch (gestureType) {
+        case 'tap':
+          gestureInstrumentation.current.recordTap(data.x, data.y)
+          break
+        case 'pan_start':
+        case 'pan_update':
+        case 'pan_end':
+          gestureInstrumentation.current.recordPan(data.translationX || 0, data.translationY || 0)
+          break
+        case 'long_press':
+          gestureInstrumentation.current.recordLongPress(data.duration, undefined)
+          break
+      }
+
+      // 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/context/SessionRecorderContext.tsx

@@ -1,46 +1,50 @@
-import React, { createContext, useContext, ReactNode, PropsWithChildren, useMemo, useState, useEffect, useRef } from 'react'
+import React, { createContext, useContext, ReactNode, PropsWithChildren, useState, useEffect, useRef, useCallback } from 'react'
 import { Pressable, Text, View } from 'react-native'
 import { SessionRecorderOptions, SessionState } from '../types'
 import SessionRecorder from '../session-recorder'
+import { GestureCaptureWrapper } from '../components/GestureCaptureWrapper'
+import sessionRecorder from '../session-recorder'
+import { logger } from '../utils'
 
 interface SessionRecorderContextType {
-  client: typeof SessionRecorder
+  instance: typeof SessionRecorder
 }
 
 const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
 
 export interface SessionRecorderProviderProps extends PropsWithChildren {
   options: SessionRecorderOptions
-  client?: typeof SessionRecorder
 }
 
-export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, client, options }) => {
+export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
   const [sessionState, setSessionState] = useState<SessionState | null>(null)
+  const optionsRef = useRef<string>()
 
-  const sessionRecorder = useMemo(() => {
-    if (client) return client
+  useEffect(() => {
+    const newOptions = JSON.stringify(options)
+    if (optionsRef.current === JSON.stringify(options)) return
+    optionsRef.current = newOptions
     SessionRecorder.init(options)
-    return SessionRecorder
-  }, [])
+  }, [options])
 
   useEffect(() => {
-    if (!sessionRecorder) return
-    setSessionState(sessionRecorder.sessionState)
-  }, [sessionRecorder])
+    setSessionState(SessionRecorder.sessionState)
+    SessionRecorder.on('state-change', (state: SessionState) => {
+      setSessionState(state)
+    })
+  }, [])
 
   const onToggleSession = () => {
-    if (sessionState === SessionState.started) {
-      setSessionState(SessionState.stopped)
-      sessionRecorder.stop()
+    if (SessionRecorder.sessionState === SessionState.started) {
+      SessionRecorder.stop()
     } else {
-      setSessionState(SessionState.started)
-      sessionRecorder.start()
+      SessionRecorder.start()
     }
   }
 
   return (
-    <SessionRecorderContext.Provider value={{ client: sessionRecorder }}>
-      <TouchEventCapture>
+    <SessionRecorderContext.Provider value={{ instance: sessionRecorder }}>
+      <GestureEventCapture>
         {children}
         <Pressable onPress={onToggleSession}>
           <View
@@ -60,82 +64,73 @@ export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = (
             <Text style={{ color: 'white' }}>{sessionState === SessionState.started ? 'Stop' : 'Start'}</Text>
           </View>
         </Pressable>
-      </TouchEventCapture>
+      </GestureEventCapture>
     </SessionRecorderContext.Provider>
   )
 }
 
-// Touch event capture component
-const TouchEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const context = useContext(SessionRecorderContext)
-  const viewShotRef = useRef<View>(null)
-
-  // Set the viewshot ref in the session recorder when component mounts
-  useEffect(() => {
-    if (context?.client && viewShotRef.current) {
-      context.client.setViewShotRef?.(viewShotRef.current)
-    }
-  }, [context?.client])
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref && context?.client) {
-      context.client.setViewShotRef?.(ref)
-    }
-  }
-
-  const handleTouchStart = (event: any) => {
-    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
-
-    try {
-      const { pageX, pageY, target } = event.nativeEvent
-      const pressure = event.nativeEvent.force || 1.0
-
-      // Record touch start event automatically
-      context.client.recordTouchStart?.(pageX, pageY, target?.toString(), pressure)
-    } catch (error) {
-      console.warn('Failed to record touch start event:', error)
+// Gesture-based event capture component
+const GestureEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
+  // 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
     }
-  }
-
-  const handleTouchMove = (event: any) => {
-    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
-
+    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
     try {
-      const { pageX, pageY, target } = event.nativeEvent
-      const pressure = event.nativeEvent.force || 1.0
-
-      // Record touch move event automatically
-      context.client.recordTouchMove?.(pageX, pageY, target?.toString(), pressure)
+      // 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) {
-      console.warn('Failed to record touch move event:', error)
+      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
     }
-  }
-
-  const handleTouchEnd = (event: any) => {
-    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
-
-    try {
-      const { pageX, pageY, target } = event.nativeEvent
-      const pressure = event.nativeEvent.force || 1.0
+  }, [])
 
-      // Record touch end event automatically
-      context.client.recordTouchEnd?.(pageX, pageY, target?.toString(), pressure)
-    } catch (error) {
-      console.warn('Failed to record touch end event:', error)
+  // Callback ref to set the viewshot ref immediately when available
+  const setViewShotRef = (ref: View | null) => {
+    if (ref) {
+      SessionRecorder.setViewShotRef?.(ref)
     }
   }
 
   return (
-    <View
-      ref={setViewShotRef}
-      style={{ flex: 1 }}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      {children}
-    </View>
+    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
+      <View ref={setViewShotRef} style={{ flex: 1 }}>
+        {children}
+      </View>
+    </GestureCaptureWrapper>
   )
 }
 

package/src/otel/helpers.ts

@@ -7,6 +7,7 @@ import {
   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'
 
@@ -249,7 +250,7 @@ export async function extractResponseBody(response: Response): Promise<string |
   } catch (error) {
     // If cloning fails (body already consumed), return null
     // eslint-disable-next-line no-console
-    console.warn('[DEBUGGER_LIB] Failed to extract response body:', error)
+    logger.warn('DEBUGGER_LIB', 'Failed to extract response body', error)
     return null
   }
 }

package/src/otel/instrumentations/index.ts

@@ -4,6 +4,7 @@ import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xm
 import { OTEL_IGNORE_URLS } from '../../config'
 import { TracerReactNativeConfig } from '../../types'
 import { extractResponseBody, headersToObject, processHttpPayload } from '../helpers'
+import { logger } from '../../utils'
 
 export function getInstrumentations(config: TracerReactNativeConfig) {
 
@@ -47,13 +48,13 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
             processHttpPayload(payload, config, span)
           } catch (error) {
             // eslint-disable-next-line
-            console.error('[DEBUGGER_LIB] Failed to capture fetch payload', error)
+            logger.error('DEBUGGER_LIB', 'Failed to capture fetch payload', error)
           }
         },
       })
     )
   } catch (error) {
-    console.warn('Fetch instrumentation not available:', error)
+    logger.warn('DEBUGGER_LIB', 'Fetch instrumentation not available', error)
   }
 
   // XMLHttpRequest instrumentation
@@ -94,13 +95,13 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
             processHttpPayload(payload, config, span)
           } catch (error) {
             // eslint-disable-next-line
-            console.error('[DEBUGGER_LIB] Failed to capture xml-http payload', error)
+            logger.error('DEBUGGER_LIB', 'Failed to capture xml-http payload', error)
           }
         },
       })
     )
   } catch (error) {
-    console.warn('XMLHttpRequest instrumentation not available:', error)
+    logger.warn('DEBUGGER_LIB', 'XMLHttpRequest instrumentation not available', error)
   }
 
   // Custom React Native instrumentations

package/src/otel/instrumentations/reactNativeInstrumentation.ts

@@ -1,4 +1,5 @@
 import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { logger } from '../../utils'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
@@ -18,7 +19,7 @@ export class ReactNativeInstrumentation extends InstrumentationBase {
         this._wrap(AsyncStorage, 'setItem', this._wrapAsyncStorage)
       }
     } catch (error) {
-      console.warn('@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
+      logger.warn('DEBUGGER_LIB', '@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
     }
   }