一、背景

愛番番大前端整體面臨以下問題：

1. Metrics：URL的RED指標(biāo)不全。URL不全，ERROR缺失，Duration分位置缺失。整體實(shí)效性為T+1。無法及時(shí)感知問題。只對(duì)基本頁面級(jí)別的讀操作進(jìn)行了監(jiān)控。
2. Tracing：Trace無法全端串聯(lián)，直接影響具體case的跟進(jìn)。無前端Trace。
3. Logging：無Log。Sentry的Error信息目前僅PC接入。且未進(jìn)行實(shí)際使用；和trace無法打通。
4. 報(bào)警：對(duì)于異常數(shù)據(jù)缺乏有效報(bào)警。

二、目標(biāo)

1. Metrics目標(biāo)：RED指標(biāo)，自定義Metrics
2. Tracing目標(biāo)：全端單動(dòng)作追蹤
3. Logging目標(biāo)：Error級(jí)別Log具備。單Traceid和Log能夠?qū)崿F(xiàn)串聯(lián)

2.1 核心目標(biāo)

1. 頁面級(jí)別性能監(jiān)控。可包含條件檢索和正常頁面刷新。包含RED
2. 能夠基于用戶id進(jìn)行任意一次全端調(diào)用鏈追蹤。
3. 可分析一個(gè)操作流任意階段之間的統(tǒng)計(jì)性耗時(shí)。
4. 準(zhǔn)實(shí)時(shí)呈現(xiàn)。數(shù)據(jù)延時(shí)小于5min。
5. 可區(qū)分來源、地域、設(shè)備等核心信息
6. 寫請(qǐng)求性能監(jiān)控。包含新建、編輯、刪除。包含RED

2.2 目標(biāo)抽象

1. 帶TraceID（可被覆蓋）和TimeStamp信息的Event
2. 全端Trace下的調(diào)用鏈。本質(zhì)上是前端的Event鏈路 + 服務(wù)端的Span鏈路串聯(lián)而成。
3. 考慮到批量傳輸性能。采用AggrEvent進(jìn)行聚合發(fā)送。

三、 名詞解釋

1. RED：RED方法是Weave Cloud在基于Google的“4個(gè)黃金指標(biāo)”的原則下結(jié)合Prometheus以及Kubernetes容器實(shí)踐，細(xì)化和總結(jié)的方法論，特別適合于云原生應(yīng)用以及微服務(wù)架構(gòu)應(yīng)用的監(jiān)控和度量。主要關(guān)注以下三種關(guān)鍵指標(biāo)：
   1. 　　(請(qǐng)求)速率：服務(wù)每秒接收的請(qǐng)求數(shù)。
   2. 　　(請(qǐng)求)錯(cuò)誤：每秒失敗的請(qǐng)求數(shù)。
   3. 　　(請(qǐng)求)耗時(shí)：每個(gè)請(qǐng)求的耗時(shí)。
2. optid（operate-id）：一個(gè)操作唯一對(duì)應(yīng)的一個(gè)id。比如一次刷新，一次修改。
3. reqid（request-id）：?jiǎn)未握?qǐng)求唯一對(duì)應(yīng)的一個(gè)id。如果重試，則reqid設(shè)置為新id。一個(gè)optid可能會(huì)存在多個(gè)reqid。
4. tid（tracing-id）：貫穿服務(wù)端端調(diào)用鏈的唯一id。
5. optType: 某一類操作定義。比如一次刷新，一次修改。

四、目標(biāo)拆解

4.1 Why

4.1.1 為什么要做大前端監(jiān)控體系？

4.1.2 收益是什么？

1. Metrics：對(duì)各端各頁面各場(chǎng)景RED指標(biāo)準(zhǔn)實(shí)時(shí)分析、可視化呈現(xiàn)，打破前端監(jiān)控黑盒
2. Tracing：打通前后端調(diào)用鏈，能夠針對(duì)任意case進(jìn)行前后端鏈路分析，讓前端性能優(yōu)化有的放矢
3. Logging：對(duì)各端運(yùn)行時(shí)錯(cuò)誤進(jìn)行實(shí)時(shí)監(jiān)控報(bào)警，能通過日志最大程度還原用戶現(xiàn)場(chǎng)并定位問題，提升前端頁面穩(wěn)定性

4.2 What

4.2.1 監(jiān)控什么端？

4.2.2 監(jiān)控什么方向

(1) 數(shù)據(jù)監(jiān)控

• PV/UV:PV(page view)，即頁面瀏覽量或點(diǎn)擊量。UV:指訪問某個(gè)站點(diǎn)或點(diǎn)擊某條新聞的不同IP地址的人數(shù)
• 用戶在每一個(gè)頁面的停留時(shí)間
• 用戶通過什么入口來訪問該網(wǎng)頁
• 用戶在相應(yīng)的頁面中觸發(fā)的行為

(2) 性能監(jiān)控

• 不同用戶，不同機(jī)型和不同系統(tǒng)下的首屏加載時(shí)間
• 白屏?xí)r間
• http等請(qǐng)求的響應(yīng)時(shí)間
• 靜態(tài)資源整體下載時(shí)間
• 頁面渲染時(shí)間
• 頁面交互動(dòng)畫完成時(shí)間

(3) 異常監(jiān)控

4.2.3 監(jiān)控什么內(nèi)容

四、方案調(diào)研

自建or接入其他平臺(tái)？

1. ONEAPM https://www.oneapm.com/solutions/qualityacceptance.html
2. 聽云 https://www.tingyun.com/
3. 性能魔方 http://www.mmtrix.com/imonitor
4. 監(jiān)控寶 https://www.jiankongbao.com/

1. 收費(fèi)
2. 無法與部門現(xiàn)有后端APM體系打通
3. 無法滿足特定case分析需求

結(jié)論：復(fù)用神策埋點(diǎn)SDK存儲(chǔ)，上報(bào)能力及通路，進(jìn)行SDK二次封裝；自建日志服務(wù)及展示系統(tǒng)。

五、方案設(shè)計(jì) （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生成規(guī)則，暫定為 router+orgId+timestamp+random ？ 進(jìn)行加密處理
2. requestId，由網(wǎng)絡(luò)庫統(tǒng)一生成，生成方式參考BFE_logId生成規(guī)則，在請(qǐng)求header中攜帶，用于skywalking tid進(jìn)行映射
3. operateId，需要使用者明確【操作】起止時(shí)機(jī)，并手動(dòng)調(diào)用SKD API。
   
   1) 在使用方初始化【操作】時(shí)，調(diào)用 SDK.initOpt('操作名')，該方法返回本次操作operateName，用于后續(xù)傳遞；
   1) 在使用方明確【操作】開始時(shí)，調(diào)用SDK.startOpt('operateName')，SDK生成唯一operateId，存于localStorage.pageGuid..operateName.operateId(示例)；
   2) 為了保證上下文獨(dú)立性，在該操作涉及到的請(qǐng)求options中配置{operateName: 'operateName'}，網(wǎng)絡(luò)庫在發(fā)送請(qǐng)求時(shí)，主動(dòng)獲取operateId并攜帶，取值方式為：localStorage.pageGuid..operateName.operateId || ‘’；
   3) 在使用方明確【操作】結(jié)束時(shí)，需調(diào)用SDK.endOperate（操作名）；SDK將進(jìn)行該次操作相關(guān)操作時(shí)間，頁面渲染時(shí)長等統(tǒng)計(jì)，存儲(chǔ)在localStorage.pageGuid.bucket中，通過上報(bào)策略時(shí)機(jī)進(jìn)行統(tǒng)一上報(bào)。

2、上報(bào)

• 頁面加載和重新刷新
• 頁面切換路由

• 存儲(chǔ)于localStorage.pageGuid.bucket中；
• bucket中數(shù)量超過閾值，觸發(fā)上報(bào)；
• 頁面卸載unload，觸發(fā)上報(bào)；

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.上報(bào)流程

 

3.3.流程時(shí)序圖

 4.服務(wù)端采集及分析

搭建OAP服務(wù)，進(jìn)行數(shù)據(jù)清洗加工及展示