react-native-debug-toolkit 0.5.2 → 0.6.0

package/index.js

@@ -11,6 +11,7 @@ import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
 import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLogFeature'
 import { createNavigationLogFeature, addNavigationLog } from './lib/features/NavigationLogFeature'
 import { useNavigationLogger } from './lib/hooks/useNavigationLogger'
+import { createTrackFeature, addTrackLog } from './lib/features/TrackFeature'
 
 // Function to clear all logs and close the panel
 const clearAll = () => {
@@ -30,9 +31,11 @@ export {
   addZustandLog,
   createNavigationLogFeature,
   addNavigationLog,
+  addTrackLog,
   useNavigationLogger,
   isDebugMode,
-  clearAll
+  clearAll,
+  createTrackFeature
 }
 
 export default DebugToolKit

package/lib/DebugToolKit.js

@@ -13,7 +13,9 @@ export default class DebugToolKit {
     }
 
     // Set the debug mode flag directly from NativeDebugLibs
-    this.isDebugMode = NativeDebugLibs.isDebugBuild()
+    // this.isDebugMode = NativeDebugLibs.isDebugBuild()
+    this.isDebugMode = true
+
     this.floatPanel = null
     this.features = []
     this.isPanelVisible = false

package/lib/features/TrackFeature.js

@@ -0,0 +1,97 @@
+const MAX_LOGS = 200; // Max number of track events to store
+const logs = [];
+
+const setup = () => {
+    
+  // Note: Actual event tracking will be done in the main app code
+  // This is just a setup function for compatibility with the feature API
+};
+
+// Function to add track event log
+export const addTrackLog = (eventData) => {
+  if (!__DEV__) {
+    return;
+  }
+
+  // Store log data
+  const logEntry = {
+    timestamp: new Date(),
+    eventName: eventData.eventName || 'unknown_event',
+    entityType: eventData.entityType,
+    entityName: eventData.entityName,
+    pageId: eventData.pageId,
+    objId: eventData.objId,
+    entityPath: eventData.entityPath,
+    objType: eventData.objType,
+    objPt: eventData.objPt,
+    refPageLocation: eventData.refPageLocation,
+    position: eventData.position,
+    entityLocation: eventData.entityLocation,
+    frontOperation: eventData.frontOperation,
+    sessionId: eventData.sessionId,
+    requestId: eventData.requestId,
+    searchKeywored: eventData.searchKeywored,
+    enSearchKeywored: eventData.enSearchKeywored,
+    // Include any additional custom properties
+    ...eventData
+  };
+
+  logs.push(logEntry);
+
+  // Trim logs if they exceed the maximum limit
+  if (logs.length > MAX_LOGS) {
+    logs.splice(0, logs.length - MAX_LOGS);
+  }
+};
+
+// Get event statistics
+export const getEventStats = () => {
+  const stats = {};
+  logs.forEach(log => {
+    const eventName = log.eventName;
+    if (!stats[eventName]) {
+      stats[eventName] = {
+        count: 0,
+        lastSeen: log.timestamp,
+        entityTypes: new Set(),
+        operations: new Set()
+      };
+    }
+    stats[eventName].count++;
+    if (log.timestamp > stats[eventName].lastSeen) {
+      stats[eventName].lastSeen = log.timestamp;
+    }
+    if (log.entityType) {
+      stats[eventName].entityTypes.add(log.entityType);
+    }
+    if (log.frontOperation) {
+      stats[eventName].operations.add(log.frontOperation);
+    }
+  });
+
+  // Convert Sets to Arrays for display
+  Object.keys(stats).forEach(eventName => {
+    stats[eventName].entityTypes = Array.from(stats[eventName].entityTypes);
+    stats[eventName].operations = Array.from(stats[eventName].operations);
+  });
+
+  return stats;
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createTrackFeature = () => {
+  return {
+    name: 'track',
+    label: 'Track Events',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+}; 

package/lib/index.js

@@ -5,11 +5,13 @@ import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
 import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
 import { createThirdPartyLibsFeature } from './features/ThirdPartyLibsFeature'
+import { createTrackFeature, addTrackLog } from './features/TrackFeature'
 import NativeDebugLibs from './NativeDebugLibs'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
   network: createNetworkFeature,
+  track: createTrackFeature,
   console: createConsoleLogFeature,
   // performance: createPerformanceFeature,
   zustand: createZustandLogFeature,
@@ -20,10 +22,11 @@ const featureRegistry = {
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']
+const defaultFeatures = ['network', 'track', 'navigation','zustand', 'thirdPartyLibs', 'console']
 
 // Export the debug mode status - this is used by the app
-const isDebugMode = NativeDebugLibs.isDebugBuild();
+// const isDebugMode = NativeDebugLibs.isDebugBuild();
+const isDebugMode = true
 
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
@@ -103,6 +106,8 @@ export {
   createNavigationLogFeature,
   createThirdPartyLibsFeature,
   addNavigationLog,
+  createTrackFeature,
+  addTrackLog,
   zustandLogMiddleware,  // Export middleware for use in Zustand stores
   featureRegistry,
   isDebugMode

package/lib/types/TrackTypes.ts

@@ -0,0 +1,92 @@
+// Define the entity types and names as constants for better type safety
+export const EntityType = {
+  mine_module: 'mine_module',
+  search_module: 'search_module',
+  page_view: 'page_view',
+  error_module: 'error_module',
+  navigation: 'navigation',
+  content: 'content',
+  user_action: 'user_action',
+} as const
+
+export const EntityName = {
+  MINE_POST: 'MINE_POST',
+  HOME_PAGE: 'HOME_PAGE',
+  SEARCH_BAR: 'SEARCH_BAR',
+  PROFILE_PAGE: 'PROFILE_PAGE',
+  NAVIGATION_TAB: 'NAVIGATION_TAB',
+  CONTENT_ITEM: 'CONTENT_ITEM',
+  USER_BUTTON: 'USER_BUTTON',
+} as const
+
+export type TrackEventOptions = {
+  entityType: (typeof EntityType)[keyof typeof EntityType]
+  entityName?: (typeof EntityName)[keyof typeof EntityName]
+  pageId?: string
+  objId?: string
+  entityPath?: string
+  objType?: number
+  objPt?: string // 瀑布流作品pt
+  refPageLocation?: string
+  position?: string
+  entityLocation?: string
+  frontOperation?: string
+  sessionId?: string //搜索模块需要
+  requestId?: string //搜索模块需要
+  searchKeywored?: string //搜索模块需要
+  enSearchKeywored?: string //搜索模块需要
+}
+
+// Complete event structure that includes the event name and all tracking options
+export type TrackEvent = {
+  eventName: string
+  timestamp: Date
+} & TrackEventOptions
+
+// Track feature interface
+export interface ITrackFeature {
+  setup(): ITrackFeature
+  getData(): TrackEvent[]
+  cleanup(): void
+  logEvent(eventData: TrackEventOptions & { eventName: string }): void
+  getEventStats(): EventStats
+  addEventToBlacklist(pattern: string | RegExp): void
+  removeEventFromBlacklist(pattern: string | RegExp): void
+  clearBlacklist(): void
+  getBlacklist(): (string | RegExp)[]
+}
+
+// Event statistics structure
+export type EventStats = {
+  [eventName: string]: {
+    count: number
+    lastSeen: Date
+    entityTypes: string[]
+    operations: string[]
+  }
+}
+
+// Common event names used in the application
+export const CommonEventNames = {
+  LOG_ACTION_FRONT: 'log_action_front',
+  LOG_ERROR_FRONT: 'log_error_front',
+  LOG_VIEW_FRONT: 'log_view_front',
+  LOG_SEARCH_FRONT: 'log_search_front',
+  LOG_NAVIGATION_FRONT: 'log_navigation_front',
+} as const
+
+// Common front operations
+export const FrontOperations = {
+  CLICK: 'click',
+  VIEW: 'view',
+  SEARCH: 'search',
+  SWIPE: 'swipe',
+  SCROLL: 'scroll',
+  ERROR: 'error',
+  NAVIGATE: 'navigate',
+} as const
+
+// Helper type for creating events with better type safety
+export type CreateTrackEvent<T extends keyof typeof CommonEventNames> = {
+  eventName: (typeof CommonEventNames)[T]
+} & TrackEventOptions 

package/lib/views/FloatPanelView.js

@@ -21,6 +21,8 @@ import SubViewConsoleLogs from './SubViewConsoleLogs'
 import SubViewZustandLogs from './SubViewZustandLogs'
 import SubViewNavigationLogs from './SubViewNavigationLogs'
 import SubViewThirdPartyLibs from './SubViewThirdPartyLibs'
+import SubViewTrackLogs from './SubViewTrackLogs'
+
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
 export default class FloatPanelView extends Component {
@@ -320,6 +322,10 @@ export default class FloatPanelView extends Component {
     if (feature.name === 'navigation') {
       return <SubViewNavigationLogs logs={data} />
     }
+
+    if (feature.name === 'track') {
+      return <SubViewTrackLogs logs={data} />
+    }
     
     if (feature.name === 'thirdPartyLibs') {
       return <SubViewThirdPartyLibs libraries={data} />

package/lib/views/SubViewTrackLogs.js

@@ -0,0 +1,318 @@
+import React, { useState } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import TrackLogDetails from './TrackLogDetails'
+
+const SubViewTrackLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  const getEventColor = (eventName) => {
+    if (eventName?.includes('error')) return '#ff4444'
+    if (eventName?.includes('click')) return '#4CAF50'
+    if (eventName?.includes('view')) return '#2196F3'
+    if (eventName?.includes('search')) return '#FF9800'
+    return '#9C27B0'
+  }
+
+  const getTimeAgo = (timestamp) => {
+    const now = new Date()
+    const eventTime = new Date(timestamp)
+    const diffMs = now - eventTime
+    const diffSeconds = Math.floor(diffMs / 1000)
+    const diffMinutes = Math.floor(diffSeconds / 60)
+    const diffHours = Math.floor(diffMinutes / 60)
+
+    if (diffSeconds < 60) {
+      return `${diffSeconds}s ago`
+    } else if (diffMinutes < 60) {
+      return `${diffMinutes}m ago`
+    } else if (diffHours < 24) {
+      return `${diffHours}h ago`
+    } else {
+      const diffDays = Math.floor(diffHours / 24)
+      return `${diffDays}d ago`
+    }
+  }
+
+  const renderLogItem = ({ item }) => {
+    const eventColor = getEventColor(item.eventName)
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.eventIndicator, { backgroundColor: eventColor }]}
+          />
+
+          <View style={styles.logContent}>
+            <View style={styles.eventRow}>
+              <Text style={[styles.eventName, { color: eventColor }]}>
+                {item.eventName || 'Unknown Event'}
+              </Text>
+              {item.entityType && (
+                <Text style={styles.entityType}>
+                  {item.entityType}
+                </Text>
+              )}
+            </View>
+
+            {item.entityName && (
+              <Text style={styles.entityName} numberOfLines={1}>
+                {item.entityName}
+              </Text>
+            )}
+
+            {item.frontOperation && (
+              <Text style={styles.operation} numberOfLines={1}>
+                Operation: {item.frontOperation}
+              </Text>
+            )}
+
+            <View style={styles.logFooter}>
+              <Text style={styles.time}>
+                {item.timestamp
+                  ? getTimeAgo(item.timestamp)
+                  : 'Unknown time'}
+              </Text>
+              
+              <View style={styles.additionalInfo}>
+                {item.pageId && (
+                  <Text style={styles.pageId} numberOfLines={1}>
+                    Page: {item.pageId}
+                  </Text>
+                )}
+                {item.position && (
+                  <Text style={styles.position}>
+                    Pos: {item.position}
+                  </Text>
+                )}
+              </View>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view with a back button
+  if (selectedLog) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity 
+            style={styles.backButton} 
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+          <View style={styles.headerEventInfo}>
+            <Text
+              style={[
+                styles.headerEvent,
+                { color: getEventColor(selectedLog.eventName) },
+              ]}>
+              {selectedLog.eventName || 'Unknown Event'}
+            </Text>
+            {selectedLog.entityType && (
+              <Text style={styles.headerEntityType}>
+                {selectedLog.entityType}
+              </Text>
+            )}
+          </View>
+        </View>
+        <TrackLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {logs.length === 0 ? (
+        <View style={styles.emptyContainer}>
+          <Text style={styles.emptyText}>No track events logged yet</Text>
+          <Text style={styles.emptySubtext}>
+            Track events will appear here as they occur during development
+          </Text>
+        </View>
+      ) : (
+        <>
+          <View style={styles.statsContainer}>
+            <Text style={styles.statsText}>
+              {logs.length} events logged
+            </Text>
+          </View>
+          <FlatList
+            data={[...logs].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))}
+            renderItem={renderLogItem}
+            keyExtractor={(item, index) => `${item.timestamp}-${index}`}
+            style={styles.list}
+            showsVerticalScrollIndicator={true}
+          />
+        </>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 8,
+  },
+  emptySubtext: {
+    textAlign: 'center',
+    color: '#999',
+    fontSize: 14,
+  },
+  statsContainer: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  statsText: {
+    fontSize: 12,
+    color: '#666',
+    fontWeight: '500',
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    padding: 12,
+  },
+  eventIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 12,
+  },
+  logContent: {
+    flex: 1,
+  },
+  eventRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  eventName: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  entityType: {
+    fontSize: 11,
+    backgroundColor: '#f0f0f0',
+    color: '#666',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 6,
+    fontWeight: '500',
+  },
+  entityName: {
+    fontSize: 14,
+    color: '#333',
+    marginBottom: 4,
+    fontWeight: '500',
+  },
+  operation: {
+    fontSize: 13,
+    color: '#666',
+    marginBottom: 6,
+    fontStyle: 'italic',
+  },
+  logFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
+  time: {
+    fontSize: 12,
+    color: '#999',
+  },
+  additionalInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  pageId: {
+    fontSize: 11,
+    color: '#666',
+    backgroundColor: '#f8f9fa',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3,
+    maxWidth: 80,
+  },
+  position: {
+    fontSize: 11,
+    color: '#666',
+    backgroundColor: '#f8f9fa',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3,
+  },
+  detailsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
+    marginRight: 10,
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+  },
+  headerEventInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerEvent: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginRight: 10,
+  },
+  headerEntityType: {
+    fontSize: 12,
+    backgroundColor: '#f0f0f0',
+    color: '#666',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 8,
+    fontWeight: '500',
+  },
+})
+
+export default SubViewTrackLogs

package/lib/views/TrackLogDetails.js

@@ -0,0 +1,481 @@
+import React, { useState, useCallback } from 'react'
+import { View, Text, StyleSheet, Clipboard, Dimensions } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window')
+
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+}
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
+  if (value === null) {
+    return <Text style={styles.jsonNull}>null</Text>
+  }
+
+  if (value === undefined) {
+    return <Text style={styles.jsonNull}>undefined</Text>
+  }
+
+  if (typeof value === 'boolean') {
+    return <Text style={styles.jsonBoolean}>{value.toString()}</Text>
+  }
+
+  if (typeof value === 'number') {
+    return <Text style={styles.jsonNumber}>{value}</Text>
+  }
+
+  if (typeof value === 'string') {
+    return (
+      <Text style={styles.jsonString} selectable={true}>
+        {value}
+      </Text>
+    )
+  }
+
+  // For objects and arrays, use JSONTree for improved large data handling
+  if (typeof value === 'object') {
+    return (
+      <JSONTree 
+         data={value} 
+         theme={theme} 
+         invertTheme={true} 
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < maxExpandLevel}
+      />
+    )
+  }
+
+  return <Text>{String(value)}</Text>
+}
+
+const EventTypeBadge = ({ eventName, entityType }) => {
+  const getEventColor = () => {
+    if (eventName?.includes('error')) return '#ff4444'
+    if (eventName?.includes('click')) return '#4CAF50'
+    if (eventName?.includes('view')) return '#2196F3'
+    if (eventName?.includes('search')) return '#FF9800'
+    return '#9C27B0'
+  }
+
+  return (
+    <View style={styles.badgeContainer}>
+      <Text style={[styles.eventBadge, { backgroundColor: getEventColor() }]}>
+        {eventName || 'Unknown Event'}
+      </Text>
+      {entityType && (
+        <Text style={[styles.entityBadge]}>
+          {entityType}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+const TrackLogDetails = ({ log }) => {
+  const generateAnalyticsPayload = useCallback(() => {
+    if (!log) {
+      return 'No event data available'
+    }
+
+    const payload = {
+      eventName: log.eventName,
+      timestamp: log.timestamp,
+      ...Object.fromEntries(
+        Object.entries(log).filter(([key, value]) => 
+          key !== 'timestamp' && value !== undefined && value !== null
+        )
+      )
+    }
+
+    return JSON.stringify(payload, null, 2)
+  }, [log])
+
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Event data is missing</Text>
+      </View>
+    )
+  }
+
+  const coreProperties = {
+    eventName: log.eventName,
+    entityType: log.entityType,
+    entityName: log.entityName,
+    frontOperation: log.frontOperation
+  }
+
+  const identificationProperties = {
+    pageId: log.pageId,
+    objId: log.objId,
+    entityPath: log.entityPath,
+    objType: log.objType,
+    objPt: log.objPt
+  }
+
+  const locationProperties = {
+    refPageLocation: log.refPageLocation,
+    position: log.position,
+    entityLocation: log.entityLocation
+  }
+
+  const searchProperties = {
+    sessionId: log.sessionId,
+    requestId: log.requestId,
+    searchKeywored: log.searchKeywored,
+    enSearchKeywored: log.enSearchKeywored
+  }
+
+  const filterUndefinedProperties = (obj) => {
+    return Object.fromEntries(
+      Object.entries(obj).filter(([key, value]) => value !== undefined && value !== null && value !== '')
+    )
+  }
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+      
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+          <EventTypeBadge eventName={log.eventName} entityType={log.entityType} />
+          {log.entityName && (
+            <Text style={styles.entityName} selectable={true}>
+              {log.entityName}
+            </Text>
+          )}
+          {log.frontOperation && (
+            <Text style={styles.operation}>
+              Operation: {log.frontOperation}
+            </Text>
+          )}
+        </View>
+        <CopyButton text={generateAnalyticsPayload()} />
+      </View>
+
+      <CollapsibleSection title='Core Properties' initiallyExpanded={true}>
+        <View style={styles.content}>
+          <View style={styles.propertiesGrid}>
+            {Object.entries(filterUndefinedProperties(coreProperties)).map(([key, value]) => (
+              <View key={key} style={styles.propertyRow}>
+                <Text style={styles.propertyKey}>{key}:</Text>
+                <Text style={styles.propertyValue} selectable={true}>{value}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      {Object.keys(filterUndefinedProperties(identificationProperties)).length > 0 && (
+        <CollapsibleSection title='Identification Properties'>
+          <View style={styles.content}>
+            <View style={styles.propertiesGrid}>
+              {Object.entries(filterUndefinedProperties(identificationProperties)).map(([key, value]) => (
+                <View key={key} style={styles.propertyRow}>
+                  <Text style={styles.propertyKey}>{key}:</Text>
+                  <Text style={styles.propertyValue} selectable={true}>{value}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        </CollapsibleSection>
+      )}
+
+      {Object.keys(filterUndefinedProperties(locationProperties)).length > 0 && (
+        <CollapsibleSection title='Location Properties'>
+          <View style={styles.content}>
+            <View style={styles.propertiesGrid}>
+              {Object.entries(filterUndefinedProperties(locationProperties)).map(([key, value]) => (
+                <View key={key} style={styles.propertyRow}>
+                  <Text style={styles.propertyKey}>{key}:</Text>
+                  <Text style={styles.propertyValue} selectable={true}>{value}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        </CollapsibleSection>
+      )}
+
+      {Object.keys(filterUndefinedProperties(searchProperties)).length > 0 && (
+        <CollapsibleSection title='Search Properties'>
+          <View style={styles.content}>
+            <View style={styles.propertiesGrid}>
+              {Object.entries(filterUndefinedProperties(searchProperties)).map(([key, value]) => (
+                <View key={key} style={styles.propertyRow}>
+                  <Text style={styles.propertyKey}>{key}:</Text>
+                  <Text style={styles.propertyValue} selectable={true}>{value}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        </CollapsibleSection>
+      )}
+
+      <CollapsibleSection title='Complete Event Data'>
+        <View style={styles.content}>
+          <View style={styles.dataSectionHeader}>
+            <Text style={styles.dataSectionTitle}>Full JSON Payload</Text>
+            <CopyButton text={generateAnalyticsPayload()} />
+          </View>
+          <View style={styles.dataContentWrapper}>
+            <ScrollView 
+              style={styles.dataContent}
+              nestedScrollEnabled={true}
+              bounces={false}
+              showsVerticalScrollIndicator={true}>
+              <JSONValue value={log} maxExpandLevel={2} />
+            </ScrollView>
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='Timing Information'>
+        <View style={styles.content}>
+          <View style={styles.propertyRow}>
+            <Text style={styles.propertyKey}>Timestamp:</Text>
+            <Text style={styles.propertyValue}>
+              {log.timestamp
+                ? new Date(log.timestamp).toLocaleString()
+                : 'Unknown'}
+            </Text>
+          </View>
+          <View style={styles.propertyRow}>
+            <Text style={styles.propertyKey}>Time ago:</Text>
+            <Text style={styles.propertyValue}>
+              {log.timestamp
+                ? getTimeAgo(log.timestamp)
+                : 'Unknown'}
+            </Text>
+          </View>
+        </View>
+      </CollapsibleSection>
+    </ScrollView>
+  )
+}
+
+const getTimeAgo = (timestamp) => {
+  const now = new Date()
+  const eventTime = new Date(timestamp)
+  const diffMs = now - eventTime
+  const diffSeconds = Math.floor(diffMs / 1000)
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  const diffHours = Math.floor(diffMinutes / 60)
+
+  if (diffSeconds < 60) {
+    return `${diffSeconds} seconds ago`
+  } else if (diffMinutes < 60) {
+    return `${diffMinutes} minutes ago`
+  } else if (diffHours < 24) {
+    return `${diffHours} hours ago`
+  } else {
+    const diffDays = Math.floor(diffHours / 24)
+    return `${diffDays} days ago`
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'flex-start',
+  },
+  headerInfo: {
+    flex: 1,
+    marginRight: 10,
+  },
+  badgeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  eventBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  entityBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 8,
+    backgroundColor: '#f0f0f0',
+    color: '#333',
+    fontSize: 11,
+    fontWeight: '500',
+  },
+  entityName: {
+    fontSize: 16,
+    color: '#333',
+    marginBottom: 4,
+    fontWeight: '600',
+  },
+  operation: {
+    fontSize: 14,
+    color: '#666',
+    fontStyle: 'italic',
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  content: {
+    padding: 15,
+  },
+  propertiesGrid: {
+    gap: 8,
+  },
+  propertyRow: {
+    marginBottom: 8,
+  },
+  propertyKey: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#666',
+    marginBottom: 2,
+  },
+  propertyValue: {
+    fontSize: 14,
+    color: '#333',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  dataSectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  dataSectionTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#666',
+  },
+  dataContentWrapper: {
+    flex: 1,
+  },
+  dataContent: {
+    flex: 1,
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  jsonString: {
+    color: '#CB772F',
+  },
+  jsonNumber: {
+    color: '#2878D0',
+  },
+  jsonBoolean: {
+    color: '#2878D0',
+    fontWeight: 'bold',
+  },
+  jsonNull: {
+    color: '#A0A0A0',
+    fontStyle: 'italic',
+  },
+})
+
+export default TrackLogDetails 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",