如何扩展Statsig Status Page：添加数据库监控和API检测的完整指南-平芜编程栈

如何扩展Statsig Status Page：添加数据库监控和API检测的完整指南

【免费下载链接】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的轻量级状态监控工具，它通过简单的配置就能监控网站和API的健康状态。本文将为你展示如何扩展这个开源状态页，添加数据库监控和API检测功能，打造一个全面的系统健康监控平台。🚀

为什么需要扩展Statsig Status Page？

Statsig Status Page的核心功能是监控HTTP服务的可用性，但现代应用通常包含数据库、API接口、消息队列等多种组件。通过扩展监控功能，你可以：

实时监控数据库连接状态🗄️
检测API接口的响应时间和正确性⏱️
构建完整的系统健康视图📊
提前发现潜在的性能问题🔍

扩展前的准备工作

在开始扩展之前，确保你已经完成了基本配置：

克隆仓库：

git clone https://gitcode.com/gh_mirrors/sta/statuspage cd statuspage

配置基础监控：编辑 urls.cfg 文件，添加要监控的URL地址
设置GitHub Actions：检查 .github/workflows/health-check.yml 确保健康检查工作流正常运行

添加数据库监控功能

1. 创建数据库健康检查脚本

首先，在项目根目录创建一个新的数据库检查脚本database-check.sh：

#!/bin/bash # PostgreSQL数据库检查 check_postgresql() { psql "$1" -c "SELECT 1;" > /dev/null 2>&1 if [ $? -eq 0 ]; then echo "success" else echo "failed" fi } # MySQL/MariaDB数据库检查 check_mysql() { mysql --host="$2" --user="$3" --password="$4" --database="$1" -e "SELECT 1;" > /dev/null 2>&1 if [ $? -eq 0 ]; then echo "success" else echo "failed" fi } # MongoDB数据库检查 check_mongodb() { mongo "$1" --eval "db.stats()" > /dev/null 2>&1 if [ $? -eq 0 ]; then echo "success" else echo "failed" fi }

2. 扩展健康检查脚本

修改 health-check.sh 脚本，添加数据库检查逻辑：

# 在现有检查循环后添加数据库检查 echo "***********************" echo "Starting database health checks..." # 数据库配置数组 DATABASE_KEYS=("main_db" "analytics_db" "cache_db") DATABASE_TYPES=("postgresql" "mysql" "redis") DATABASE_URLS=("postgresql://localhost:5432/main" "mysql://user:pass@localhost:3306/analytics" "redis://localhost:6379") for (( index=0; index < ${#DATABASE_KEYS[@]}; index++)) do key="${DATABASE_KEYS[index]}" db_type="${DATABASE_TYPES[index]}" url="${DATABASE_URLS[index]}" echo " Checking $key ($db_type)..." case $db_type in "postgresql") check_postgresql "$url" ;; "mysql") check_mysql "$url" ;; "redis") # Redis检查逻辑 redis-cli -u "$url" PING > /dev/null 2>&1 if [ $? -eq 0 ]; then result="success" else result="failed" fi ;; esac dateTime=$(date +'%Y-%m-%d %H:%M') echo $dateTime, $result >> "logs/${key}_report.log" done

添加API接口检测

1. 创建API检测配置文件

创建api-endpoints.cfg文件来管理API端点：

# API端点配置 user_api=https://api.example.com/users/health payment_api=https://api.example.com/payments/status auth_api=https://api.example.com/auth/ping notification_api=https://api.example.com/notifications/health

2. 扩展API响应时间监控

修改健康检查脚本，添加响应时间监控：

# API响应时间检查函数 check_api_with_latency() { local url=$1 local key=$2 # 测量响应时间 start_time=$(date +%s%N) response=$(curl --write-out '%{http_code}' --silent --output /dev/null $url) end_time=$(date +%s%N) latency_ms=$(( (end_time - start_time) / 1000000 )) if [ "$response" -eq 200 ] || [ "$response" -eq 201 ]; then result="success" # 记录响应时间 echo "$(date +'%Y-%m-%d %H:%M'), success, $latency_ms ms" >> "logs/${key}_latency.log" else result="failed" echo "$(date +'%Y-%m-%d %H:%M'), failed, $latency_ms ms" >> "logs/${key}_latency.log" fi echo $result } # 在现有检查中添加API端点检查 echo "***********************" echo "Starting API endpoint checks..." apiConfig="./api-endpoints.cfg" if [ -f "$apiConfig" ]; then while read -r line do IFS='=' read -ra TOKENS << "$line" key="${TOKENS[0]}" url="${TOKENS[1]}" echo " Checking API: $key" result=$(check_api_with_latency "$url" "$key") dateTime=$(date +'%Y-%m-%d %H:%M') echo $dateTime, $result >> "logs/${key}_report.log" done < "$apiConfig" fi

增强状态页面显示

1. 扩展状态页面显示逻辑

修改 index.js 文件，添加数据库和API的专用显示模板：

// 在constructStatusStream函数后添加 function constructDatabaseStatus(key, url, uptimeData) { const container = templatize("databaseStatusTemplate", { title: key, url: url, color: getColor(uptimeData[0]), status: getStatusText(getColor(uptimeData[0])), upTime: uptimeData.upTime, type: getDatabaseType(url) // 新增：显示数据库类型 }); return container; } function constructAPIStatus(key, url, uptimeData) { const container = templatize("apiStatusTemplate", { title: key, url: url, color: getColor(uptimeData[0]), status: getStatusText(getColor(uptimeData[0])), upTime: uptimeData.upTime, avgLatency: getAverageLatency(key) // 新增：显示平均响应时间 }); return container; }

2. 添加HTML模板

在 index.html 的模板部分添加新的模板：

<!-- 数据库状态模板 --> <div id="databaseStatusTemplate" class="databaseStatusContainer"> <div class="statusHeader"> <h6 class="statusTitle">$title (Database)&nbsp;</h6> <div class="$color statusHeadline">$status</div> </div> <div class="statusSubtitle"> <div class="sectionUrl">Type: $type</div> <div class="statusUptime">$upTime uptime</div> </div> </div> <!-- API状态模板 --> <div id="apiStatusTemplate" class="apiStatusContainer"> <div class="statusHeader"> <h6 class="statusTitle">$title (API)&nbsp;</h6> <div class="$color statusHeadline">$status</div> </div> <div class="statusSubtitle"> <div class="sectionUrl"><a href="$url">$url</a></div> <div class="statusUptime">$upTime uptime | Avg: $avgLatency</div> </div> </div>

配置GitHub Actions自动监控

1. 扩展工作流配置

编辑 .github/workflows/health-check.yml，添加数据库连接和必要的工具：

name: Health Check on: schedule: - cron: '0 * * * *' # 每小时运行一次 workflow_dispatch: # 允许手动触发 jobs: health-check: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup database clients run: | sudo apt-get update sudo apt-get install -y postgresql-client mysql-client redis-tools - name: Run health checks run: | chmod +x health-check.sh chmod +x database-check.sh ./health-check.sh - name: Commit and push if changes run: | git config --local user.email "action@github.com" git config --local user.name "GitHub Action" git add -A git diff --quiet && git diff --staged --quiet || git commit -m "Update health check logs" git push

高级监控功能扩展

1. 添加性能指标收集

创建metrics-collector.js来收集和展示性能指标：

// 性能指标收集器 class MetricsCollector { constructor() { this.metrics = { databases: {}, apis: {}, services: {} }; } // 收集数据库连接池状态 collectDatabaseMetrics(dbName, connectionCount, queryCount) { this.metrics.databases[dbName] = { connections: connectionCount, queries: queryCount, timestamp: new Date().toISOString() }; } // 收集API响应时间分布 collectAPIMetrics(apiName, responseTimes) { const avg = responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length; const p95 = this.calculatePercentile(responseTimes, 95); this.metrics.apis[apiName] = { average: avg.toFixed(2), p95: p95.toFixed(2), samples: responseTimes.length }; } }

2. 创建监控仪表板

扩展状态页面，添加性能仪表板：

<!-- 在index.html中添加性能仪表板 --> <div class="metricsDashboard"> <h3>📊 性能指标</h3> <div class="metricsGrid"> <div class="metricCard"> <h4>数据库连接</h4> <div id="databaseMetrics"></div> </div> <div class="metricCard"> <h4>API响应时间</h4> <div id="apiMetrics"></div> </div> <div class="metricCard"> <h4>系统资源</h4> <div id="systemMetrics"></div> </div> </div> </div>

最佳实践和优化建议

1. 安全性考虑 🔒

使用环境变量存储数据库凭据：不要在配置文件中硬编码密码
限制监控频率：避免对生产系统造成压力
实施访问控制：确保监控端点有适当的认证

2. 性能优化 ⚡

批量检查：将相似的服务分组检查，减少网络开销
缓存结果：对于不频繁变化的服务，可以缓存检查结果
异步检查：使用并行检查提高效率

3. 告警集成 🚨

集成Slack/Teams通知：当服务出现问题时发送即时通知
设置阈值告警：当响应时间超过特定阈值时触发告警
分级告警：根据问题严重程度使用不同的告警级别

总结

通过扩展Statsig Status Page，你可以构建一个功能完整的系统监控平台。从简单的HTTP监控扩展到数据库连接检查、API响应时间监控、性能指标收集，这个轻量级工具可以满足大多数中小型项目的监控需求。

记住，监控系统的价值在于提前发现问题，而不是事后分析。通过本文介绍的方法，你可以：

实时监控数据库健康状态🗄️
跟踪API性能和可用性📈
构建全面的系统健康视图👁️
实施智能告警机制🔔

开始扩展你的Statsig Status Page，打造一个真正适合你项目需求的监控系统吧！🎯

提示：所有扩展代码都可以在项目的 logs/ 目录中找到历史记录，方便追踪问题发生的时间点和模式。

【免费下载链接】statuspageA simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.项目地址: https://gitcode.com/gh_mirrors/sta/statuspage

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考