管理平台监控调研

一、背景

对于管理平台未提供前端监控，无法主动发现报错、页面首屏加载时长、用户浏览器环境等影响用户体验的问题。因此，有必要实现一套前端监控体系方案，旨在提升平台质量和降低排查问题成本。

二、目标

针对目前各管理平台项目没有提供监控体系功能，将制定一套前端监控体系 SDK，帮助平台开发者快速接入前端监控功能而无需手动实现。

结合目前技术选型和业务情况，前端监控 SDK 需要支持的能力包括以下几点：

异常监控

  • API 请求异常监控
  • JS 异常监控
  • 静态资源加载异常监控
  • Promise 未捕获异常监控

性能监控

  • 页面加载性能
    1. TTFE：首包响应时间
    2. First Paint：首屏渲染时间
    3. DOM Ready：DOM 就位时间
    4. First Interactive：首次可交互时间

埋点上报

  • 支持自动采集异常信息
  • 支持自动采集性能信息
  • 支持数据埋点
    • 浏览器环境
    • 页面访问 pv、uv
    • 手动埋点定制化数据

报警响应

  • 支持报警规则配置
  • 支持 sea talk 通知
  • 支持邮件通知业务 owner

三、方案

这里我们主要讨论三个方案

  1. 开源方案 — sentry
  2. 自研 SDK

开源方案 — sentry

Sentry 是第三方前端监控开源方案

优点

  • 免费
  • Sentry 可直接使用也可自行搭建
  • 兼容性强，基本不受语言限制，搭建一套系统可用于多个项目

缺点

  • 定制化程度低，普遍靠使用已有 api
  • 后期维护报警很麻烦

异常监控

Sentry 只需要注册后，就可以自动采集异常信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Sentry.init({
  // Sentry 项目的 dsn，可从项目设置中获取
  dsn: "https://xxxxxx@161.xxx.xxx.xxx:9000/2",
  // 初始参数配置内容
  integrations: [new Integrations.BrowserTracing()],
  // 触发异常后发送给 Sentry 的概率
  tracesSampleRate: 1.0,
  // 控制应捕获的面包屑(行为栈)的总量
  maxBreadcrumbs: 20,
  // 规定上下文数据结构的深度，默认为 3
  normalizeDepth: 100,
  // 版本信息
  release: "common@1.0.0",
  // 环境信息
  environment: process.env.NODE_ENV,
  // 钩子函数，在每次发送 event 前触发
  beforeSend(event) {
    // 网页应用刷新后设置的变量会消失，所以我选择在 beforeSend 触发时插入用户信息
    event.user = {
      userNick: "xxx",
    };
    return event;
  },
});

性能监控

Sentry 除了异常监控之外，还集成了强大的性能监控。通过监视应用程序的性能，可以准确定位线上服务问题。

1
new` `TracingIntegrations.BrowserTracing(), ``// 性能监控

埋点上报

Sentry 可以配置上报规则，由 SDK 自行上报

1
2
3
4
5
6
7
8
9

Sentry.captureMessage("Something went fundamentally wrong", {
  contexts: {
    text: {
      hahah: 22,
    },
  },
  level: Sentry.Severity.Info,
});

报警响应

Sentry 可以为每个项目创建各种警报规则，并让 Sentry 知道应用程序中发生错误时通知的时间(when)、方式(how)和对象(whom)。 警报规则(Alert rules)由条件(Conditions)和操作(Actions)组成，它们在满足相关条件时执行。

自研 SDK

自研 SDK 是通过自主研发前端监控 SDK 的一种方案

优点

其定制化程度很高

缺点

但是耗费研发资源

异常监控

主要通过拦截器、全局注册 onerror 监听事件、自定义 handler 以及手动 try-catch 实现异常采集

性能监控

主要通过 W3C 提供的 performance api 采集性能相关数据

埋点上报

主要通过 Navigator.sendBeacon() 进行数据上报，降级方案采用 new Img() 以及 http post 方案

报警响应

对接告警平台进行告警设置，主要有普罗米修斯、Grafana 平台等

参考