hono-status-monitor 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -2
- package/dist/dashboard.d.ts +13 -0
- package/dist/dashboard.d.ts.map +1 -1
- package/dist/dashboard.js +391 -0
- package/dist/dashboard.js.map +1 -1
- package/dist/index.d.ts +51 -12
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +121 -13
- package/dist/index.js.map +1 -1
- package/dist/monitor-edge.d.ts +21 -0
- package/dist/monitor-edge.d.ts.map +1 -0
- package/dist/monitor-edge.js +376 -0
- package/dist/monitor-edge.js.map +1 -0
- package/dist/platform.d.ts +33 -0
- package/dist/platform.d.ts.map +1 -0
- package/dist/platform.js +80 -0
- package/dist/platform.js.map +1 -0
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -366,11 +366,64 @@ app.use('/status/*', basicAuth({
|
|
|
366
366
|
app.route('/status', monitor.routes);
|
|
367
367
|
```
|
|
368
368
|
|
|
369
|
+
## ☁️ Cloudflare Workers / Edge Support
|
|
370
|
+
|
|
371
|
+
This package automatically detects Cloudflare Workers and edge runtimes, providing a lightweight monitor with available metrics.
|
|
372
|
+
|
|
373
|
+
### Available Metrics in Edge Environments
|
|
374
|
+
|
|
375
|
+
| Metric | Available | Notes |
|
|
376
|
+
|--------|-----------|-------|
|
|
377
|
+
| Request count & RPS | ✅ | Fully supported |
|
|
378
|
+
| Response time percentiles | ✅ | P50, P95, P99, Avg |
|
|
379
|
+
| Status code breakdown | ✅ | 2xx, 3xx, 4xx, 5xx |
|
|
380
|
+
| Route analytics | ✅ | Top routes, slowest routes |
|
|
381
|
+
| Error tracking | ✅ | Recent errors with timestamps |
|
|
382
|
+
| CPU / Memory / Heap | ❌ | Not available in Workers |
|
|
383
|
+
| Event loop lag | ❌ | Not available in Workers |
|
|
384
|
+
| Load average | ❌ | Not available in Workers |
|
|
385
|
+
| WebSocket real-time | ❌ | Uses polling (5s interval) |
|
|
386
|
+
|
|
387
|
+
### Usage in Cloudflare Workers
|
|
388
|
+
|
|
389
|
+
```typescript
|
|
390
|
+
import { Hono } from 'hono';
|
|
391
|
+
import { statusMonitor } from 'hono-status-monitor';
|
|
392
|
+
|
|
393
|
+
const app = new Hono();
|
|
394
|
+
|
|
395
|
+
// Create status monitor - automatically detects edge environment
|
|
396
|
+
const monitor = statusMonitor();
|
|
397
|
+
|
|
398
|
+
// Add middleware to track requests
|
|
399
|
+
app.use('*', monitor.middleware);
|
|
400
|
+
|
|
401
|
+
// Mount status dashboard
|
|
402
|
+
app.route('/status', monitor.routes);
|
|
403
|
+
|
|
404
|
+
// Your routes
|
|
405
|
+
app.get('/', (c) => c.text('Hello from Cloudflare Workers!'));
|
|
406
|
+
|
|
407
|
+
export default app;
|
|
408
|
+
```
|
|
409
|
+
|
|
410
|
+
> **Note:** In Cloudflare Workers, the dashboard uses HTTP polling (every 5 seconds) instead of WebSocket for updates. The dashboard will display an "Edge Mode" indicator.
|
|
411
|
+
|
|
412
|
+
### Force Edge Mode
|
|
413
|
+
|
|
414
|
+
You can explicitly use the edge-compatible monitor:
|
|
415
|
+
|
|
416
|
+
```typescript
|
|
417
|
+
import { statusMonitorEdge } from 'hono-status-monitor';
|
|
418
|
+
|
|
419
|
+
const monitor = statusMonitorEdge();
|
|
420
|
+
```
|
|
421
|
+
|
|
369
422
|
## 📋 Requirements
|
|
370
423
|
|
|
371
|
-
- Node.js >= 18.0.0
|
|
424
|
+
- Node.js >= 18.0.0 (for Node.js mode)
|
|
372
425
|
- Hono.js >= 4.0.0
|
|
373
|
-
- @hono/node-server >= 1.0.0
|
|
426
|
+
- @hono/node-server >= 1.0.0 (for Node.js mode only)
|
|
374
427
|
|
|
375
428
|
## 🤝 Contributing
|
|
376
429
|
|
|
@@ -383,3 +436,4 @@ MIT © [Vinit Kumar Goel](https://github.com/vinitkumargoel)
|
|
|
383
436
|
---
|
|
384
437
|
|
|
385
438
|
Made with ❤️ for the Hono.js community
|
|
439
|
+
|
package/dist/dashboard.d.ts
CHANGED
|
@@ -3,4 +3,17 @@ import type { DashboardProps } from './types.js';
|
|
|
3
3
|
* Generate the status dashboard HTML
|
|
4
4
|
*/
|
|
5
5
|
export declare function generateDashboard({ hostname, uptime, socketPath, title }: DashboardProps): string;
|
|
6
|
+
/**
|
|
7
|
+
* Edge Dashboard Props (no socketPath)
|
|
8
|
+
*/
|
|
9
|
+
export interface EdgeDashboardProps {
|
|
10
|
+
hostname: string;
|
|
11
|
+
uptime: string;
|
|
12
|
+
title: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Generate the edge-compatible status dashboard HTML
|
|
16
|
+
* Uses polling instead of WebSocket, only shows available metrics
|
|
17
|
+
*/
|
|
18
|
+
export declare function generateEdgeDashboard({ hostname, uptime, title }: EdgeDashboardProps): string;
|
|
6
19
|
//# sourceMappingURL=dashboard.d.ts.map
|
package/dist/dashboard.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../src/dashboard.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,cAAc,GAAG,MAAM,CA6bjG"}
|
|
1
|
+
{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../src/dashboard.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,cAAc,GAAG,MAAM,CA6bjG;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,kBAAkB,GAAG,MAAM,CAkY7F"}
|
package/dist/dashboard.js
CHANGED
|
@@ -451,4 +451,395 @@ export function generateDashboard({ hostname, uptime, socketPath, title }) {
|
|
|
451
451
|
</body>
|
|
452
452
|
</html>`;
|
|
453
453
|
}
|
|
454
|
+
/**
|
|
455
|
+
* Generate the edge-compatible status dashboard HTML
|
|
456
|
+
* Uses polling instead of WebSocket, only shows available metrics
|
|
457
|
+
*/
|
|
458
|
+
export function generateEdgeDashboard({ hostname, uptime, title }) {
|
|
459
|
+
return `<!DOCTYPE html>
|
|
460
|
+
<html lang="en">
|
|
461
|
+
<head>
|
|
462
|
+
<meta charset="UTF-8">
|
|
463
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
464
|
+
<title>${title}</title>
|
|
465
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
466
|
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
|
467
|
+
<style>
|
|
468
|
+
:root {
|
|
469
|
+
--bg: #fff;
|
|
470
|
+
--bg-secondary: #f8f9fa;
|
|
471
|
+
--bg-card: #fff;
|
|
472
|
+
--border: #e5e5e5;
|
|
473
|
+
--text: #111;
|
|
474
|
+
--text-secondary: #666;
|
|
475
|
+
--text-muted: #999;
|
|
476
|
+
--accent: #3b82f6;
|
|
477
|
+
--success: #10b981;
|
|
478
|
+
--warning: #f59e0b;
|
|
479
|
+
--danger: #ef4444;
|
|
480
|
+
--edge: #f97316;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.dark {
|
|
484
|
+
--bg: #0f0f0f;
|
|
485
|
+
--bg-secondary: #1a1a1a;
|
|
486
|
+
--bg-card: #1a1a1a;
|
|
487
|
+
--border: #2a2a2a;
|
|
488
|
+
--text: #fafafa;
|
|
489
|
+
--text-secondary: #a0a0a0;
|
|
490
|
+
--text-muted: #666;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
494
|
+
|
|
495
|
+
body {
|
|
496
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
497
|
+
background: var(--bg-secondary);
|
|
498
|
+
color: var(--text);
|
|
499
|
+
min-height: 100vh;
|
|
500
|
+
transition: all 0.3s;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.container {
|
|
504
|
+
max-width: 800px;
|
|
505
|
+
margin: 0 auto;
|
|
506
|
+
padding: 20px;
|
|
507
|
+
background: var(--bg);
|
|
508
|
+
min-height: 100vh;
|
|
509
|
+
border-left: 1px solid var(--border);
|
|
510
|
+
border-right: 1px solid var(--border);
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
header {
|
|
514
|
+
display: flex;
|
|
515
|
+
justify-content: space-between;
|
|
516
|
+
align-items: center;
|
|
517
|
+
margin-bottom: 16px;
|
|
518
|
+
padding-bottom: 16px;
|
|
519
|
+
border-bottom: 1px solid var(--border);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.title-section h1 { font-size: 18px; font-weight: 600; }
|
|
523
|
+
.title-section .subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
|
524
|
+
|
|
525
|
+
.header-controls { display: flex; align-items: center; gap: 12px; }
|
|
526
|
+
|
|
527
|
+
.theme-toggle {
|
|
528
|
+
width: 36px; height: 36px;
|
|
529
|
+
border: 1px solid var(--border);
|
|
530
|
+
background: var(--bg-card);
|
|
531
|
+
border-radius: 8px;
|
|
532
|
+
cursor: pointer;
|
|
533
|
+
display: flex;
|
|
534
|
+
align-items: center;
|
|
535
|
+
justify-content: center;
|
|
536
|
+
font-size: 16px;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
.status-badge {
|
|
540
|
+
display: flex; align-items: center; gap: 6px;
|
|
541
|
+
padding: 6px 12px; border-radius: 16px;
|
|
542
|
+
font-size: 11px; font-weight: 500;
|
|
543
|
+
}
|
|
544
|
+
.status-badge.edge { background: #fff7ed; color: #c2410c; }
|
|
545
|
+
.dark .status-badge.edge { background: #431407; color: #fdba74; }
|
|
546
|
+
|
|
547
|
+
.edge-notice {
|
|
548
|
+
background: linear-gradient(135deg, #fff7ed, #fef3c7);
|
|
549
|
+
border: 1px solid #fed7aa;
|
|
550
|
+
border-radius: 8px;
|
|
551
|
+
padding: 12px;
|
|
552
|
+
margin-bottom: 16px;
|
|
553
|
+
font-size: 12px;
|
|
554
|
+
color: #9a3412;
|
|
555
|
+
}
|
|
556
|
+
.dark .edge-notice {
|
|
557
|
+
background: linear-gradient(135deg, #431407, #422006);
|
|
558
|
+
border-color: #c2410c;
|
|
559
|
+
color: #fdba74;
|
|
560
|
+
}
|
|
561
|
+
.edge-notice strong { display: block; margin-bottom: 4px; }
|
|
562
|
+
|
|
563
|
+
/* Stats Bar */
|
|
564
|
+
.stats-bar {
|
|
565
|
+
display: grid;
|
|
566
|
+
grid-template-columns: repeat(4, 1fr);
|
|
567
|
+
gap: 8px;
|
|
568
|
+
margin-bottom: 16px;
|
|
569
|
+
}
|
|
570
|
+
.stat-box {
|
|
571
|
+
padding: 12px;
|
|
572
|
+
background: var(--bg-secondary);
|
|
573
|
+
border-radius: 8px;
|
|
574
|
+
text-align: center;
|
|
575
|
+
}
|
|
576
|
+
.stat-box .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
577
|
+
.stat-box .value { font-size: 18px; font-weight: 600; margin-top: 4px; }
|
|
578
|
+
|
|
579
|
+
/* Percentiles */
|
|
580
|
+
.percentiles {
|
|
581
|
+
display: grid;
|
|
582
|
+
grid-template-columns: repeat(4, 1fr);
|
|
583
|
+
gap: 8px;
|
|
584
|
+
margin-bottom: 16px;
|
|
585
|
+
padding: 12px;
|
|
586
|
+
background: var(--bg-secondary);
|
|
587
|
+
border-radius: 8px;
|
|
588
|
+
}
|
|
589
|
+
.percentile-item { text-align: center; }
|
|
590
|
+
.percentile-item .label { font-size: 10px; color: var(--text-muted); }
|
|
591
|
+
.percentile-item .value { font-size: 16px; font-weight: 600; color: var(--accent); }
|
|
592
|
+
|
|
593
|
+
/* Metric Rows */
|
|
594
|
+
.metric-row {
|
|
595
|
+
display: flex; align-items: center;
|
|
596
|
+
padding: 12px 0; border-bottom: 1px solid var(--border);
|
|
597
|
+
}
|
|
598
|
+
.metric-info { width: 140px; flex-shrink: 0; }
|
|
599
|
+
.metric-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
|
|
600
|
+
.metric-value { font-size: 28px; font-weight: 300; line-height: 1.1; }
|
|
601
|
+
.metric-unit { font-size: 14px; color: var(--text-muted); }
|
|
602
|
+
.metric-alert { color: var(--danger) !important; }
|
|
603
|
+
.chart-container { flex: 1; height: 50px; margin-left: 16px; }
|
|
604
|
+
|
|
605
|
+
/* Section Titles */
|
|
606
|
+
.section-title {
|
|
607
|
+
font-size: 11px; font-weight: 600; color: var(--text-muted);
|
|
608
|
+
text-transform: uppercase; letter-spacing: 0.5px;
|
|
609
|
+
margin: 20px 0 12px; padding-top: 12px;
|
|
610
|
+
border-top: 1px solid var(--border);
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
/* Route Tables */
|
|
614
|
+
.routes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
|
615
|
+
.route-section { background: var(--bg-secondary); border-radius: 8px; padding: 12px; }
|
|
616
|
+
.route-section h3 { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
|
|
617
|
+
.route-item { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
|
|
618
|
+
.route-item:last-child { border-bottom: none; }
|
|
619
|
+
.route-path { font-family: monospace; color: var(--text-secondary); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
|
|
620
|
+
.route-stat { font-weight: 500; }
|
|
621
|
+
.route-stat.slow { color: var(--warning); }
|
|
622
|
+
.route-stat.error { color: var(--danger); }
|
|
623
|
+
|
|
624
|
+
/* Status Codes */
|
|
625
|
+
.status-codes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
|
|
626
|
+
.status-code-box { text-align: center; padding: 10px; background: var(--bg-secondary); border-radius: 6px; }
|
|
627
|
+
.status-code-box .code { font-size: 10px; color: var(--text-muted); }
|
|
628
|
+
.status-code-box .count { font-size: 18px; font-weight: 600; margin-top: 2px; }
|
|
629
|
+
.s2xx { color: var(--success); }
|
|
630
|
+
.s3xx { color: var(--accent); }
|
|
631
|
+
.s4xx { color: var(--warning); }
|
|
632
|
+
.s5xx { color: var(--danger); }
|
|
633
|
+
|
|
634
|
+
/* Errors Panel */
|
|
635
|
+
.errors-panel { background: var(--bg-secondary); border-radius: 8px; padding: 12px; }
|
|
636
|
+
.error-item { font-size: 12px; padding: 8px; background: var(--bg-card); border-radius: 4px; margin-top: 6px; border-left: 3px solid var(--danger); }
|
|
637
|
+
.error-item:first-of-type { margin-top: 0; }
|
|
638
|
+
.error-time { font-size: 10px; color: var(--text-muted); }
|
|
639
|
+
.error-path { font-family: monospace; color: var(--danger); }
|
|
640
|
+
|
|
641
|
+
@media (max-width: 640px) {
|
|
642
|
+
.container { padding: 12px; }
|
|
643
|
+
.stats-bar, .percentiles { grid-template-columns: repeat(2, 1fr); }
|
|
644
|
+
.routes-grid { grid-template-columns: 1fr; }
|
|
645
|
+
.status-codes { grid-template-columns: repeat(3, 1fr); }
|
|
646
|
+
}
|
|
647
|
+
</style>
|
|
648
|
+
</head>
|
|
649
|
+
<body>
|
|
650
|
+
<div class="container">
|
|
651
|
+
<header>
|
|
652
|
+
<div class="title-section">
|
|
653
|
+
<h1>${title}</h1>
|
|
654
|
+
<div class="subtitle">${hostname}</div>
|
|
655
|
+
</div>
|
|
656
|
+
<div class="header-controls">
|
|
657
|
+
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle dark mode">🌓</button>
|
|
658
|
+
<div class="status-badge edge" id="connBadge">
|
|
659
|
+
<span>☁️</span>
|
|
660
|
+
<span id="connText">Edge Mode</span>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</header>
|
|
664
|
+
|
|
665
|
+
<div class="edge-notice">
|
|
666
|
+
<strong>☁️ Running in Edge/Cloudflare Workers Mode</strong>
|
|
667
|
+
System metrics (CPU, Memory, Heap) are not available. Dashboard updates via polling every 5 seconds.
|
|
668
|
+
</div>
|
|
669
|
+
|
|
670
|
+
<div class="stats-bar">
|
|
671
|
+
<div class="stat-box"><div class="label">Uptime</div><div class="value" id="uptime">${uptime}</div></div>
|
|
672
|
+
<div class="stat-box"><div class="label">Requests</div><div class="value" id="totalReq">0</div></div>
|
|
673
|
+
<div class="stat-box"><div class="label">Active</div><div class="value" id="activeConn">0</div></div>
|
|
674
|
+
<div class="stat-box"><div class="label">Error Rate</div><div class="value" id="errorRate">0%</div></div>
|
|
675
|
+
</div>
|
|
676
|
+
|
|
677
|
+
<div class="percentiles">
|
|
678
|
+
<div class="percentile-item"><div class="label">Avg</div><div class="value" id="pAvg">0ms</div></div>
|
|
679
|
+
<div class="percentile-item"><div class="label">P50</div><div class="value" id="p50">0ms</div></div>
|
|
680
|
+
<div class="percentile-item"><div class="label">P95</div><div class="value" id="p95">0ms</div></div>
|
|
681
|
+
<div class="percentile-item"><div class="label">P99</div><div class="value" id="p99">0ms</div></div>
|
|
682
|
+
</div>
|
|
683
|
+
|
|
684
|
+
<div class="metric-row">
|
|
685
|
+
<div class="metric-info"><div class="metric-label">Response</div><div class="metric-value"><span id="rtVal">0</span><span class="metric-unit">ms</span></div></div>
|
|
686
|
+
<div class="chart-container"><canvas id="rtChart"></canvas></div>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="metric-row">
|
|
689
|
+
<div class="metric-info"><div class="metric-label">RPS</div><div class="metric-value" id="rpsVal">0</div></div>
|
|
690
|
+
<div class="chart-container"><canvas id="rpsChart"></canvas></div>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="metric-row">
|
|
693
|
+
<div class="metric-info"><div class="metric-label">Error Rate</div><div class="metric-value"><span id="errRateVal">0</span><span class="metric-unit">%</span></div></div>
|
|
694
|
+
<div class="chart-container"><canvas id="errChart"></canvas></div>
|
|
695
|
+
</div>
|
|
696
|
+
|
|
697
|
+
<div class="section-title">Route Analytics</div>
|
|
698
|
+
<div class="routes-grid">
|
|
699
|
+
<div class="route-section">
|
|
700
|
+
<h3>🔥 Top Routes</h3>
|
|
701
|
+
<div id="topRoutes"><div class="route-item"><span class="route-path">No data yet</span></div></div>
|
|
702
|
+
</div>
|
|
703
|
+
<div class="route-section">
|
|
704
|
+
<h3>🐢 Slowest Routes</h3>
|
|
705
|
+
<div id="slowRoutes"><div class="route-item"><span class="route-path">No data yet</span></div></div>
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
708
|
+
|
|
709
|
+
<div class="section-title">HTTP Status Codes</div>
|
|
710
|
+
<div class="status-codes">
|
|
711
|
+
<div class="status-code-box"><div class="code">2xx</div><div class="count s2xx" id="s2xx">0</div></div>
|
|
712
|
+
<div class="status-code-box"><div class="code">3xx</div><div class="count s3xx" id="s3xx">0</div></div>
|
|
713
|
+
<div class="status-code-box"><div class="code">4xx</div><div class="count s4xx" id="s4xx">0</div></div>
|
|
714
|
+
<div class="status-code-box"><div class="code">5xx</div><div class="count s5xx" id="s5xx">0</div></div>
|
|
715
|
+
<div class="status-code-box"><div class="code">Rate Limited</div><div class="count" id="rateLimited">0</div></div>
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<div class="section-title">Recent Errors</div>
|
|
719
|
+
<div class="errors-panel" id="errorsPanel">
|
|
720
|
+
<div style="color: var(--text-muted); font-size: 12px;">No errors recorded</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
|
|
724
|
+
<script>
|
|
725
|
+
(function() {
|
|
726
|
+
var isDark = localStorage.getItem('statusDark') === 'true';
|
|
727
|
+
if (isDark) document.body.classList.add('dark');
|
|
728
|
+
|
|
729
|
+
window.toggleTheme = function() {
|
|
730
|
+
document.body.classList.toggle('dark');
|
|
731
|
+
localStorage.setItem('statusDark', document.body.classList.contains('dark'));
|
|
732
|
+
};
|
|
733
|
+
|
|
734
|
+
var gridColor = isDark ? '#2a2a2a' : '#f0f0f0';
|
|
735
|
+
|
|
736
|
+
var chartConfig = {
|
|
737
|
+
responsive: true, maintainAspectRatio: false, animation: false,
|
|
738
|
+
plugins: { legend: { display: false } },
|
|
739
|
+
scales: {
|
|
740
|
+
x: { type: 'time', time: { unit: 'second' }, grid: { display: false }, ticks: { display: false } },
|
|
741
|
+
y: { beginAtZero: true, grid: { color: gridColor, drawBorder: false }, ticks: { font: { size: 9 }, color: '#999', maxTicksLimit: 3 } }
|
|
742
|
+
},
|
|
743
|
+
elements: { point: { radius: 0 }, line: { tension: 0.2, borderWidth: 1.5 } }
|
|
744
|
+
};
|
|
745
|
+
|
|
746
|
+
function createChart(id, color) {
|
|
747
|
+
var ctx = document.getElementById(id).getContext('2d');
|
|
748
|
+
var config = JSON.parse(JSON.stringify(chartConfig));
|
|
749
|
+
return new Chart(ctx, { type: 'line', data: { datasets: [{ data: [], borderColor: color, fill: false }] }, options: config });
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
var charts = {
|
|
753
|
+
rt: createChart('rtChart', '#10b981'),
|
|
754
|
+
rps: createChart('rpsChart', '#ec4899'),
|
|
755
|
+
err: createChart('errChart', '#ef4444')
|
|
756
|
+
};
|
|
757
|
+
|
|
758
|
+
function updateChart(chart, points) {
|
|
759
|
+
chart.data.datasets[0].data = points.map(function(p) { return { x: new Date(p.timestamp), y: p.value }; });
|
|
760
|
+
chart.update('none');
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
function formatUptime(s) {
|
|
764
|
+
var d=Math.floor(s/86400), h=Math.floor((s%86400)/3600), m=Math.floor((s%3600)/60), parts=[];
|
|
765
|
+
if(d)parts.push(d+'d'); if(h)parts.push(h+'h'); if(m)parts.push(m+'m'); parts.push((s%60)+'s');
|
|
766
|
+
return parts.join(' ');
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
function sumCodes(codes, prefix) { var sum=0; for(var c in codes) if(c.startsWith(prefix)) sum+=codes[c]; return sum; }
|
|
770
|
+
|
|
771
|
+
function renderRoutes(containerId, routes, statKey, isSlow) {
|
|
772
|
+
var container = document.getElementById(containerId);
|
|
773
|
+
if (!routes || routes.length === 0) { container.innerHTML = '<div class="route-item"><span class="route-path">No data yet</span></div>'; return; }
|
|
774
|
+
container.innerHTML = routes.slice(0,5).map(function(r) {
|
|
775
|
+
var val = statKey === 'avgTime' ? r.avgTime.toFixed(1) + 'ms' : (statKey === 'errors' ? r.errors : r.count);
|
|
776
|
+
var cls = isSlow && r.avgTime > 100 ? 'slow' : (statKey === 'errors' ? 'error' : '');
|
|
777
|
+
return '<div class="route-item"><span class="route-path">' + r.method + ' ' + r.path + '</span><span class="route-stat ' + cls + '">' + val + '</span></div>';
|
|
778
|
+
}).join('');
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
function renderErrors(errors) {
|
|
782
|
+
var panel = document.getElementById('errorsPanel');
|
|
783
|
+
if (!errors || errors.length === 0) { panel.innerHTML = '<div style="color:var(--text-muted);font-size:12px;">No errors recorded</div>'; return; }
|
|
784
|
+
panel.innerHTML = errors.slice(0,5).map(function(e) {
|
|
785
|
+
return '<div class="error-item"><div class="error-time">' + new Date(e.timestamp).toLocaleTimeString() + '</div><div class="error-path">' + e.method + ' ' + e.path + ' → ' + e.status + '</div></div>';
|
|
786
|
+
}).join('');
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
function applyAlertColors(alerts) {
|
|
790
|
+
document.getElementById('rtVal').style.color = alerts.responseTime ? 'var(--danger)' : '';
|
|
791
|
+
document.getElementById('errorRate').style.color = alerts.errorRate ? 'var(--danger)' : '';
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
function fetchMetrics() {
|
|
795
|
+
fetch('./api/metrics')
|
|
796
|
+
.then(function(res) { return res.json(); })
|
|
797
|
+
.then(function(data) {
|
|
798
|
+
var s = data.snapshot, c = data.charts;
|
|
799
|
+
|
|
800
|
+
document.getElementById('rtVal').textContent = s.responseTime.toFixed(1);
|
|
801
|
+
document.getElementById('rpsVal').textContent = s.rps.toFixed(1);
|
|
802
|
+
document.getElementById('errRateVal').textContent = s.errorRate.toFixed(1);
|
|
803
|
+
|
|
804
|
+
document.getElementById('uptime').textContent = formatUptime(s.processUptime);
|
|
805
|
+
document.getElementById('totalReq').textContent = s.totalRequests.toLocaleString();
|
|
806
|
+
document.getElementById('activeConn').textContent = s.activeConnections;
|
|
807
|
+
document.getElementById('errorRate').textContent = s.errorRate.toFixed(1) + '%';
|
|
808
|
+
|
|
809
|
+
document.getElementById('pAvg').textContent = s.percentiles.avg.toFixed(1) + 'ms';
|
|
810
|
+
document.getElementById('p50').textContent = s.percentiles.p50.toFixed(1) + 'ms';
|
|
811
|
+
document.getElementById('p95').textContent = s.percentiles.p95.toFixed(1) + 'ms';
|
|
812
|
+
document.getElementById('p99').textContent = s.percentiles.p99.toFixed(1) + 'ms';
|
|
813
|
+
|
|
814
|
+
if (c.responseTime) updateChart(charts.rt, c.responseTime);
|
|
815
|
+
if (c.rps) updateChart(charts.rps, c.rps);
|
|
816
|
+
if (c.errorRate) updateChart(charts.err, c.errorRate);
|
|
817
|
+
|
|
818
|
+
renderRoutes('topRoutes', s.topRoutes, 'count', false);
|
|
819
|
+
renderRoutes('slowRoutes', s.slowestRoutes, 'avgTime', true);
|
|
820
|
+
|
|
821
|
+
document.getElementById('s2xx').textContent = sumCodes(s.statusCodes, '2');
|
|
822
|
+
document.getElementById('s3xx').textContent = sumCodes(s.statusCodes, '3');
|
|
823
|
+
document.getElementById('s4xx').textContent = sumCodes(s.statusCodes, '4');
|
|
824
|
+
document.getElementById('s5xx').textContent = sumCodes(s.statusCodes, '5');
|
|
825
|
+
document.getElementById('rateLimited').textContent = s.rateLimitStats.blocked;
|
|
826
|
+
|
|
827
|
+
renderErrors(s.recentErrors);
|
|
828
|
+
applyAlertColors(s.alerts);
|
|
829
|
+
})
|
|
830
|
+
.catch(function(err) {
|
|
831
|
+
console.error('Failed to fetch metrics:', err);
|
|
832
|
+
});
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
// Initial fetch
|
|
836
|
+
fetchMetrics();
|
|
837
|
+
|
|
838
|
+
// Poll every 5 seconds
|
|
839
|
+
setInterval(fetchMetrics, 5000);
|
|
840
|
+
})();
|
|
841
|
+
</script>
|
|
842
|
+
</body>
|
|
843
|
+
</html>`;
|
|
844
|
+
}
|
|
454
845
|
//# sourceMappingURL=dashboard.js.map
|
package/dist/dashboard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../src/dashboard.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,kCAAkC;AAClC,gDAAgD;AAChD,gFAAgF;AAIhF;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAkB;IACrF,OAAO;;;;;aAKE,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAiMI,KAAK;wCACa,QAAQ;;;;;;;;;;;kGAWkD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA6KzC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4DjE,CAAC;AACT,CAAC"}
|
|
1
|
+
{"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../src/dashboard.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,kCAAkC;AAClC,gDAAgD;AAChD,gFAAgF;AAIhF;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAkB;IACrF,OAAO;;;;;aAKE,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAiMI,KAAK;wCACa,QAAQ;;;;;;;;;;;kGAWkD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA6KzC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4DjE,CAAC;AACT,CAAC;AAWD;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAsB;IACjF,OAAO;;;;;aAKE,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA6LI,KAAK;wCACa,QAAQ;;;;;;;;;;;;;;;;;kGAiBkD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4KhG,CAAC;AACT,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { Hono } from 'hono';
|
|
2
|
-
import type { Server as HttpServer } from 'http';
|
|
3
2
|
import type { StatusMonitorConfig } from './types.js';
|
|
4
3
|
export * from './types.js';
|
|
4
|
+
export { generateDashboard, generateEdgeDashboard } from './dashboard.js';
|
|
5
|
+
export { createEdgeMonitor, type EdgeMonitor } from './monitor-edge.js';
|
|
6
|
+
export { detectPlatform, isNodeEnvironment, isCloudflareEnvironment, isEdgeEnvironment, getPlatformInfo } from './platform.js';
|
|
5
7
|
export { createMonitor, type Monitor } from './monitor.js';
|
|
6
8
|
export { createMiddleware } from './middleware.js';
|
|
7
|
-
export { generateDashboard } from './dashboard.js';
|
|
8
9
|
export { isClusterWorker, isClusterMaster, getWorkerId, createClusterAggregator } from './cluster.js';
|
|
9
10
|
/**
|
|
10
11
|
* Create a complete status monitor with routes, middleware, and WebSocket
|
|
12
|
+
* Automatically detects the runtime environment and uses the appropriate implementation
|
|
11
13
|
*
|
|
12
|
-
* @example
|
|
14
|
+
* @example Node.js
|
|
13
15
|
* ```typescript
|
|
14
16
|
* import { Hono } from 'hono';
|
|
15
17
|
* import { serve } from '@hono/node-server';
|
|
@@ -18,24 +20,58 @@ export { isClusterWorker, isClusterMaster, getWorkerId, createClusterAggregator
|
|
|
18
20
|
* const app = new Hono();
|
|
19
21
|
* const monitor = statusMonitor();
|
|
20
22
|
*
|
|
21
|
-
* // Add middleware to track all requests
|
|
22
23
|
* app.use('*', monitor.middleware);
|
|
23
|
-
*
|
|
24
|
-
* // Mount status routes
|
|
25
24
|
* app.route('/status', monitor.routes);
|
|
26
25
|
*
|
|
27
|
-
* // Start server and initialize WebSocket
|
|
28
26
|
* const server = serve({ fetch: app.fetch, port: 3000 });
|
|
29
27
|
* monitor.initSocket(server);
|
|
30
28
|
* ```
|
|
29
|
+
*
|
|
30
|
+
* @example Cloudflare Workers
|
|
31
|
+
* ```typescript
|
|
32
|
+
* import { Hono } from 'hono';
|
|
33
|
+
* import { statusMonitor } from 'hono-status-monitor';
|
|
34
|
+
*
|
|
35
|
+
* const app = new Hono();
|
|
36
|
+
* const monitor = statusMonitor();
|
|
37
|
+
*
|
|
38
|
+
* app.use('*', monitor.middleware);
|
|
39
|
+
* app.route('/status', monitor.routes);
|
|
40
|
+
*
|
|
41
|
+
* export default app;
|
|
42
|
+
* ```
|
|
31
43
|
*/
|
|
32
44
|
export declare function statusMonitor(config?: StatusMonitorConfig): {
|
|
33
45
|
/** Hono middleware for tracking all requests */
|
|
34
|
-
middleware:
|
|
46
|
+
middleware: any;
|
|
35
47
|
/** Pre-configured Hono routes for dashboard and API */
|
|
36
48
|
routes: Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
|
|
37
49
|
/** Initialize Socket.io on the HTTP server for real-time updates */
|
|
38
|
-
initSocket: (server:
|
|
50
|
+
initSocket: (server: import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>) => any;
|
|
51
|
+
/** Track rate limit events for the dashboard */
|
|
52
|
+
trackRateLimit: (blocked: boolean) => any;
|
|
53
|
+
/** Get current metrics snapshot */
|
|
54
|
+
getMetrics: () => any;
|
|
55
|
+
/** Get chart data for all metrics */
|
|
56
|
+
getCharts: () => any;
|
|
57
|
+
/** Stop metrics collection */
|
|
58
|
+
stop: () => any;
|
|
59
|
+
/** Access to the underlying monitor instance */
|
|
60
|
+
monitor: any;
|
|
61
|
+
/** Whether running in edge mode */
|
|
62
|
+
isEdgeMode: boolean;
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* Explicitly create an edge-compatible status monitor
|
|
66
|
+
* Use this when you want to force edge mode regardless of environment
|
|
67
|
+
*/
|
|
68
|
+
export declare function statusMonitorEdge(config?: StatusMonitorConfig): {
|
|
69
|
+
/** Hono middleware for tracking all requests */
|
|
70
|
+
middleware: (c: any, next: () => Promise<void>) => Promise<void>;
|
|
71
|
+
/** Pre-configured Hono routes for dashboard and API */
|
|
72
|
+
routes: Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
|
|
73
|
+
/** Initialize Socket.io - not available in edge, returns null */
|
|
74
|
+
initSocket: () => any;
|
|
39
75
|
/** Track rate limit events for the dashboard */
|
|
40
76
|
trackRateLimit: (blocked: boolean) => void;
|
|
41
77
|
/** Get current metrics snapshot */
|
|
@@ -50,14 +86,17 @@ export declare function statusMonitor(config?: StatusMonitorConfig): {
|
|
|
50
86
|
trackRequest: (path: string, method: string) => void;
|
|
51
87
|
trackRequestComplete: (path: string, method: string, durationMs: number, statusCode: number) => void;
|
|
52
88
|
trackRateLimitEvent: (blocked: boolean) => void;
|
|
53
|
-
getMetricsSnapshot: (
|
|
89
|
+
getMetricsSnapshot: () => Promise<import("./types.js").MetricsSnapshot>;
|
|
54
90
|
getChartData: () => import("./types.js").ChartData;
|
|
55
91
|
start: () => void;
|
|
56
92
|
stop: () => void;
|
|
57
|
-
initSocket: (
|
|
93
|
+
initSocket: () => null;
|
|
58
94
|
formatUptime: (seconds: number) => string;
|
|
59
|
-
|
|
95
|
+
isEdgeMode: boolean;
|
|
96
|
+
readonly io: null;
|
|
60
97
|
};
|
|
98
|
+
/** Whether running in edge mode */
|
|
99
|
+
isEdgeMode: boolean;
|
|
61
100
|
};
|
|
62
101
|
export default statusMonitor;
|
|
63
102
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAMtD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EACH,cAAc,EACd,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,EAClB,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACH,eAAe,EACf,eAAe,EACf,WAAW,EACX,uBAAuB,EAC1B,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,aAAa,CAAC,MAAM,GAAE,mBAAwB;IAoDtD,gDAAgD;;IAEhD,uDAAuD;;IAEvD,oEAAoE;;IAEpE,gDAAgD;8BACtB,OAAO;IACjC,mCAAmC;;IAEnC,qCAAqC;;IAErC,8BAA8B;;IAE9B,gDAAgD;;IAEhD,mCAAmC;;EAxD1C;AAuID;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,mBAAwB;IAzB1D,gDAAgD;oBA5CvB,GAAG,QAAQ,MAAM,OAAO,CAAC,IAAI,CAAC;IA8CvD,uDAAuD;;IAEvD,iEAAiE;sBACvC,GAAG;IAC7B,gDAAgD;8BACtB,OAAO;IACjC,mCAAmC;;IAEnC,qCAAqC;;IAErC,8BAA8B;;IAE9B,gDAAgD;;;;;;;;;;;;;;;IAEhD,mCAAmC;;EAW1C;AAGD,eAAe,aAAa,CAAC"}
|