Monitoring & Logging

Monitor application performance, errors, and user analytics in production.

Monitoring & Logging

Application Monitoring

Vercel Analytics

Set up comprehensive analytics and performance monitoring for your production application.

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

Error Monitoring

Implement comprehensive error tracking and reporting.

// lib/monitoring.ts
export function logError(error: Error, context?: any) {
  console.error('Application Error:', {
    message: error.message,
    stack: error.stack,
    context,
    timestamp: new Date().toISOString(),
    url: typeof window !== 'undefined' ? window.location.href : 'server',
  })
}

// Global error boundary
export function GlobalErrorBoundary({ children }: { children: React.ReactNode }) {
  return (
    <ErrorBoundary
      onError={(error, errorInfo) => {
        logError(error, errorInfo)
      }}
    >
      {children}
    </ErrorBoundary>
  )
}

Performance Monitoring

Core Web Vitals

Track essential performance metrics for optimal user experience.

// lib/web-vitals.ts
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

export function reportWebVitals() {
  getCLS(console.log)
  getFID(console.log)
  getFCP(console.log)
  getLCP(console.log)
  getTTFB(console.log)
}

Database Performance

Monitor and optimize database query performance.

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

-- Monitor database connections
SELECT count(*) FROM pg_stat_activity;

Logging Strategy

Structured Logging

Implement consistent, structured logging across your application.

// lib/logger.ts
export const logger = {
  info: (message: string, data?: any) => {
    console.log(JSON.stringify({
      level: 'info',
      message,
      data,
      timestamp: new Date().toISOString(),
    }))
  },
  
  error: (message: string, error?: Error, data?: any) => {
    console.error(JSON.stringify({
      level: 'error',
      message,
      error: error?.message,
      stack: error?.stack,
      data,
      timestamp: new Date().toISOString(),
    }))
  },
  
  warn: (message: string, data?: any) => {
    console.warn(JSON.stringify({
      level: 'warn',
      message,
      data,
      timestamp: new Date().toISOString(),
    }))
  }
}

Log Analysis

Key Metrics to Monitor

  • Response Time: API and page load times
  • Throughput: Requests per second
  • Error Rate: 4xx and 5xx error percentages
  • Resource Utilization: CPU, memory, database connections

Alerting Thresholds

  • Response Time: > 2 seconds average
  • Error Rate: > 1% error rate
  • Database Connections: > 80% utilization
  • Memory Usage: > 85% utilization

Monitor your application's health and performance with comprehensive logging and analytics. Early detection of issues ensures optimal user experience.