CheckCle开源全栈监控与事件管理平台

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

安装步骤

1. 克隆仓库

   git clone https://github.com/operacle/checkcle.git cd checkcle

2. 安装依赖

   用你习惯的包管理器安装即可。

   npm install # 或 yarn install # 或 pnpm install

3. 配置环境 (可选)

   项目使用 PocketBase 作为后端。你需要确保已设置并运行了 PocketBase 实例，并在前端项目中配置好 API 地址。通常，配置文件位于 src/lib/pocketbase.ts 或相关的环境变量文件中。

4. 启动开发服务器

   npm run dev # 或 yarn dev # 或 pnpm dev

   开发服务器默认运行在 http://localhost:8990。

使用说明

基础监控流程

1. 添加服务：登录后进入服务管理页面，添加你要监控的 HTTP、Ping 或 TCP 服务，设定检查间隔和通知渠道。
2. 查看仪表盘：主仪表盘会展示所有服务的实时状态、响应时间和历史正常运行时间图表。视觉上很直观。
3. 配置 SSL 监控：进入 SSL 证书管理页面，添加你的域名，设置到期告警阈值（比如到期前 30 天发出警告，前 7 天进入紧急状态）。系统会自动执行监控并触发通知。

事件处理示例

当服务宕机时，系统会自动创建一个事件（Incident）。你可以在事件详情页进行以下操作：

1. 分配事件：将事件分配给相关的团队成员，明确责任人。
2. 更新状态：随着调查进展，将状态从“正在调查”更新为“已确认”；问题解决后标记为“已解决”。整个过程有迹可循。
3. 生成报告：为事件生成专业的 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;
};