一、背景

爱番番大前端整体面临以下问题：

1. Metrics：URL的RED指标不全。URL不全，ERROR缺失，Duration分位置缺失。整体实效性为T+1。无法及时感知问题。只对基本页面级别的读操作进行了监控。
2. Tracing：Trace无法全端串联，直接影响具体case的跟进。无前端Trace。
3. Logging：无Log。Sentry的Error信息目前仅PC接入。且未进行实际使用；和trace无法打通。
4. 报警：对于异常数据缺乏有效报警。

二、目标

1. Metrics目标：RED指标，自定义Metrics
2. Tracing目标：全端单动作追踪
3. Logging目标：Error级别Log具备。单Traceid和Log能够实现串联

2.1 核心目标

1. 页面级别性能监控。可包含条件检索和正常页面刷新。包含RED
2. 能够基于用户id进行任意一次全端调用链追踪。
3. 可分析一个操作流任意阶段之间的统计性耗时。
4. 准实时呈现。数据延时小于5min。
5. 可区分来源、地域、设备等核心信息
6. 写请求性能监控。包含新建、编辑、删除。包含RED

2.2 目标抽象

1. 带TraceID（可被覆盖）和TimeStamp信息的Event
2. 全端Trace下的调用链。本质上是前端的Event链路 + 服务端的Span链路串联而成。
3. 考虑到批量传输性能。采用AggrEvent进行聚合发送。

三、 名词解释

1. RED：RED方法是Weave Cloud在基于Google的“4个黄金指标”的原则下结合Prometheus以及Kubernetes容器实践，细化和总结的方法论，特别适合于云原生应用以及微服务架构应用的监控和度量。主要关注以下三种关键指标：
   1. 　　(请求)速率：服务每秒接收的请求数。
   2. 　　(请求)错误：每秒失败的请求数。
   3. 　　(请求)耗时：每个请求的耗时。
2. optid（operate-id）：一个操作唯一对应的一个id。比如一次刷新，一次修改。
3. reqid（request-id）：单次请求唯一对应的一个id。如果重试，则reqid设置为新id。一个optid可能会存在多个reqid。
4. tid（tracing-id）：贯穿服务端端调用链的唯一id。
5. optType: 某一类操作定义。比如一次刷新，一次修改。

四、目标拆解

4.1 Why

4.1.1 为什么要做大前端监控体系？

4.1.2 收益是什么？

1. Metrics：对各端各页面各场景RED指标准实时分析、可视化呈现，打破前端监控黑盒
2. Tracing：打通前后端调用链，能够针对任意case进行前后端链路分析，让前端性能优化有的放矢
3. Logging：对各端运行时错误进行实时监控报警，能通过日志最大程度还原用户现场并定位问题，提升前端页面稳定性

4.2 What

4.2.1 监控什么端？

4.2.2 监控什么方向

(1) 数据监控

• PV/UV:PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
• 用户在每一个页面的停留时间
• 用户通过什么入口来访问该网页
• 用户在相应的页面中触发的行为

(2) 性能监控

• 不同用户，不同机型和不同系统下的首屏加载时间
• 白屏时间
• http等请求的响应时间
• 静态资源整体下载时间
• 页面渲染时间
• 页面交互动画完成时间

(3) 异常监控

4.2.3 监控什么内容

四、方案调研

自建or接入其他平台？

1. ONEAPM https://www.oneapm.com/solutions/qualityacceptance.html
2. 听云 https://www.tingyun.com/
3. 性能魔方 http://www.mmtrix.com/imonitor
4. 监控宝 https://www.jiankongbao.com/

1. 收费
2. 无法与部门现有后端APM体系打通
3. 无法满足特定case分析需求

结论：复用神策埋点SDK存储，上报能力及通路，进行SDK二次封装；自建日志服务及展示系统。

五、方案设计 （web）

1、采集

 

Core Web Vitals（https://web.dev/vitals/）

 

interface Metric {
  // The name of the metric (in acronym form).
  name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';

  // The current value of the metric.
  value: number;

  // The delta between the current value and the last-reported value.
  // On the first report, `delta` and `value` will always be the same.
  delta: number;

  // A unique ID representing this particular metric that's specific to the
  // current page. This ID can be used by an analytics tool to dedupe
  // multiple values sent for the same metric, or to group multiple deltas
  // together and calculate a total.
  id: string;

  // Any performance entries used in the metric value calculation.
  // Note, entries will be added to the array as the value changes.
  entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];
}

1. pageGuid，重新定义pageGuid生成规则，暂定为 router+orgId+timestamp+random ？ 进行加密处理
2. requestId，由网络库统一生成，生成方式参考BFE_logId生成规则，在请求header中携带，用于skywalking tid进行映射
3. operateId，需要使用者明确【操作】起止时机，并手动调用SKD API。
   
   1) 在使用方初始化【操作】时，调用 SDK.initOpt('操作名')，该方法返回本次操作operateName，用于后续传递；
   1) 在使用方明确【操作】开始时，调用SDK.startOpt('operateName')，SDK生成唯一operateId，存于localStorage.pageGuid..operateName.operateId(示例)；
   2) 为了保证上下文独立性，在该操作涉及到的请求options中配置{operateName: 'operateName'}，网络库在发送请求时，主动获取operateId并携带，取值方式为：localStorage.pageGuid..operateName.operateId || ‘’；
   3) 在使用方明确【操作】结束时，需调用SDK.endOperate（操作名）；SDK将进行该次操作相关操作时间，页面渲染时长等统计，存储在localStorage.pageGuid.bucket中，通过上报策略时机进行统一上报。

2、上报

• 页面加载和重新刷新
• 页面切换路由

• 存储于 localStorage.pageGuid.bucket中；
• bucket中数量超过阈值，触发上报；
• 页面卸载unload，触发上报；

function sendBeacon(url,data){
  //判断支不支持navigator.sendBeacon
  let headers = {
    type: 'application/x-www-form-urlencoded'
  };
  let blob = new Blob([JSON.stringify(data)], headers);
  navigator.sendBeacon(url,blob);
}

function imgReport(url, data) {
   if (!url || !data) {
       return;
   }
   let image = document.createElement('img');
   let items = [];
   items = JSON.Parse(data);
   let name = 'img_' + (+new Date());
   image.onload = image.onerror = function () {
      
   };
   let newUrl = url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&');

   image.src = newUrl;
}

function xmlLoadData(url,data) {
  var client = new XMLHttpRequest();
  client.open("POST", url,false);
  client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  client.send(JSON.stringify(data));
}

function dealWithUrl(url,appId){
      let times = performanceInfo(appId);
      let items = decoupling(times);
      let urlLength = (url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&')).length;
      if(urlLength<2083){
        imgReport(url,times);
      }else if(navigator.sendBeacon){
        sendBeacon(url,times);
      }else{
        xmlLoadData(url,times);
      }
 }

3.2.上报流程

 

3.3.流程时序图

 4.服务端采集及分析

搭建OAP服务，进行数据清洗加工及展示