Skip to content
| Marketplace
Sign in
Visual Studio Code>Debuggers>Dishub Production Log ManagerNew to Visual Studio Code? Get it now.
Dishub Production Log Manager

Dishub Production Log Manager

Preview

The Dishub

|
1 install
| (0) | Free
Professional production console log monitoring for Cursor with real-time streaming, filtering, and rich context display
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🚀 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:

  1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
  2. Type "Extensions: Install from VSIX"
  3. 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:

  1. Open the cursor-production-logs folder in Cursor
  2. 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

  1. Click the status bar item 📊 in the bottom right corner
  2. Or use the Production Logs panel (left sidebar)
  3. Click "🚀 Start Production Logs Monitor" or use Command Palette
  4. 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

Log Format

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

  1. Open extension folder in Cursor
  2. Press F5 to run in development mode
  3. Test commands and tree view functionality
  4. 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:

  1. Open Command Palette (Cmd+Shift+P)
  2. Type "Developer: Toggle Developer Tools"
  3. Check Console tab for extension logs

📝 License

MIT License - see LICENSE file for details

🤝 Contributing

  1. Fork the repository at https://github.com/Matmax-Worldwide/log_manager
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. 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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft