Statsig Status Page核心原理纯JavaScript状态监控系统解析【免费下载链接】statuspageA simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.项目地址: https://gitcode.com/gh_mirrors/sta/statuspageStatsig Status Page是一个基于GitHub Pages和Actions的零依赖、纯JavaScript状态监控系统。这个开源项目通过简单的技术栈实现了强大的服务状态监控功能让开发者能够快速搭建自己的服务状态页面。本文将深入解析其核心原理和实现机制帮助你理解这个简单而强大的状态监控系统是如何工作的。系统架构设计极简主义的监控方案Statsig Status Page采用了极其简单的架构设计整个系统只包含三个核心组件配置文件urls.cfg - 定义需要监控的服务URL健康检查脚本health-check.sh - 执行定期的服务可用性检查前端展示界面index.html 和 index.js - 可视化展示服务状态这种极简设计使得系统易于部署、维护和定制。无需复杂的数据库配置无需安装额外的依赖包只需要GitHub账户和基本的Web知识即可使用。GitHub Actions自动化监控机制系统的核心监控功能通过GitHub Actions实现自动化。在 .github/workflows/health-check.yml 中定义了一个定时任务每小时自动执行健康检查# 简化的工作流配置 on: schedule: - cron: 0 * * * * # 每小时运行一次 workflow_dispatch: # 支持手动触发每次健康检查运行时系统会执行以下步骤读取配置文件中的服务URL列表使用curl命令测试每个服务的可用性将检查结果记录到日志文件中自动提交更新到GitHub仓库智能状态检测算法在 health-check.sh 中系统实现了智能的重试机制# 重试逻辑最多尝试4次 for i in 1 2 3 4; do response$(curl --write-out %{http_code} --silent --output /dev/null $url) if [ $response -eq 200 ] || [ $response -eq 202 ] || [ $response -eq 301 ] || [ $response -eq 302 ] || [ $response -eq 307 ]; then resultsuccess else resultfailed fi if [ $result success ]; then break fi sleep 5 done这种设计能够有效应对网络抖动和临时性故障提高监控的准确性。系统不仅检查HTTP 200状态码还接受重定向状态码301、302、307和接受状态码202这使得监控更加灵活和实用。数据可视化与状态展示前端展示层是Statsig Status Page的亮点之一。系统通过纯JavaScript实现了优雅的状态可视化状态时间线展示在 index.js 中系统构建了一个30天的状态时间线const maxDays 30; function constructStatusStream(key, url, uptimeData) { let streamContainer templatize(statusStreamContainerTemplate); for (var ii maxDays - 1; ii 0; ii--) { let line constructStatusLine(key, ii, uptimeData[ii]); streamContainer.appendChild(line); } // ... 其他代码 }每个服务显示一个30天的状态时间线用不同颜色的方块表示每天的状态 绿色完全正常100%可用 黄色部分中断30%-99%可用 红色严重中断30%可用⚪ 白色无数据智能数据归一化处理系统通过normalizeData()函数对日志数据进行智能处理function normalizeData(statusLines) { const rows statusLines.split(\n); const dateNormalized splitRowsByDate(rows); // 计算相对天数并映射数据 let relativeDateMap {}; const now Date.now(); for (const [key, val] of Object.entries(dateNormalized)) { if (key upTime) continue; const relDays getRelativeDays(now, new Date(key).getTime()); relativeDateMap[relDays] getDayAverage(val); } relativeDateMap.upTime dateNormalized.upTime; return relativeDateMap; }交互式工具提示系统提供了丰富的交互功能当用户将鼠标悬停在状态方块上时会显示详细的状态信息function showTooltip(element, key, date, color) { clearTimeout(tooltipTimeout); const toolTipDiv document.getElementById(tooltip); document.getElementById(tooltipDateTime).innerText date.toDateString(); document.getElementById(tooltipDescription).innerText getStatusDescriptiveText(color); const statusDiv document.getElementById(tooltipStatus); statusDiv.innerText getStatusText(color); statusDiv.className color; // 定位工具提示 toolTipDiv.style.top element.offsetTop element.offsetHeight 10; toolTipDiv.style.left element.offsetLeft element.offsetWidth / 2 - toolTipDiv.offsetWidth / 2; toolTipDiv.style.opacity 1; }模板化渲染系统Statsig Status Page采用了一种巧妙的模板化渲染机制。在 index.html 中定义了多个模板div idtemplates styledisplay: none div idstatusSquareTemplate classstatusSquare $color>function templatize(templateId, parameters) { let clone document.getElementById(templateId).cloneNode(true); clone.id template_clone_ cloneId; if (!parameters) return clone; applyTemplateSubstitutions(clone, parameters); return clone; }这种设计使得前端代码非常简洁同时保持了良好的可维护性。数据存储与持久化策略系统采用了一种巧妙的数据存储策略——使用GitHub仓库本身作为数据库日志文件存储每个服务的状态记录存储在单独的日志文件中如logs/google_report.log自动版本控制每次健康检查的结果都会自动提交到Git仓库提供完整的历史记录数据清理机制系统只保留最近2000条记录防止日志文件过大# 保留最近2000条记录 echo $(tail -2000 logs/${key}_report.log) logs/${key}_report.log快速部署指南第一步配置监控服务编辑 urls.cfg 文件添加需要监控的服务# 格式服务名称服务URL myapihttps://api.example.com websitehttps://www.example.com databasehttps://db.example.com/health第二步自定义界面修改 index.html 中的标题和样式title我的服务状态监控/title h1服务状态监控面板/h1第三步启用GitHub Pages在GitHub仓库设置中启用GitHub Pages功能选择主分支作为发布源。第四步等待数据收集系统每小时自动执行健康检查大约30天后你将获得完整的状态时间线数据。性能优化与最佳实践1. 轻量级设计纯静态文件无需服务器端处理零运行时依赖加载速度快响应式设计支持移动设备2. 数据优化只显示最近30天的数据保持界面简洁按天聚合数据减少前端渲染负担智能缓存机制减少网络请求3. 可扩展性支持无限数量的监控服务易于定制样式和布局可集成到现有系统中实际应用场景企业级服务监控大型企业可以使用Statsig Status Page监控多个微服务的健康状况提供统一的监控视图。开发者个人项目独立开发者可以用它来监控自己的网站、API服务和数据库的健康状况。开源项目状态页面开源项目维护者可以快速搭建项目状态页面向用户展示服务的可用性。内部系统监控企业内部系统可以使用这个方案监控关键服务的运行状态。总结Statsig Status Page通过巧妙的设计实现了功能完整的服务状态监控系统。其核心优势在于简单易用无需复杂配置几分钟即可部署 ⚡零依赖纯JavaScript实现无需额外依赖 数据可视化直观的状态时间线展示 自动化GitHub Actions实现全自动监控 版本控制利用Git实现数据持久化和历史记录这个项目展示了如何用最简单的技术栈构建实用的监控系统是学习现代Web开发和自动化运维的优秀案例。无论你是初学者还是经验丰富的开发者都可以从这个项目中获得启发构建自己的监控解决方案。【免费下载链接】statuspageA simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.项目地址: https://gitcode.com/gh_mirrors/sta/statuspage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考