Performance Monitoring

Performance monitoring strategies:

Frontend Performance Metrics

// Core Web Vitals monitoring
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime);
    }
    if (entry.entryType === 'first-input') {
      console.log('FID:', entry.processingStart - entry.startTime);
    }
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input'] });

// Custom performance marks
performance.mark('api-call-start');
await fetchData();
performance.mark('api-call-end');
performance.measure('api-call-duration', 'api-call-start', 'api-call-end');

Backend Performance Monitoring

// Express middleware for request timing
const performanceMiddleware = (req, res, next) => {
  const start = Date.now();
  
  res.on('finish', () => {
    const duration = Date.now() - start;
    console.log(`${req.method} ${req.url} - ${duration}ms`);
    
    // Log slow requests
    if (duration > 1000) {
      console.warn(`Slow request: ${req.method} ${req.url} - ${duration}ms`);
    }
  });
  
  next();
};

Database Performance

-- Monitor slow queries
SELECT query, mean_time, calls, total_time
FROM pg_stat_statements
ORDER BY mean_time DESC
LIMIT 10;

-- Check index usage
SELECT schemaname, tablename, indexname, idx_scan, idx_tup_read
FROM pg_stat_user_indexes
ORDER BY idx_scan DESC;

Key Metrics to Track

• Response time (p50, p95, p99)
• Throughput (requests per second)
• Error rate
• CPU and memory usage
• Database query performance
• Cache hit rates

Alerting Thresholds

• Response time > 2 seconds
• Error rate > 1%
• CPU usage > 80%
• Memory usage > 85%
• Database connections > 80% of pool