京东前端系统可观测性建设指南

一、可观测性概述

1.1 什么是系统可观测性

可观测性是一种系统属性，通过收集和分析系统的运行状态以及业务状态，以可理解的形式展示，供我们对系统运行情况做出合理判断。

1.2 可观测性的价值

• 系统宕机时能第一时间得到通知
• 业务逻辑进入else或catch时能收到通知
• 监控新功能上线后的用户访问情况
• 避免因上线问题导致的紧急回滚
• 发现问题时可在线切换至老版本
• 还原用户操作轨迹查找问题
• 降低生产事故发生率

二、观测指标体系

2.1 系统指标

• 服务器运行状态：
  • CPU占用率
  • 内存占用率
  • 硬盘使用率
  • Nginx启停状态

2.2 应用指标

• 白屏（因系统错误导致）
• 资源加载错误
• 请求400/500错误
• 脚本错误导致交互阻塞
• 首屏渲染时间
• 页面完全加载耗时
• 接口耗时

2.3 业务指标（以信贷产品为例）

• 通用部分：

  • 业务异常(999999)
  • 接口请求网络超时
  • 接口请求错误
  • 未处理的异常码

• 准入流程：

  • 跳转实名失败
  • 补充信息提交失败
  • 查询地址列表异常
  • 获取合同列表失败
  • 合同预览失败
  • 准入开通结果页面未在60秒内跳转至首页
  • 资质审核页面停留时长超过5分钟

• 融资流程：

  • 融资申请提交失败
  • 融资鉴权失败

• 还款流程：

  • 还款计划试算失败
  • 还款失败

三、观测实施方法

3.1 系统指标观测

• JDOS 3.0智能监控系统(Brolly)：

  • 监控CPU、内存、硬盘使用率
  • 访问地址：http://brolly.jdos.jd.com/app/

• JEN监控：

  • 监控Nginx状态及服务器状态
  • 访问地址：http://jen.jd.com/alarmConfig

3.2 应用指标观测（使用SGM工具）

3.2.1 白屏告警

window.addEventListener('load', function() {
  if(document.querySelector('#app').children.length < 1) {
    window.__sgm__.custom({
      type: 'error',
      code: '系统白屏'
    });
  }
});

3.2.2 资源告警

• 监控CSS、JS、图片等静态资源加载错误
• 动态src的img标签初次渲染可能有误报，可使用v-if避免

3.2.3 API告警

• 监控接口400/500错误
• 设置20%错误率批量报警数值

3.2.4 JS错误告警

监控以下常见JS错误类型：

• SyntaxError（语法错误）
• TypeError（类型错误）
• ReferenceError（引用错误）
• RangeError（范围错误）
• URIError（URL解析错误）
• InternalError（内部错误）

3.2.5 性能告警

• 首屏渲染时间
• 页面完全加载耗时

3.3 业务指标观测

• 自定义监控告警：

  • 页面提交失败
  • 函数进入catch逻辑
  • 关键业务流程节点

• 埋点上报需包含信息：

  • 用户信息（用户标识）
  • 报错接口的出入参
  • 自定义上报埋点的上下文信息

• 页面路由跳转失败监控：

  • 使用定时器方法上报
  • 页面销毁时清除定时器

四、阈值优化策略

4.1 确定点位有效性

• 通过本地模拟错误进行告警测试
• 确保所有点位可以正常上报

4.2 阈值设定合理性验证

1. 将所有阈值调整至最低
2. 查看报警情况
3. 分析报警信息合理性：
   • 如果是需关注的生产问题，保持最低阈值
   • 如果是个例或无需关注的问题，逐渐调高阈值至合适频率

4.3 各类监控阈值设置原则

• API监控：设置20%错误率批量报警
• 资源监控：以页面静态资源总数为准
• 自定义监控：遵循逐步优化原则

4.4 应用监控告警阈值计算

以日均PV为10000的应用为例：

• 每60秒PV≈7
• 每个PV资源数≈20
• 接口调用数量≈3
• 每秒总量：140次资源请求，21个接口调用
• 以20%错误率上报为标准设置阈值

五、报警信息触达

5.1 邮件报警（必选）

• 配置报警邮件规则
• 通过标题关键字过滤：
  • H5_RESOURCE：资源错误
  • H5_CUSTOM_CODE：自定义监控
  • H5_JS_ERROR：脚本错误

5.2 咚咚报警（必选）

• 比邮件提醒更及时
• 信息被看到的时效性更高

5.3 外呼报警（可选）

• 时效性最高的报警方式
• 适用于关键场景和批量错误

六、生产切量监控

6.1 切量功能实现

1. 业务系统实现切量功能
2. 通过配置中心动态调整新老版本流量比例

6.2 监控实施

1. 在新老版本分支流程中添加自定义埋点
2. 监控用户走向新老流程的数量
3. 通过SGM查看用户轨迹：
   • 判断用户是否在新流程中完成全部操作
   • 识别用户卡在哪一步
4. 根据监控数据决定：
   • 是否需要回滚
   • 是否需要修复上线
   • 调整切量比例

七、最佳实践总结

1. 全面覆盖：从系统、应用到业务层面建立完整监控体系
2. 合理阈值：通过逐步优化方法设置科学报警阈值
3. 多级报警：邮件+咚咚+外呼的多层次报警机制
4. 切量保障：新功能上线配合切量监控，降低风险
5. 持续优化：定期review监控点位和阈值，保持有效性

通过这套可观测性方案，可以显著提升前端系统的稳定性和问题响应速度，降低生产事故发生率。