从零开始搭建异常监控从零开始搭建异常监控在现代的软件开发和运维过程中，系统的稳定性和高可用性一直是技术团队最为关注的问

前言

在现代的软件开发和运维过程中，系统的稳定性和高可用性一直是技术团队最为关注的问题之一。而异常监控作为保障系统健康、快速响应问题的重要手段，已经成为每个系统不可或缺的一部分。通过异常监控，开发者可以实时捕捉到系统中的潜在问题，及时排查并修复，避免系统故障对业务带来较大的影响。

工作之余，参考了几篇优秀的文章，学会了从零搭建平台，想和大家分享下心得体会。

功能梳理

在搭建前希望平台可以支持以下功能点，并且希望可以由用户自定义各种功能点是否开启。

捕获异常
上报异常
异常监控录屏

针对上述罗列出来的功能点，下面开始一步步实现吧～🚗🚗🚗

功能实现

下面的实现会将异常捕获及上报等逻辑包装在一个class中。

自定义配置项

  private config: MonitorConfig;  // 配置项
  private errorQueue: ErrorData[];  // 错误队列
  private errorCache: Set<string>;  // 错误指纹缓存
  private recorder: any;  // 录屏器实例
  private screenEvents: any[] = [];  // 录屏事件列表
  private timer?: NodeJS.Timeout;  // 定时器

初始化

初始化主要包括：异常监听、录屏、将本地错误加入上报队列、页面变化监听

private initialize() {
    this.initErrorListeners();  // 初始化错误监听
    this.initScreenRecording();  // 初始化录屏
    this.loadFromLocalStorage();  // 从本地加载错误队列
    this.initPageHideHandler();  // 监听页面可见性变化
}