Monitoring & Observability

Logging, tracing, error tracking, and performance monitoring.

Overview

Monitoring ensures application health and performance in production.

Key Concepts

• Structured Logging — JSON logs for analysis
• Distributed Tracing — Track requests across services
• Error Tracking — Capture and report errors
• Performance Monitoring — Track response times
• Alerting — Notify on issues

Code Examples

// lib/logger.js
const logger = {
  info: (message, data) => {
    console.log(JSON.stringify({
      level: 'info',
      message,
      data,
      timestamp: new Date().toISOString()
    }));
  },
  error: (message, error) => {
    console.error(JSON.stringify({
      level: 'error',
      message,
      error: { message: error.message, stack: error.stack },
      timestamp: new Date().toISOString()
    }));
  }
};

// API route with logging
// app/api/products/route.js
import { logger } from '@/lib/logger';

export async function GET(request) {
  const start = Date.now();
  
  try {
    const products = await db.products.findMany();
    
    logger.info('Products fetched', {
      count: products.length,
      duration: Date.now() - start
    });

    return Response.json(products);
  } catch (error) {
    logger.error('Failed to fetch products', error);
    return Response.json({ error: 'Internal server error' }, { status: 500 });
  }
}

// Error boundary with reporting
'use client';
function ErrorBoundary({ children }) {
  const [error, setError] = useState(null);

  const handleError = (error) => {
    setError(error);
    fetch('/api/errors', {
      method: 'POST',
      body: JSON.stringify({
        message: error.message,
        stack: error.stack,
        url: window.location.href
      })
    });
  };

  if (error) {
    return (
      <div className="error-container">
        <h2>Something went wrong</h2>
        <button onClick={() => setError(null)}>Try again</button>
      </div>
    );
  }

  return (
    <ErrorFallback onError={handleError}>
      {children}
    </ErrorFallback>
  );
}

Practice

Implement structured logging and error tracking for a Next.js application.