StackSleuth Dashboard

📊 Real-time Performance Monitoring Dashboard

The StackSleuth Dashboard provides a comprehensive view of your application's performance metrics, traces, and system health in real-time.

Features

Getting Started with the Dashboard

Installation

# Install the dashboard package
npm install @stacksleuth/dashboard

# Or use the standalone version
npx @stacksleuth/dashboard

Running the Dashboard

The dashboard can be run in several ways:

1. Development Mode

# Navigate to the dashboard package
cd packages/dashboard

# Install dependencies
npm install

# Start the development server
npm run dev

# Dashboard will be available at http://localhost:5173

2. Production Build

# Build for production
npm run build

# Preview the production build
npm run preview

3. Docker Deployment

# Using Docker Compose
docker-compose up dashboard

# Or run standalone
docker run -p 3001:3001 stacksleuth/dashboard:latest

Dashboard Pages

Overview Page

The main dashboard provides a high-level view of your application's health:

• Request rate and error rate trends
• Average response time
• System resource utilization
• Recent alerts and incidents
• Service dependency map

Traces Page

Detailed distributed tracing view showing:

• Request flow across services
• Timing breakdowns for each span
• Error detection and root cause analysis
• Database query performance
• External API call monitoring

Metrics Page

Comprehensive metrics visualization including:

• Custom business metrics
• Technical performance indicators
• Time-series analysis
• Comparative analysis across environments
• Export capabilities for further analysis

Flame Graph Page

Interactive performance profiling with:

• CPU flame graphs
• Memory allocation graphs
• Differential flame graphs for comparison
• Stack trace analysis
• Hot path identification

Settings Page

Configure your monitoring preferences:

• Alert thresholds and channels
• Data retention policies
• User management and permissions
• Integration settings
• API key management

Configuration

The dashboard can be configured through environment variables or a configuration file:

Environment Variables

# API endpoint
VITE_API_URL=http://localhost:3000/api

# WebSocket endpoint for real-time updates
VITE_WS_URL=ws://localhost:3000

# Authentication
VITE_AUTH_ENABLED=true
VITE_AUTH_PROVIDER=oauth2

# Feature flags
VITE_ENABLE_FLAMEGRAPHS=true
VITE_ENABLE_TRACES=true
VITE_ENABLE_METRICS=true

Configuration File

Create a dashboard.config.js file:

export default {
  api: {
    baseUrl: process.env.VITE_API_URL || 'http://localhost:3000/api',
    timeout: 30000,
    retryAttempts: 3
  },
  features: {
    flamegraphs: true,
    traces: true,
    metrics: true,
    alerts: true,
    darkMode: true
  },
  theme: {
    primaryColor: '#3b82f6',
    darkMode: 'auto' // 'light', 'dark', or 'auto'
  },
  refresh: {
    interval: 5000, // 5 seconds
    enabled: true
  }
};

Customization

The dashboard is built with React and Tailwind CSS, making it easy to customize:

Theming

/* Customize colors in tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      }
    }
  }
}

Adding Custom Widgets

import { Widget } from '@stacksleuth/dashboard';

export function CustomMetricWidget({ data }) {
  return (
    <Widget title="Custom Metric">
      <div className="metric-value">
        {data.value}
      </div>
    </Widget>
  );
}

API Integration

The dashboard connects to the StackSleuth API for data:

import { StackSleuthClient } from '@stacksleuth/dashboard';

const client = new StackSleuthClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://api.stacksleuth.com'
});

// Fetch metrics
const metrics = await client.getMetrics({
  timeRange: '1h',
  resolution: '1m'
});

// Subscribe to real-time updates
client.subscribe('metrics', (data) => {
  console.log('New metrics:', data);
});

Deployment Options

Static Hosting

Deploy to any static hosting service:

# Build the dashboard
npm run build

# Deploy to Netlify
netlify deploy --prod --dir=dist

# Deploy to Vercel
vercel --prod

# Deploy to GitHub Pages
npm run deploy:gh-pages

Self-Hosted

Run on your own infrastructure:

# Using Node.js
npm run build
npm run preview

# Using Nginx
server {
  listen 80;
  server_name dashboard.example.com;
  root /var/www/dashboard/dist;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Cloud Platforms

Deploy to cloud platforms:

# AWS S3 + CloudFront
aws s3 sync dist/ s3://your-bucket --delete
aws cloudfront create-invalidation --distribution-id YOUR_ID --paths "/*"

# Google Cloud Storage
gsutil -m rsync -r -d dist/ gs://your-bucket

# Azure Blob Storage
az storage blob upload-batch -s dist/ -d '$web' --account-name youraccount

Troubleshooting

Support

Need help with the dashboard?

• 📖 Check the documentation
• 💬 Join our Discord community
• 🐛 Report issues on GitHub
• 📧 Contact support at support@stacksleuth.com