hono-status-monitor 1.0.0 → 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 +123 -4
- package/dist/cluster.d.ts +29 -0
- package/dist/cluster.d.ts.map +1 -0
- package/dist/cluster.js +256 -0
- package/dist/cluster.js.map +1 -0
- 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 +52 -12
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +122 -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/monitor.d.ts.map +1 -1
- package/dist/monitor.js +41 -8
- package/dist/monitor.js.map +1 -1
- 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 +29 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +12 -9
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,14 +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 {
|
|
9
|
+
export { isClusterWorker, isClusterMaster, getWorkerId, createClusterAggregator } from './cluster.js';
|
|
8
10
|
/**
|
|
9
11
|
* Create a complete status monitor with routes, middleware, and WebSocket
|
|
12
|
+
* Automatically detects the runtime environment and uses the appropriate implementation
|
|
10
13
|
*
|
|
11
|
-
* @example
|
|
14
|
+
* @example Node.js
|
|
12
15
|
* ```typescript
|
|
13
16
|
* import { Hono } from 'hono';
|
|
14
17
|
* import { serve } from '@hono/node-server';
|
|
@@ -17,24 +20,58 @@ export { generateDashboard } from './dashboard.js';
|
|
|
17
20
|
* const app = new Hono();
|
|
18
21
|
* const monitor = statusMonitor();
|
|
19
22
|
*
|
|
20
|
-
* // Add middleware to track all requests
|
|
21
23
|
* app.use('*', monitor.middleware);
|
|
22
|
-
*
|
|
23
|
-
* // Mount status routes
|
|
24
24
|
* app.route('/status', monitor.routes);
|
|
25
25
|
*
|
|
26
|
-
* // Start server and initialize WebSocket
|
|
27
26
|
* const server = serve({ fetch: app.fetch, port: 3000 });
|
|
28
27
|
* monitor.initSocket(server);
|
|
29
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
|
+
* ```
|
|
30
43
|
*/
|
|
31
44
|
export declare function statusMonitor(config?: StatusMonitorConfig): {
|
|
32
45
|
/** Hono middleware for tracking all requests */
|
|
33
|
-
middleware:
|
|
46
|
+
middleware: any;
|
|
34
47
|
/** Pre-configured Hono routes for dashboard and API */
|
|
35
48
|
routes: Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
|
|
36
49
|
/** Initialize Socket.io on the HTTP server for real-time updates */
|
|
37
|
-
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;
|
|
38
75
|
/** Track rate limit events for the dashboard */
|
|
39
76
|
trackRateLimit: (blocked: boolean) => void;
|
|
40
77
|
/** Get current metrics snapshot */
|
|
@@ -49,14 +86,17 @@ export declare function statusMonitor(config?: StatusMonitorConfig): {
|
|
|
49
86
|
trackRequest: (path: string, method: string) => void;
|
|
50
87
|
trackRequestComplete: (path: string, method: string, durationMs: number, statusCode: number) => void;
|
|
51
88
|
trackRateLimitEvent: (blocked: boolean) => void;
|
|
52
|
-
getMetricsSnapshot: (
|
|
89
|
+
getMetricsSnapshot: () => Promise<import("./types.js").MetricsSnapshot>;
|
|
53
90
|
getChartData: () => import("./types.js").ChartData;
|
|
54
91
|
start: () => void;
|
|
55
92
|
stop: () => void;
|
|
56
|
-
initSocket: (
|
|
93
|
+
initSocket: () => null;
|
|
57
94
|
formatUptime: (seconds: number) => string;
|
|
58
|
-
|
|
95
|
+
isEdgeMode: boolean;
|
|
96
|
+
readonly io: null;
|
|
59
97
|
};
|
|
98
|
+
/** Whether running in edge mode */
|
|
99
|
+
isEdgeMode: boolean;
|
|
60
100
|
};
|
|
61
101
|
export default statusMonitor;
|
|
62
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"}
|