前言背景：实话实说才能做的更好

1.业务间的监控策略层次不齐：前后端针对监控专项的标准规范缺失，导致有的业务监控完善，其他业务缺复用不了

2.集团前端监控平台能力不完善，导致告警噪音大，一线研发无法通过自行思考抽丝剥茧，做有效合理监控，久而久之，监控告警熟视无睹

3.平台大盘能力、日志能力和告警能力均欠佳，与业界差距较大，无法对已有的监控策略形成体系的工具价值

4.前端监控无法形成独立的技术价值，无体系的建设，容易让前端监控变为后端监控的重复建设。挖掘前端监控的价值点，比如用户体验、设备兼容性以及缺失等等，都应该成为前端监控独有的价值点

一、前端监控的业务价值定位

1.1 链路定位

下图的 1、2、3、4、5 都是会导致前端故障的通用核心链路监测点：





1.3 监控分类

监控大类

· 被动采集：性能监控、资源可用性、资源加载耗时、运行时异常（兼容性等）；

· 主动上报：非正常业务响应监控、业务可用性监控、渲染故障监控；

详细分类



资源可用性（通用监控 SDK 自动采集）

1.页面资源：（HTML）加载超时/慢访问

2.逻辑资源：（JS）加载超时/慢访问

3.样式资源：（CSS）加载超时/慢访问

4.图片资源：加载超时/慢访问

5.接口资源：超时/慢访问（前端默认 3s）

6.上游依赖库/三方 SDK/接口服务



故障定位（自定义上报）

目标：及时发现，快速止损。

1.客诉故障：快速根据用户信息获取会话级用户端请求/响应日志，协作后端故障定位快速止损

2.上线故障：新功能/页面/组件上线后，边界情况发生，前后端进行双线告警，被动发现及时止损

3.业务入参异常



渲染故障（自定义上报）

1.元素（组件、楼层）缺失

2.元素错乱：建设中……

3.元素露出非法值（价格为 0、负数等非法金额）

4.元素渲染失败

5.元素渲染兼容性故障

6.白屏监控：建设中…



业务不可用（自定义上报）

1.系统异常（接口不可用）

2.上游服务不可用

3.接口超时

4.身份不匹配

5.无可用数据（券无品等）

6.活动太火爆

7.其他业务属性



二、监控策略 &告警策略

2.1 监控标的

•重点监控对象：常驻元素重点监控、大流量页面/组件重点监控、高价值组件重点监控、易资损组件/页面重点监控；

•日常巡检对象：低活组件/页面、组件按计划按需求迭代上线监控点；

2.2 高效上报

一次上报，配套多个监控点。

利用平台的正则模糊匹配的能力，对 message 字段内容监控配置，可以对灵活的对一个接口的下游全链路进行监控。

2.3 有效监控（调优）

•技术方案设置监控策略，找出业务边界 case；

•线上日志定期排查，丰富/调优告警和监控；

•定期清理僵尸监控和告警；

三、监控告警标准化

3.1 接口服务故障标准化

接口基础响应体结构{    "success": false | true, //通讯码：接口是否正常返回    "errorCode": "xxxxxx", //错误码：标识接口响应数据异常原因与错误类别信息    "data": {}, //业务数据：业务具体详细数据，前端使用data的数据进行具体内容的显示    "message": "xx接口不可用",  //异常日志：简短文字说明接口异常返回具体信息与可能原因。    ……其他字段……}

3.2 渲染层故障标准化

3.3 上报动作标准化

monitor.reportError({    type: 'interface_error',    message: 'xx服务异常，故障信息：' + functionID + '...'    data: {        request: {...},        response: {...}    }})

monitor.reportError({    type: 'render_error',    message: '元素缺失_xxx_楼层',    data: {        element: 元素信息,        funtionID: xxx,        request: {...},        response: {...}        pin: xxx    }})

四、故障应急 SOP（精准发现故障问题）

4.1 SOP





1、监控点采集上报

2、设置多条符合业务故障的告警

3、平台收到告警

4、点开告警查看故障曲线

5、根据告警信息查看具体日志、基本定位故障问题

6、提报监控平台、建立联动群进行故障进一步定位

7、报备产研潜在客诉风险、资损风险及系统功能风险

8、制定产研应急止损方案，转成技术方案

9、bugfix 提测跟进上线，观察告警故障曲线

10、应急响应及业务群周知故障已解决

11、跟进故障平台、及时复盘