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

package/src/utils/logger.ts

@@ -0,0 +1,225 @@
+/**
+ * Centralized logger utility for the session recorder
+ * Provides consistent logging across all components
+ */
+
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3
+}
+
+export interface LoggerConfig {
+  level: LogLevel
+  enableConsole: boolean
+  enablePrefix: boolean
+  prefix: string
+}
+
+class Logger {
+  private config: LoggerConfig = {
+    level: LogLevel.INFO,
+    enableConsole: true,
+    enablePrefix: true,
+    prefix: '[SessionRecorder]',
+  }
+
+  private componentPrefixes: Map<string, string> = new Map([
+    ['ScreenRecorder', '📸'],
+    ['GestureRecorder', '👆'],
+    ['GestureCaptureWrapper', '📸'],
+    ['SessionRecorderContext', '🎯'],
+    ['EventExporter', '📤'],
+    ['NavigationTracker', '📸'],
+    ['RecorderReactNativeSDK', '📤'],
+    ['DEBUGGER_LIB', '🔍'],
+  ])
+
+  /**
+   * Configure the logger
+   * @param config - Logger configuration
+   */
+  configure(config: Partial<LoggerConfig>): void {
+    this.config = { ...this.config, ...config }
+  }
+
+  /**
+   * Set the log level
+   * @param level - Log level to set
+   */
+  setLevel(level: LogLevel): void {
+    this.config.level = level
+  }
+
+  /**
+   * Enable or disable console output
+   * @param enabled - Whether to enable console output
+   */
+  setConsoleEnabled(enabled: boolean): void {
+    this.config.enableConsole = enabled
+  }
+
+  /**
+   * Add or update a component prefix
+   * @param component - Component name
+   * @param emoji - Emoji prefix for the component
+   */
+  setComponentPrefix(component: string, emoji: string): void {
+    this.componentPrefixes.set(component, emoji)
+  }
+
+  /**
+   * Get the formatted prefix for a component
+   * @param component - Component name
+   * @returns Formatted prefix string
+   */
+  private getPrefix(component: string): string {
+    if (!this.config.enablePrefix) return ''
+
+    const emoji = this.componentPrefixes.get(component) || '📝'
+    return `${this.config.prefix} ${emoji} [${component}]`
+  }
+
+  /**
+   * Check if a log level should be output
+   * @param level - Log level to check
+   * @returns True if should output
+   */
+  private shouldLog(level: LogLevel): boolean {
+    return level >= this.config.level && this.config.enableConsole
+  }
+
+  /**
+   * 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(component: string, level: LogLevel, message: string, data?: any): string {
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const levelName = LogLevel[level]
+
+    let formattedMessage = `${prefix} ${levelName} ${message}`
+
+    if (data !== undefined) {
+      formattedMessage += ` ${JSON.stringify(data)}`
+    }
+
+    return formattedMessage
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.DEBUG)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.DEBUG, message, data)
+    // eslint-disable-next-line no-console
+    console.log(formattedMessage)
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.INFO)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.INFO, message, data)
+    // eslint-disable-next-line no-console
+    console.log(formattedMessage)
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.WARN)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.WARN, message, data)
+    // eslint-disable-next-line no-console
+    console.warn(formattedMessage)
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.ERROR)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.ERROR, message, data)
+    // eslint-disable-next-line no-console
+    console.error(formattedMessage)
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.INFO)) return
+
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const formattedMessage = `${prefix} ✅ ${message}`
+
+    let fullMessage = formattedMessage
+    if (data !== undefined) {
+      fullMessage += ` ${JSON.stringify(data)}`
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(fullMessage)
+  }
+
+  /**
+   * 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 {
+    if (!this.shouldLog(LogLevel.ERROR)) return
+
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const formattedMessage = `${prefix} ❌ ${message}`
+
+    let fullMessage = formattedMessage
+    if (data !== undefined) {
+      fullMessage += ` ${JSON.stringify(data)}`
+    }
+
+    // eslint-disable-next-line no-console
+    console.error(fullMessage)
+  }
+}
+
+// Export a singleton instance
+export const logger = new Logger()
+
+// Export convenience functions for common use cases
+export const logDebug = (component: string, message: string, data?: any) => logger.debug(component, message, data)
+export const logInfo = (component: string, message: string, data?: any) => logger.info(component, message, data)
+export const logWarn = (component: string, message: string, data?: any) => logger.warn(component, message, data)
+export const logError = (component: string, message: string, data?: any) => logger.error(component, message, data)
+export const logSuccess = (component: string, message: string, data?: any) => logger.success(component, message, data)
+export const logFailure = (component: string, message: string, data?: any) => logger.failure(component, message, data)

package/src/utils/rrweb-events.ts

@@ -0,0 +1,311 @@
+import { Dimensions } from 'react-native'
+import { EventType, eventWithTime, NodeType, serializedNodeWithId, IncrementalSource, mutationData } 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 function createRecordingMetaEvent(): eventWithTime {
+  const screenDimensions = Dimensions.get('window')
+
+  return {
+    type: EventType.Meta,
+    data: {
+      href: 'https://go.multiplayer.app/session-recorder-react-native',
+      width: screenDimensions.width,
+      height: screenDimensions.height,
+    },
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * 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 function createFullSnapshotEvent(
+  base64Image: string,
+  width: number,
+  height: number,
+  captureFormat: string = 'jpg',
+  nodeIdCounter: { current: number },
+): eventWithTime {
+  // Create a virtual DOM node representing the screen as an image
+  const imageNodeId = nodeIdCounter.current++
+  const imageNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: imageNodeId,
+    tagName: 'img',
+    attributes: {
+      src: `data:image/${captureFormat};base64,${base64Image}`,
+      width: width.toString(),
+      height: height.toString(),
+      style: `width: ${width}px; height: ${height}px;`,
+    },
+    childNodes: [],
+  }
+
+  // Create the root container
+  const rootNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: nodeIdCounter.current++,
+    tagName: 'div',
+    attributes: {
+      style: `width: ${width}px; height: ${height}px; position: relative;`,
+    },
+    childNodes: [imageNode],
+  }
+
+  const domNode: serializedNodeWithId = {
+    type: NodeType.Document,
+    childNodes: [
+      {
+        type: NodeType.DocumentType,
+        name: 'html',
+        publicId: '',
+        systemId: '',
+        id: nodeIdCounter.current++,
+      },
+      {
+        type: NodeType.Element,
+        tagName: 'html',
+        attributes: {},
+        childNodes: [
+          {
+            type: NodeType.Element,
+            tagName: 'head',
+            attributes: {},
+            childNodes: [
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: { charset: 'utf-8' },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+              {
+                type: 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: NodeType.Element,
+            tagName: 'body',
+            attributes: {},
+            childNodes: [rootNode],
+            id: nodeIdCounter.current++,
+          },
+        ],
+        id: nodeIdCounter.current++,
+      },
+    ],
+    id: nodeIdCounter.current++,
+  }
+
+  return {
+    type: EventType.FullSnapshot,
+    data: {
+      node: domNode,
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * 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 function createIncrementalSnapshotWithImageUpdate(
+  base64Image: string,
+  imageNodeId: number,
+  captureFormat: string = 'jpg',
+): eventWithTime {
+  const mutationData: mutationData = {
+    source: IncrementalSource.Mutation,
+    texts: [],
+    attributes: [
+      {
+        id: imageNodeId,
+        attributes: {
+          src: `data:image/${captureFormat};base64,${base64Image}`,
+        },
+      },
+    ],
+    removes: [],
+    adds: [],
+  }
+
+  return {
+    type: EventType.IncrementalSnapshot,
+    data: mutationData,
+    timestamp: Date.now(),
+  }
+}
+
+/**
+ * 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 function createImageNode(
+  base64Image: string,
+  width: number,
+  height: number,
+  captureFormat: string = 'jpg',
+  nodeId: number,
+): serializedNodeWithId {
+  return {
+    type: NodeType.Element,
+    id: nodeId,
+    tagName: 'img',
+    attributes: {
+      src: `data:image/${captureFormat};base64,${base64Image}`,
+      width: width.toString(),
+      height: height.toString(),
+      style: `width: ${width}px; height: ${height}px;`,
+    },
+    childNodes: [],
+  }
+}
+
+/**
+ * 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 function createDocumentNode(
+  imageNode: serializedNodeWithId,
+  width: number,
+  height: number,
+  nodeIdCounter: { current: number },
+): serializedNodeWithId {
+  // Create the root container
+  const rootNode: serializedNodeWithId = {
+    type: NodeType.Element,
+    id: nodeIdCounter.current++,
+    tagName: 'div',
+    attributes: {
+      style: `width: ${width}px; height: ${height}px; position: relative;`,
+    },
+    childNodes: [imageNode],
+  }
+
+  return {
+    type: NodeType.Document,
+    childNodes: [
+      {
+        type: NodeType.DocumentType,
+        name: 'html',
+        publicId: '',
+        systemId: '',
+        id: nodeIdCounter.current++,
+      },
+      {
+        type: NodeType.Element,
+        tagName: 'html',
+        attributes: {},
+        childNodes: [
+          {
+            type: NodeType.Element,
+            tagName: 'head',
+            attributes: {},
+            childNodes: [
+              {
+                type: NodeType.Element,
+                tagName: 'meta',
+                attributes: { charset: 'utf-8' },
+                childNodes: [],
+                id: nodeIdCounter.current++,
+              },
+              {
+                type: 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: NodeType.Element,
+            tagName: 'body',
+            attributes: {},
+            childNodes: [rootNode],
+            id: nodeIdCounter.current++,
+          },
+        ],
+        id: nodeIdCounter.current++,
+      },
+    ],
+    id: nodeIdCounter.current++,
+  }
+}
+
+/**
+ * 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 function generateScreenHash(base64Image: string, sampleSize: number = 100): string {
+  // Use a simple hash that samples the beginning, middle, and end of the base64 string
+  // This is much faster than comparing the entire string
+  const start = base64Image.substring(0, sampleSize)
+  const middle = base64Image.substring(
+    Math.floor(base64Image.length / 2) - sampleSize / 2,
+    Math.floor(base64Image.length / 2) + sampleSize / 2,
+  )
+  const end = base64Image.substring(base64Image.length - sampleSize)
+
+  // Combine samples and create a simple hash
+  const combined = start + middle + end
+  return simpleHash(combined)
+}
+
+/**
+ * Simple hash function for string comparison
+ * @param str - String to hash
+ * @returns Hash value as string
+ */
+export function simpleHash(str: string): string {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(36)
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "0.0.1-alpha.6"
+export const version = "0.0.1-alpha.8"