TBG Health Dashboard

A lightweight, real-time system health monitoring dashboard for tracking critical pipeline components across Scraper, Backend, and Frontend systems.

🚀 Quick Start

Deploy to Vercel

1. Install Vercel CLI (if not already installed):

   npm install -g vercel

2. Deploy the dashboard:

   vercel --prod

3. Your dashboard is live! Vercel will provide you with a URL like https://your-dashboard.vercel.app

Local Development

# Install dependencies
npm install

# Start local development server
vercel dev

The dashboard will be available at http://localhost:3000

📊 Dashboard Features

System Monitoring

• Real-time status updates (auto-refreshes every 30 seconds)
• Emergency detection - Dashboard turns RED for critical issues
• Service categorization - Scraper, Backend, and Frontend pipelines
• Mobile responsive design

Error Triage System

The dashboard implements your defined error response plan:

Service	Type	Emergency Level
Data Acquisition	Scraper	🚨 RED ALERT
Data Quality	Scraper	🕵️ Investigation
Server Health	Backend	🚨 RED ALERT
Server Performance	Backend	🚨 RED ALERT
Application Stability	Frontend	🚨 RED ALERT
Client Connectivity	Frontend	🚨 RED ALERT

🔧 API Usage

Update Service Status

Endpoint: POST /api/update-status

Request Body:

{
  "service": "backendHealth",
  "status": "red",
  "source": "monitoring-system"
}

Valid Services:

• scraperAcquisition
• scraperQuality
• backendHealth
• backendPerformance
• frontendStability
• frontendConnectivity

Valid Statuses:

• green - Operational
• red - Issue detected

Example Usage

# Mark backend health as down
curl -X POST https://your-dashboard.vercel.app/api/update-status \
  -H "Content-Type: application/json" \
  -d '{"service": "backendHealth", "status": "red"}'

# Mark scraper acquisition as operational
curl -X POST https://your-dashboard.vercel.app/api/update-status \
  -H "Content-Type: application/json" \
  -d '{"service": "scraperAcquisition", "status": "green"}'

🔗 Integration Examples

PostHog Webhook

// In your PostHog webhook handler
const updateDashboard = async (service, status) => {
  await fetch('https://your-dashboard.vercel.app/api/update-status', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ service, status, source: 'posthog' })
  });
};

Slack Alert Integration

// In your monitoring system
const alertSlackAndDashboard = async (service, isDown) => {
  const status = isDown ? 'red' : 'green';
  
  // Update dashboard
  await fetch('https://your-dashboard.vercel.app/api/update-status', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ service, status, source: 'monitoring' })
  });
  
  // Send Slack alert if emergency
  if (isDown && isEmergencyService(service)) {
    await sendSlackAlert(`🚨 EMERGENCY: ${service} is down!`);
  }
};

Health Check Monitoring

// Example health check script
const services = [
  { name: 'backendHealth', url: 'https://api.yourapp.com/health' },
  { name: 'frontendConnectivity', url: 'https://yourapp.com/api/ping' }
];

services.forEach(async (service) => {
  try {
    const response = await fetch(service.url);
    const status = response.ok ? 'green' : 'red';
    
    await fetch('https://your-dashboard.vercel.app/api/update-status', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        service: service.name, 
        status, 
        source: 'health-check' 
      })
    });
  } catch (error) {
    // Mark as down on network errors
    await updateDashboard(service.name, 'red');
  }
});

📁 Project Structure

health-dashboard/
├── index.html              # Main dashboard UI
├── status.json             # Current system status
├── api/
│   └── update-status.js    # Status update webhook
├── package.json            # Project configuration
├── vercel.json            # Vercel deployment config
└── README.md              # This file

🎨 Customization

Adding New Services

1. Update status.json with the new service
2. Add service configuration in index.html serviceConfig object
3. Update VALID_SERVICES array in api/update-status.js

Styling Changes

All styles are contained in index.html. The dashboard uses:

• CSS Grid for responsive layout
• Modern gradient background
• Card-based service display
• Smooth hover animations

🔒 Security Notes

• The API endpoint validates all inputs
• CORS is configured for cross-origin requests
• No authentication required (suitable for internal monitoring)
• Consider adding API keys for production use

📞 Support

For issues or questions about the dashboard implementation, refer to your error triage documentation or create a ticket in your project management system.