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/statuspage

Statsig Status Page是一个基于GitHub Pages和Actions的零依赖、纯JavaScript状态监控系统。这个开源项目通过简单的技术栈实现了强大的服务状态监控功能，让开发者能够快速搭建自己的服务状态页面。本文将深入解析其核心原理和实现机制，帮助你理解这个简单而强大的状态监控系统是如何工作的。

系统架构设计：极简主义的监控方案

Statsig Status Page采用了极其简单的架构设计，整个系统只包含三个核心组件：

1. 配置文件：urls.cfg - 定义需要监控的服务URL
2. 健康检查脚本：health-check.sh - 执行定期的服务可用性检查
3. 前端展示界面：index.html 和 index.js - 可视化展示服务状态

这种极简设计使得系统易于部署、维护和定制。无需复杂的数据库配置，无需安装额外的依赖包，只需要GitHub账户和基本的Web知识即可使用。

GitHub Actions自动化监控机制

系统的核心监控功能通过GitHub Actions实现自动化。在 .github/workflows/health-check.yml 中定义了一个定时任务，每小时自动执行健康检查：

# 简化的工作流配置 on: schedule: - cron: '0 * * * *' # 每小时运行一次 workflow_dispatch: # 支持手动触发

每次健康检查运行时，系统会执行以下步骤：

1. 读取配置文件中的服务URL列表
2. 使用curl命令测试每个服务的可用性
3. 将检查结果记录到日志文件中
4. 自动提交更新到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 result="success" else result="failed" 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 id="templates" style="display: none"> <div id="statusSquareTemplate" class="statusSquare $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仓库本身作为数据库：

1. 日志文件存储：每个服务的状态记录存储在单独的日志文件中，如logs/google_report.log
2. 自动版本控制：每次健康检查的结果都会自动提交到Git仓库，提供完整的历史记录
3. 数据清理机制：系统只保留最近2000条记录，防止日志文件过大

# 保留最近2000条记录 echo "$(tail -2000 logs/${key}_report.log)" > "logs/${key}_report.log"

快速部署指南

第一步：配置监控服务

编辑 urls.cfg 文件，添加需要监控的服务：

# 格式：服务名称=服务URL myapi=https://api.example.com website=https://www.example.com database=https://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