Dashboard

@yelix/dashboard — Real-time Monitoring Dashboard

A real-time monitoring dashboard for Yelix applications. It tracks HTTP requests, middleware execution, and logs, and displays them in a web UI.

Features

1. Real-time statistics

   • Total requests count
   • Unique endpoints count
   • Average response time
   • Success/error counts

2. Request monitoring

   • Live feed of recent requests
   • Filter by method, status, search
   • Request details: headers, body, query params, middleware execution, logs

3. Performance analytics

   • Endpoint performance (avg/min/max duration)
   • Middleware execution times
   • Request duration tracking

4. Log tracking

   • Captures yelixLog() calls from middleware/handlers
   • Displays logs per request
   • Formats objects as JSON

5. Authentication

   • Basic HTTP authentication
   • Bearer token support
   • Configurable credentials

6. Zero database

   • In-memory storage
   • No external dependencies
   • Auto-cleans old data (configurable via maxEvents and maxLogs)

Installation

deno add @yelix/dashboard

Basic Setup

import { YelixHono } from "@yelix/hono";
import { YelixDashboard } from "@yelix/dashboard";

// Create your app
const app = new YelixHono();

// Create dashboard instance
const dashboard = new YelixDashboard({
  username: "admin",
  password: "admin123"
});

// Mount dashboard (IMPORTANT: pass mount path as 2nd parameter)
app.route("/dashboard", dashboard.createRouter(app, "/dashboard"));

// Your API routes
app.get("/api/users", (c) => {
  app.yelixLog(c, "Users fetched", { count: 10 });
  return c.json({ users: [] });
});

Deno.serve({ port: 8000 }, app.fetch);

Access the Dashboard

Visit: http://localhost:8000/dashboard

Login with:

• Username: admin
• Password: admin123

Configuration Options

interface YelixDashboardOptions {
  username?: string;        // Default: "admin"
  password?: string;        // Default: "admin123"
  path?: string;            // Default: "/dashboard"
  apiPath?: string;         // Default: "/api/dashboard"
  maxEvents?: number;       // Default: 1000
  maxLogs?: number;         // Default: 10000
}

Memory Management

The dashboard stores events and logs in memory. To prevent memory issues, you can configure limits:

• maxEvents: Maximum number of request events to store (default: 1000)

  • When the limit is reached, oldest events are automatically removed
  • Each request creates one event entry

• maxLogs: Maximum number of log entries to store (default: 10000)

  • When the limit is reached, oldest logs are automatically removed
  • Each yelixLog() call creates one log entry

const dashboard = new YelixDashboard({
  username: "admin",
  password: "admin123",
  maxEvents: 5000,    // Store up to 5000 request events
  maxLogs: 50000      // Store up to 50000 log entries
});

Note: Lower limits use less memory but may cause older data to be removed faster. Higher limits use more memory but retain more historical data.

Memory Usage Estimates

The dashboard stores data in memory. Here are approximate RAM usage estimates:

Per Event:

• Each event stores: request ID, timestamp, method, pathname, duration, status, and middleware execution data
• Average size: ~400-600 bytes per event (varies based on number of middlewares)
• 100 events: ~40-60 KB
• 1000 events: ~400-600 KB

Per Log Entry:

• Each log stores: request ID, middleware name, messages, and timestamp
• Average size: ~100-200 bytes per log entry (varies based on message content)
• 1000 logs: ~100-200 KB
• 10000 logs: ~1-2 MB

Total Memory Usage (typical scenarios):

• 100 events + 1000 logs: ~1-2 MB
• 1000 events + 10000 logs: ~1.5-2.5 MB

The memory footprint is minimal, and the auto-cleanup mechanism ensures memory usage stays bounded even with high traffic.

Environment Variables

const dashboard = new YelixDashboard({
  username: Deno.env.get("YELIX_DASHBOARD_USERNAME") || "admin",
  password: Deno.env.get("YELIX_DASHBOARD_PASSWORD") || "admin123"
});

Custom Mount Path

// Mount at /monitoring instead of /dashboard
app.route("/monitoring", dashboard.createRouter(app, "/monitoring"));

The mount path parameter is important because:

• It prevents dashboard requests from being tracked (avoids loops)
• It allows dynamic path detection in the UI
• It works with any custom path

Using Logs in Your Code

The dashboard captures logs from yelixLog():

app.get("/api/users", (c) => {
  // Simple log
  app.yelixLog(c, "Fetching users");

  // Log with data (objects are automatically formatted as JSON)
  app.yelixLog(c, "Users fetched", {
    count: users.length,
    timestamp: Date.now()
  });

  return c.json({ users });
});

Logs appear in:

• The “Logs” column in the requests table
• The “Logs” tab in request details
• Under each middleware in the “Middleware” tab

API Endpoints

All endpoints require Basic Auth:

• GET /dashboard - Dashboard UI (HTML page)
• GET /dashboard/api/dashboard/stats - Overall statistics
• GET /dashboard/api/dashboard/events?limit=50 - Recent events
• GET /dashboard/api/dashboard/endpoints - Endpoint stats
• GET /dashboard/api/dashboard/middleware - Middleware stats
• GET /dashboard/api/dashboard/request/:requestId - Request details

Dashboard UI Features

1. Statistics cards

   • Total Requests, Endpoints, Avg Response, Success, Errors

2. Filters

   • Search by path, method, or request ID
   • Filter by HTTP method (GET, POST, etc.)
   • Filter by status code (2xx, 4xx, 5xx)

3. Requests table

   • Time, Method, Path, Status, Duration
   • Middleware count, Log count
   • Click any row to see details

4. Request details modal

   • Headers tab: All request headers
   • Body tab: Request body (formatted JSON)
   • Query & Params tab: Query parameters and path params
   • Middleware tab: Execution timeline with logs
   • Logs tab: All logs for the request

5. Auto-refresh

   • Updates every 5 seconds
   • Can be toggled on/off

Complete Example

import { YelixHono } from "@yelix/hono";
import { YelixDashboard } from "@yelix/dashboard";

const app = new YelixHono();

// Create dashboard
const dashboard = new YelixDashboard({
  username: Deno.env.get("DASHBOARD_USER") || "admin",
  password: Deno.env.get("DASHBOARD_PASS") || "admin123"
});

// Mount dashboard
app.route("/dashboard", dashboard.createRouter(app, "/dashboard"));

// Example routes with logging
app.get("/", (c) => {
  app.yelixLog(c, "Homepage accessed");
  return c.json({ message: "Hello!" });
});

app.get("/api/users", (c) => {
  const users = [{ id: 1, name: "Alice" }];
  app.yelixLog(c, "Users fetched", { count: users.length });
  return c.json(users);
});

app.post("/api/users", async (c) => {
  const user = await c.req.json();
  app.yelixLog(c, "User created", { user });
  return c.json(user, 201);
});

Deno.serve({ port: 8000 }, app.fetch);

How It Works Internally

1. Event listening: Attaches to Yelix events (request.start, request.end, middleware.start, middleware.end, middleware.log)
2. Data collection: Stores events in memory and aggregates statistics
3. Request filtering: Automatically ignores dashboard requests to prevent loops
4. Live updates: Frontend polls API endpoints every 5 seconds
5. Memory management:
   • Automatically removes oldest events when maxEvents limit is reached (default: 1000)
   • Automatically removes oldest logs when maxLogs limit is reached (default: 10000)
   • Both limits are configurable via YelixDashboardOptions

Security Notes

For development/testing:

• Uses Basic Auth (credentials sent in headers)
• No rate limiting
• No HTTPS enforcement

For production:

• Use HTTPS
• Use strong passwords
• Restrict network access
• Consider adding rate limiting
• Rotate credentials regularly

The dashboard provides real-time visibility into your Yelix application’s requests, middleware, and logs without requiring a database.