CSV Log Viewer

A comprehensive TypeScript-based log viewer application for analyzing CSV log data with advanced filtering, sorting, and export capabilities.

• 📁 File Upload: Drag-and-drop or click to upload CSV files (up to 50MB)
• 📧 Email Filter: Filter logs by email address with autocomplete suggestions
• 🔍 Trace ID Filter: Filter logs by data.traceId with autocomplete suggestions
• ⚡ Real-time Search: Instant filtering as you type
• 📊 Data Export: Export filtered results to CSV format

• 🔄 Sorting: Click column headers to sort by any field
• 📄 Pagination: Handle large datasets with configurable page sizes (25/50/100/200)
• 🔍 Row Expansion: Click to expand rows and view detailed JSON data
• 📋 Copy to Clipboard: Copy individual trace IDs or full records
• ⌨️ Keyboard Shortcuts: Efficient navigation with hotkeys
• 📱 Responsive Design: Works seamlessly on desktop and mobile
• ⚠️ Error Handling: Comprehensive error reporting and data validation

• 🔧 Smart CSV Parsing: Handles both tab-separated and comma-separated values
• 🛡️ Data Validation: Validates required columns and data integrity
• 🔄 JSON Parsing: Automatically parses JSON data fields with fallback handling
• 📈 Analytics: Track parsing warnings and data quality issues

├── backend/
│   └── index.ts             # Hono-based HTTP server with file upload handling
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component with state management
│   │   ├── FileUpload.tsx   # Drag-and-drop file upload widget
│   │   ├── FilterControls.tsx # Advanced filtering with autocomplete
│   │   ├── LogTable.tsx     # Sortable, paginated data table
│   │   └── KeyboardShortcuts.tsx # Keyboard navigation support
│   ├── index.html           # Main HTML template with TailwindCSS
│   ├── index.tsx            # React application entry point
│   └── style.css            # Enhanced custom styles and animations
├── shared/
│   └── types.ts             # Comprehensive TypeScript type definitions
├── sample_data.csv          # Example CSV file for testing
└── README.md

1. Upload Data: Use the file upload widget to select your CSV file
2. Apply Filters: Use email and trace ID filters to narrow down results
3. Explore Data: Click on rows to expand and view detailed information
4. Export Results: Export filtered data for further analysis

• Ctrl + U: Upload new file
• Ctrl + K: Clear all data
• Ctrl + E: Export filtered data
• ?: Show/hide keyboard shortcuts help
• Esc: Close help modal

The application expects CSV data with these required columns:

• store_record.id - Unique record identifier
• key - Record key/identifier
• data - JSON string containing log data
• email - User email address

Optional columns (will be displayed if present):

• created_at - Record creation timestamp
• updated_at - Record update timestamp
• database_id - Database identifier
• organization_id - Organization identifier
• user_id - User identifier
• api_appuser.id - API app user identifier

The data field should contain JSON with these common fields:

{
  "mod": {
    "id": "@foundever/everassist/wrap-up",
    "version": "4.8.6"
  },
  "url": "https://example.com",
  "data": {
    "from": "fab",
    "traceId": "ec18475f-9549-481c-a1c4-497801153f57"
  },
  "email": "user@example.com",
  "event": "callSummaryStart:click",
  "timestamp": "2025-07-29T14:11:36.391Z",
  "platformType": "contentScript"
}

• File Processing: Handles large CSV files with streaming
• Error Handling: Comprehensive validation and error reporting
• CORS Support: Automatic cross-origin request handling
• Health Monitoring: Built-in health check endpoint

• State Management: Efficient React hooks for data and UI state
• Performance: Optimized rendering with useMemo and pagination
• Accessibility: Keyboard navigation and screen reader support
• Responsive: Mobile-first design with TailwindCSS

1. Upload Validation: File type, size, and format checks
2. CSV Parsing: Smart detection of separators (tab/comma)
3. Data Validation: Required column verification
4. JSON Processing: Safe parsing with error recovery
5. Filtering: Real-time client-side filtering
6. Export: Clean CSV generation with proper escaping

The application provides detailed error reporting for:

• File Format Issues: Invalid CSV structure or encoding
• Missing Columns: Required fields not found
• JSON Parsing Errors: Malformed data fields
• Size Limitations: Files exceeding 50MB limit
• Network Issues: Upload and processing failures

• Large File Support: Handles files up to 50MB
• Efficient Filtering: Client-side filtering with debouncing
• Pagination: Renders only visible rows for better performance
• Memory Management: Optimized data structures and cleanup

• File Validation: Strict CSV file type checking
• Size Limits: Prevents oversized file uploads
• Data Sanitization: Safe JSON parsing and HTML escaping
• No Persistence: Data is processed in-memory only

• Drag & Drop: Intuitive file upload experience
• Loading States: Clear feedback during processing
• Error Messages: User-friendly error descriptions
• Autocomplete: Smart suggestions for filters
• Copy Actions: One-click copying of data
• Responsive Tables: Horizontal scrolling on mobile
• Dark Mode: Automatic system preference detection