Large Software Projects: Collecting Traces

// Based of https://github.com/adityasinghcodes/nextjs-monitoring/blob/main/instrumentation.ts
// Node.js-specific imports are moved into dynamic imports within runtime checks
// Prevent Edge runtime from trying to import Node.js-specific modules
declare global {
    var metrics:
        | {
        registry: any;
    }
        | undefined;
    var logger: any | undefined;
}

export async function register() {
    if (process.env.NEXT_RUNTIME === "nodejs") {
        const { Registry, collectDefaultMetrics } = await import("prom-client");
        const pino = (await import("pino")).default;
        const pinoLoki = (await import("pino-loki")).default;
        const { registerOTel } = await import("@vercel/otel");

        //prometheus initialization
        const prometheusRegistry = new Registry();
        collectDefaultMetrics({
            register: prometheusRegistry,
        });
        globalThis.metrics = {
            registry: prometheusRegistry,
        };

        //loki initialization
        globalThis.logger = pino(
            pinoLoki({
                host: "http://localhost:3100", // Connects to the loki container via localhost:3100
                batching: true,
                interval: 5,
                labels: { app: "next-app" }, // Crucial label for querying in Grafana
            })
        );

        //otel initialization
        registerOTel();
    }
}

# OTel Configuration
OTEL_LOG_LEVEL="${OTEL_LOG_LEVEL}"
OTEL_SERVICE_NAME="${OTEL_SERVICE_NAME}"

# Based of https://github.com/adityasinghcodes/nextjs-monitoring/blob/main/otel-collector-config.yml
# Receivers configuration - defines how the collector receives telemetry data
receivers:
  # OpenTelemetry Protocol (OTLP) receiver configuration
  otlp:
    protocols:
      # gRPC endpoint for receiving OTLP data
      grpc:
        endpoint: "0.0.0.0:4317"
      # HTTP endpoint for receiving OTLP data
      http:
        endpoint: "0.0.0.0:4318"

# Processors configuration - defines how telemetry data is processed
processors:
  # Batch processor aggregates data before exporting
  batch:
    timeout: 1s # Maximum time to wait before sending a batch
    send_batch_size: 1024 # Maximum number of spans to include in a batch

# Exporters configuration - defines where telemetry data is sent
exporters:
  # Zipkin exporter configuration
  zipkin:
    endpoint: "http://zipkin:9411/api/v2/spans" # Zipkin server endpoint (using the service name 'zipkin')
    format: proto # Use protobuf format for data
  # Debug exporter for troubleshooting
  debug:
    verbosity: detailed # Maximum verbosity level for debugging

# Extensions configuration - additional collector functionality
extensions:
  health_check: # Enables health checking endpoint
  pprof: # Enables profiling endpoint
    endpoint: :1888
  zpages: # Enables diagnostic pages
    endpoint: :55679

# Service configuration - ties together all the components
service:
  extensions: [pprof, zpages, health_check] # Enable all configured extensions
  pipelines:
    # Traces pipeline configuration
    traces:
      receivers: [otlp] # Use OTLP receiver
      processors: [batch] # Process with batch processor
      exporters: [zipkin, debug] # Export to Zipkin and debug

# Based of https://github.com/adityasinghcodes/nextjs-monitoring/blob/main/docker-compose.yml
services:
  grafana:
    container_name: grafana
    image: grafana/grafana:11.4.0
    ports:
      - "3001:3000"
    environment:
      - GF_SECURITY_ADMIN_USER=admin_user
      - GF_SECURITY_ADMIN_PASSWORD=admin_password
    volumes:
      - grafana-storage:/var/lib/grafana
    networks:
      - monitoring

  prometheus:
    container_name: prometheus
    image: prom/prometheus:v3.0.1
    ports:
      - "9090:9090"
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-storage:/prometheus
    networks:
      - monitoring

  loki:
    container_name: loki
    image: grafana/loki:2.9.2
    ports:
      - "3100:3100"
    volumes:
      - ./loki-config.yml:/etc/loki/local-config.yml
    command: -config.file=/etc/loki/local-config.yml
    networks:
      - monitoring

  otel-collector:
    container_name: otel-collector
    image: otel/opentelemetry-collector:0.115.0
    restart: always
    command: ["--config=/etc/otel-collector-config.yml"]
    volumes:
      - ./otel-collector-config.yml:/etc/otel-collector-config.yml
    ports:
      - "4317:4317" # OTLP gRPC receiver
      - "4318:4318" # OTLP HTTP receiver
      - "8888:8888" # Prometheus metrics exposed by collector
      - "8889:8889" # Prometheus exporter metrics
      - "13133:13133" # Health check extension
      - "55679:55679" # zPages extension
    networks:
      - monitoring

  zipkin:
    container_name: zipkin
    image: openzipkin/zipkin:3.4.2
    ports:
      - "9411:9411"
    networks:
      - monitoring

networks:
  monitoring:
    name: monitoring
    driver: bridge

volumes:
  grafana-storage:
  prometheus-storage:

export const dynamic = "force-dynamic";

async function getData() {
    const res = await fetch("https://httpbin.org/status/500");
    return res.json();
}

export default async function RouteWithError() {
    const data = await getData();

    return (
        <div className="flex flex-col gap-4">
            <p>
                The data is: <strong>{JSON.stringify(data)}</strong>
            </p>
        </div>
    );
}