科技资讯

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

24 4分钟阅读 2026-05-28

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

CheckCle 是一个为现代基础设施设计的开源、实时全栈监控平台。它提供从服务器、应用到SSL证书的深度洞察和可操作数据，集成了强大的事故管理、维护计划和多语言支持，帮助DevOps团队确保系统的极致性能和稳定性。

👉 在线演示: demo.checkcle.io
用户: admin@example.com | 密码: Admin123456

✨ 核心功能特性

全面的监控能力：支持监控服务器、HTTP/HTTPS、Ping、DNS、TCP服务、Docker容器及SSL证书的到期时间。
实时事故管理：提供完整的事故生命周期管理，包括创建、分配、状态跟踪（调查中、已确认、已解决）和PDF报告导出。
灵活的通知系统：集成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
```
开发服务器默认运行在 http://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<void> {
  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<LanguageContextType | undefined>(undefined);

export const LanguageProvider = ({ children }: { children: ReactNode }) => {
  const [language, setLanguage] = useState<Language>("en");

  const t = useCallback((key: string, moduleOrVars?: any, vars?: any): string => {
    // 复杂的翻译查找逻辑，支持变量插值
    // ... 实现细节
    return translatedText;
  }, [language]);

  return (
    <LanguageContext.Provider value={{ language, setLanguage, t }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => {
  const context = useContext(LanguageContext);
  if (!context) throw new Error("useLanguage must be used within a LanguageProvider");
  return context;
};

5P3BeVPo4UvnTOITnr8yKlUAl1BlgZH+d3LTVsbk1CM=