如何扩展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/statuspageStatsig Status Page是一个基于GitHub Pages和Actions的轻量级状态监控工具它通过简单的配置就能监控网站和API的健康状态。本文将为你展示如何扩展这个开源状态页添加数据库监控和API检测功能打造一个全面的系统健康监控平台。为什么需要扩展Statsig Status PageStatsig 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 21 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 21 if [ $? -eq 0 ]; then echo success else echo failed fi } # MongoDB数据库检查 check_mongodb() { mongo $1 --eval db.stats() /dev/null 21 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:passlocalhost:3306/analytics redis://localhost:6379) for (( index0; 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 21 if [ $? -eq 0 ]; then resultsuccess else resultfailed 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_apihttps://api.example.com/users/health payment_apihttps://api.example.com/payments/status auth_apihttps://api.example.com/auth/ping notification_apihttps://api.example.com/notifications/health2. 扩展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 resultsuccess # 记录响应时间 echo $(date %Y-%m-%d %H:%M), success, $latency_ms ms logs/${key}_latency.log else resultfailed 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 iddatabaseStatusTemplate classdatabaseStatusContainer div classstatusHeader h6 classstatusTitle$title (Database)nbsp;/h6 div class$color statusHeadline$status/div /div div classstatusSubtitle div classsectionUrlType: $type/div div classstatusUptime$upTime uptime/div /div /div !-- API状态模板 -- div idapiStatusTemplate classapiStatusContainer div classstatusHeader h6 classstatusTitle$title (API)nbsp;/h6 div class$color statusHeadline$status/div /div div classstatusSubtitle div classsectionUrla href$url$url/a/div div classstatusUptime$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/checkoutv2 - 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 actiongithub.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 classmetricsDashboard h3 性能指标/h3 div classmetricsGrid div classmetricCard h4数据库连接/h4 div iddatabaseMetrics/div /div div classmetricCard h4API响应时间/h4 div idapiMetrics/div /div div classmetricCard h4系统资源/h4 div idsystemMetrics/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），仅供参考