🚀 Dishub Production Log Manager - Cursor Extension
Professional production console log monitoring for Cursor with real-time streaming, filtering, and rich context display.
Built with ❤️ by The DisHub
📦 Source Code: https://github.com/Matmax-Worldwide/log_manager
🆕 Latest Version: v1.0.8 - Enhanced with status bar controls, advanced filtering, and improved error handling
✨ Features
🚀 New in v1.0.8
- 🎯 Status Bar Controls - Visible buttons in the bottom right for easy monitoring control
- 🔍 Advanced Filtering - Filter logs by level with visual indicators (✅ Active, ⭕ Inactive)
- ⚡ Enhanced Error Handling - Better connection status tracking and retry logic
- ✅ Configuration Validation - Automatic validation of API endpoints
- 🎨 Improved UI - Better tree view organization and user experience
- 🔄 Toggle Commands - Easy start/stop with single click
- 📊 Connection Health - Real-time connection status monitoring
🌟 Core Features
- 🌐 Real-time Monitoring - Stream logs from your production server
- 📊 Rich Context - View user info, URLs, timestamps, and session data
- 🔍 Smart Filtering - Filter by log level, user, or time
- 📱 Cursor Integration - Native Cursor extension with tree view
- ⚡ WebSocket Support - Real-time updates without polling
- 📤 Export Capability - Export logs to JSON or text files
- 🎨 Beautiful UI - Intuitive tree view with icons and colors
🚀 Installation
Option 1: Install from VSIX (Recommended)
Build the extension:
cd cursor-production-logs
npm install
npm run compile
npm run package
Install in Cursor:
- Press
Cmd+Shift+P
(Mac) or Ctrl+Shift+P
(Windows/Linux)
- Type "Extensions: Install from VSIX"
- Select the generated
.vsix
file
Option 2: Development Installation
Clone and build:
git clone https://github.com/Matmax-Worldwide/log_manager.git
cd log_manager/cursor-production-logs
npm install
npm run compile
Open in Cursor:
- Open the
cursor-production-logs
folder in Cursor
- Press
F5
to run the extension in development mode
Option 3: Install from GitHub
Direct from repository:
git clone https://github.com/Matmax-Worldwide/log_manager.git
cd log_manager/cursor-production-logs
npm install
npm run compile
npm run package
⚙️ Configuration
Extension Settings
Configure the extension in Cursor settings:
{
"productionLogs.apiEndpoint": "https://your-app.com/api/logs",
"productionLogs.testEndpoint": "https://test-api.dishub.city/logs",
"productionLogs.endpointMode": "auto",
"productionLogs.pollingInterval": 5000,
"productionLogs.maxLogs": 1000,
"productionLogs.autoStart": false
}
🚀 Smart Endpoint Management
The extension automatically detects and manages endpoints:
- 🧪 Test Endpoint: Built-in test endpoint for development
- 🚀 Production Endpoint: Your configured production API
- 🔄 Auto Mode: Automatically chooses appropriate endpoint
- 📡 Easy Switching: Switch between modes with commands
API Endpoint Setup
Your production server needs to expose a logs API endpoint. The extension expects:
- GET /api/logs/recent - Fetch recent logs
- WebSocket /api/logs/websocket - Real-time log streaming
🎯 Usage
Starting Monitoring
- Click the status bar item 📊 in the bottom right corner
- Or use the Production Logs panel (left sidebar)
- Click "🚀 Start Production Logs Monitor" or use Command Palette
- View real-time logs in the tree view
Commands
- 🔄 Toggle Monitoring - Single click to start/stop (via status bar)
- 🚀 Start Monitoring - Begin collecting production logs
- ⏹️ Stop Monitoring - Stop collecting logs
- 🧹 Clear Logs - Clear all stored logs
- 📤 Export Logs - Export logs to file
- ⚙️ Open Settings - Quick access to configuration
🚀 New Production Commands
- 🧪 Switch to Test Endpoint - Use test endpoint for development
- 🚀 Switch to Production Endpoint - Use configured production endpoint
- 📡 Show Endpoint Information - Display current endpoint status and mode
Tree View Navigation
- 🟢 Status - Monitoring status and connection info
- 📊 Stats - Log counts by level
- 🔍 Filters - NEW! Filter logs by level with visual indicators
- ❌ ERROR - Error logs with details
- ⚠️ WARN - Warning logs with details
- ℹ️ INFO - Info logs with details
- 📝 LOG - General logs with details
- 🔍 DEBUG - Debug logs with details
- 🕒 Recent Logs - Latest log entries
🔍 New Filtering System
- Click on filter levels to show only specific log types
- Visual indicators show active filters (✅ Active, ⭕ Inactive)
- Easy toggle between filtered and unfiltered views
🔧 API Integration
Your production API should return logs in this format:
interface LogEntry {
level: 'log' | 'info' | 'warn' | 'error' | 'debug';
message: string;
data?: any;
timestamp: string;
url: string;
userAgent: string;
userId?: string;
sessionId?: string;
}
Example API Response
[
{
"level": "error",
"message": "Permission check failed",
"data": { "context": "customers", "action": "read" },
"timestamp": "2025-08-28T13:30:00.000Z",
"url": "https://your-app.com/dashboard",
"userAgent": "Mozilla/5.0...",
"userId": "123",
"sessionId": "abc123def456"
}
]
🛠️ Development
Project Structure
log_manager/
├── cursor-production-logs/
│ ├── src/
│ │ ├── extension.ts # Main extension entry point
│ │ ├── LogMonitor.ts # Log monitoring and API communication
│ │ └── ProductionLogsProvider.ts # Tree view data provider
│ ├── package.json # Extension manifest
│ ├── tsconfig.json # TypeScript configuration
│ ├── LICENSE # MIT License
│ └── README.md # This file
└── README.md # Main project README
Building
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Watch for changes
npm run watch
# Package extension
npm run package
Testing
- Open extension folder in Cursor
- Press F5 to run in development mode
- Test commands and tree view functionality
- Check console for any errors
🌟 Features in Detail
Real-time Streaming
- WebSocket Connection - Instant log updates
- Fallback Polling - HTTP polling if WebSocket fails
- Auto-reconnection - Automatic reconnection on connection loss
- Connection Health Monitoring - NEW! Real-time status tracking
Smart Filtering
- By Log Level - View only errors, warnings, etc.
- Visual Filter Indicators - NEW! Clear active/inactive status
- Easy Toggle - NEW! Single click to apply/remove filters
- By User - Track specific user sessions
- By Time - Recent logs with timestamps
- By URL - Page-specific log filtering
Rich Context Display
- User Information - User ID and session tracking
- Page Context - URL and user agent information
- Data Objects - Expandable log data inspection
- Timestamps - Precise timing information
- Connection Status - NEW! Real-time monitoring status
Export & Analysis
- JSON Export - Structured data for analysis
- Text Export - Human-readable log format
- Log History - Maintains log history in memory
- Performance Stats - Log counts and monitoring status
🔍 Troubleshooting
Common Issues
Extension not loading
- Check Cursor console for errors
- Verify TypeScript compilation
- Restart Cursor
No logs appearing
- Check API endpoint configuration
- Verify production server is running
- Check network connectivity
- NEW! Use status bar to see connection status
WebSocket connection failed
- Extension falls back to HTTP polling
- Check firewall/proxy settings
- Verify WebSocket endpoint
- NEW! Check connection health in status bar
Debug Mode
Enable debug logging in Cursor:
- Open Command Palette (
Cmd+Shift+P
)
- Type "Developer: Toggle Developer Tools"
- Check Console tab for extension logs
📝 License
MIT License - see LICENSE file for details
🤝 Contributing
- Fork the repository at https://github.com/Matmax-Worldwide/log_manager
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
🆘 Support
- Issues - Report bugs on GitHub
- Discussions - Ask questions and share ideas on GitHub
- Documentation - Check this README first
- Website - Visit https://dishub.city
Happy Logging! 🚀📊
Version 1.0.8 - Enhanced with status bar controls, advanced filtering, and improved error handling