Dashboard

Real-time analytics and monitoring dashboard for Traefik reverse proxy logs built with Next.js 15, React 19, and TypeScript.

Features

Real-time Monitoring: Live updates of Traefik access logs with automatic refresh
Advanced Analytics:
- Request metrics (total requests, requests per second)
- Response time analysis (average, P95, P99)
- Status code distribution with error rate tracking
- Top routes and endpoints by traffic volume
Router & Service Metrics: Track performance at router and backend service levels
Geographic Distribution: Automatic IP geolocation with interactive map visualization
User Agent Analysis: Browser and client type breakdown
Timeline Visualization: Request volume over time with interactive charts
Demo Mode: Test the dashboard with simulated data

Tech Stack

Framework: Next.js 15 with App Router
UI: React 19, Tailwind CSS
Charts: Recharts, D3.js
Database: SQLite (better-sqlite3)
GeoIP: MaxMind GeoLite2 via geolite2-redist
Icons: Lucide React
Language: TypeScript

Prerequisites

Node.js 20.x or higher
npm 10.x or higher
Traefik Log Dashboard Agent running (for live data)

Installation

npm install

Configuration

Create a .env.local file in the dashboard directory:

# Agent API Configuration
AGENT_API_URL=http://localhost:5000
AGENT_API_TOKEN=your_secret_token_here
AGENT_NAME=Local Agent

# Display Configuration
NEXT_PUBLIC_SHOW_DEMO_PAGE=true
NEXT_PUBLIC_MAX_LOGS_DISPLAY=500

Development

Start the development server:

npm run dev

The dashboard will be available at http://localhost:3000

Production Build

Build the application:

npm run build

Start the production server:

npm start

Docker Deployment

Build the Docker image:

docker build -t traefik-log-dashboard .

Run the container:

docker run -p 3000:3000 \
  -v ./data:/app/data \
  -e AGENT_API_URL=http://agent:5000 \
  -e AGENT_API_TOKEN=your_token \
  -e AGENT_NAME=Production \
  traefik-log-dashboard

GeoIP (Geographic Location)

The dashboard includes automatic GeoIP functionality:

Uses geolite2-redist which auto-downloads MaxMind databases
No configuration required - works out of the box
Optional: Set GEOIP_DB_PATH to use a custom database location

API Endpoints

The dashboard exposes these internal API routes:

Endpoint	Description
`/api/logs/access`	Fetch access logs from agent
`/api/logs/error`	Fetch error logs from agent
`/api/logs/status`	Get agent status
`/api/system/resources`	Get system resources
`/api/system/logs`	Get log file sizes
`/api/location/lookup`	GeoIP lookup for IPs
`/api/location/status`	GeoIP service status
`/api/agents`	Manage agent configurations
`/api/alerts`	Alert rule management
`/api/webhooks`	Webhook configuration

Usage

Live Dashboard

Navigate to /dashboard to view real-time analytics from your Traefik agent.

Demo Mode

Navigate to /dashboard/demo to view the dashboard with simulated data (no agent required).

Settings

/settings/agents - Manage multiple agent connections
/settings/alerts - Configure alert rules and webhooks
/settings/filters - Set up log filters
/settings/historical - View historical data

Traefik Log Format

The dashboard supports both JSON and CLF (Common Log Format) Traefik logs:

JSON Format:

{
  "ClientAddr": "192.168.1.100:54321",
  "ClientHost": "192.168.1.100",
  "RequestMethod": "GET",
  "RequestPath": "/api/users",
  "DownstreamStatus": 200,
  "Duration": 15000000,
  "RouterName": "api-router",
  "ServiceName": "backend-service"
}

CLF Format:

192.168.1.100 - - [03/Oct/2025:10:30:00 +0000] "GET /api/users HTTP/1.1" 200 1234 "-" "Mozilla/5.0..." 1 "api-router" "http://backend:8080" 15ms

Dashboard

On this page