CheckCle: 开源全栈监控与事件管理平台
现代基础设施的监控，从来不是一件简单的事。服务器、应用、网络、证书……任何一个环节出问题，都可能引发连锁反应。CheckCle这个开源项目，正是为了解决这个痛点而来。它定位为一个实时、全栈的监控平台，核心价值在于将深度洞察与可操作的事件管理整合在一起。简单说，它不仅要告诉你“出事了”，还要帮你把“事”理顺、解决、归档。
如果你想先感受一下，可以直接访问在线演示：demo.checkcle.io，使用 admin@example.com 作为用户名，密码是 Admin123456。
核心功能特性
CheckCle的功能覆盖了从基础设施到应用层的监控需求，并且将事件管理、通知、维护计划等周边能力都整合到了一起。具体来看，它主要提供了以下几大能力：
- 全面的监控范围：不止于服务器基础指标。它支持监控HTTP/HTTPS服务、Ping、DNS解析、TCP端口、Docker容器，甚至SSL证书的到期时间。监控触角足够广，适合一平台统管全局。
- 事件全生命周期管理：从事件自动创建、分配，到状态跟踪（调查中、已确认、已解决），再到最终的PDF报告导出，形成了一条完整的处理链路。这对于故障复盘和审计很实用。
- 灵活的通知系统：告警信息不能只是内部广播。CheckCle集成了Telegram、Slack、Discord、Webhook等多种渠道，确保告警能送达正确的人手中。
- 维护计划与窗口：系统升级或计划内停机期间，完全可以提前创建维护窗口，避免误告警。同时还能向订阅者发送通知，做到主动沟通。
- 国际化与本地化：内置了对英语、中文、日语、德语等多语言的支持。对于跨国团队或出海业务来说，这是一个很贴心的设计。
- 直观的仪表盘：提供深色和浅色两种主题，系统健康状态、服务响应时间、历史数据，通过仪表盘可以一目了然。
- 多用户与角色管理：支持基本的用户认证、角色划分（管理员与超级管理员），以及细粒度的权限控制。团队协作的分工边界，在这里可以清晰地设定。
安装指南
CheckCle 是一个基于 TypeScript + React + PocketBase 的全栈应用。对开发者来说，上手成本不算高。以下是快速启动开发环境的基本步骤。
系统要求
- Node.js (v18 或更高版本)
- npm 或 yarn 或 pnpm
- Git
安装步骤
克隆仓库
git clone https://github.com/operacle/checkcle.git cd checkcle安装依赖
用你习惯的包管理器安装即可。
npm install # 或 yarn install # 或 pnpm install配置环境 (可选)
项目使用 PocketBase 作为后端。你需要确保已设置并运行了 PocketBase 实例，并在前端项目中配置好 API 地址。通常，配置文件位于
src/lib/pocketbase.ts或相关的环境变量文件中。启动开发服务器
npm run dev # 或 yarn dev # 或 pnpm dev开发服务器默认运行在
https://localhost:8990。
使用说明
基础监控流程
- 添加服务：登录后进入服务管理页面，添加你要监控的 HTTP、Ping 或 TCP 服务，设定检查间隔和通知渠道。
- 查看仪表盘：主仪表盘会展示所有服务的实时状态、响应时间和历史正常运行时间图表。视觉上很直观。
- 配置 SSL 监控：进入 SSL 证书管理页面，添加你的域名，设置到期告警阈值（比如到期前 30 天发出警告，前 7 天进入紧急状态）。系统会自动执行监控并触发通知。
事件处理示例
当服务宕机时，系统会自动创建一个事件（Incident）。你可以在事件详情页进行以下操作：
- 分配事件：将事件分配给相关的团队成员，明确责任人。
- 更新状态：随着调查进展，将状态从“正在调查”更新为“已确认”；问题解决后标记为“已解决”。整个过程有迹可循。
- 生成报告：为事件生成专业的 PDF 报告，用于事后分析和归档。从“发现”到“解决”再到“复盘”，链路完整。
核心代码示例
这部分简单展示几个核心模块的代码片段，方便你快速理解项目的工程结构。
事件服务核心模块 (src/services/incident/incidentService.ts)
该文件整合了事件的所有核心操作，是事件管理的业务门面。
// 从项目第52份代码中提取
import { CreateIncidentInput, IncidentItem, UpdateIncidentInput } from './types';
import { createIncident, updateIncident, updateIncidentStatus, deleteIncident } from './incidentOperations';
import { getAllIncidents, getIncidentById } from './incidentFetch';
import { generateIncidentPDF } from './incidentPdfService';
export const incidentService = {
// 获取事件数据
getAllIncidents,
getIncidentById,
// 事件的增删改查操作
createIncident,
updateIncident,
updateIncidentStatus,
deleteIncident,
// PDF报告导出
generateIncidentPDF,
};
export default incidentService;
服务监控调度器 (src/services/monitoring/startMonitoring.ts)
负责启动对特定服务的监控任务，体现了轮询间隔的配置与管理逻辑。
// 从项目第82份代码中提取
import { pb } from '@/lib/pocketbase';
import { monitoringIntervals } from '../monitoringIntervals';
export async function startMonitoringService(serviceId: string): Promise {
try {
if (monitoringIntervals.has(serviceId)) {
return;
}
const service = await pb.collection('services').getOne(serviceId);
if (service.status === "paused") {
return;
}
// 更新数据库中的服务状态
await pb.collection('services').update(serviceId, { status: "up" });
// 根据配置的检查间隔设置定时任务
const intervalMs = Math.max((service.heartbeat_interval || 60) * 1000, 60000);
const intervalId = window.setInterval(() => {
// 实际的检查任务由后端Go微服务处理，此处仅做状态跟踪
}, intervalMs);
monitoringIntervals.set(serviceId, intervalId);
} catch (error) {
console.error("Error starting service monitoring:", error);
}
}
多语言支持上下文 (src/contexts/LanguageContext.tsx)
展示了项目如何通过 React Context API 实现动态国际化。
// 从项目第16份代码中提取
import React, { createContext, useContext, useState, ReactNode, useCallback } from "react";
import { translations, Language, TranslationModule, TranslationKey } from "@/translations";
type LanguageContextType = {
language: Language;
setLanguage: (language: Language) => void;
t: (key: string, ...args: any[]) => string;
};
const LanguageContext = createContext(undefined);
export const LanguageProvider = ({ children }: { children: ReactNode }) => {
const [language, setLanguage] = useState("en");
const t = useCallback((key: string, moduleOrVars?: any, vars?: any): string => {
// 复杂的翻译查找逻辑，支持变量插值
// ... 实现细节
return translatedText;
}, [language]);
return (
{children}
);
};
export const useLanguage = () => {
const context = useContext(LanguageContext);
if (!context) throw new Error("useLanguage must be used within a LanguageProvider");
return context;
};
