[[203212]]

背景

監(jiān)控是提高故障處理能力和保障服務(wù)質(zhì)量必需的一環(huán)，它需要負(fù)責(zé)的內(nèi)容包括：及時(shí)上報(bào)錯(cuò)誤、收集有效信息、提供故障排查依據(jù)。

• 及時(shí)上報(bào)錯(cuò)誤：發(fā)生線上問題后，經(jīng)由運(yùn)營或者產(chǎn)品反饋到開發(fā)人員，其中流轉(zhuǎn)過程可能是幾分鐘甚至幾十分鐘，這段時(shí)間可能直接導(dǎo)致公司的經(jīng)濟(jì)損失。如果有一個(gè)監(jiān)控系統(tǒng)，在線上出現(xiàn)問題時(shí)，監(jiān)控系統(tǒng)能夠***時(shí)間報(bào)警，并且通知到開發(fā)人員，那開發(fā)人員就可以***時(shí)間修復(fù)上線，使公司損失最小化。
• 收集有效信息：特別是移動(dòng)時(shí)代，定位一個(gè)問題時(shí)，需要很多用戶信息(如用戶手機(jī)版本、網(wǎng)絡(luò)情況、操作流程等)。如果沒有監(jiān)控?cái)?shù)據(jù)，往往只能靠猜，又或是來回找產(chǎn)品運(yùn)營甚至出現(xiàn)問題的用戶去溝通定位，會(huì)花費(fèi)大量的時(shí)間。假如監(jiān)控系統(tǒng)里記錄了設(shè)備信息、錯(cuò)誤發(fā)生時(shí)的場(chǎng)景信息和用戶的操作流程，我們就可以直接根據(jù)這些信息進(jìn)行問題定位，在最短時(shí)間內(nèi)完成故障修復(fù)，減小問題的影響面。
• 提供故障排查依據(jù)：監(jiān)控前端SDK所上報(bào)的錯(cuò)誤信息和其它的記錄信息，其最終目的都是作為我們排查故障的依據(jù)，為我們保障服務(wù)提供堅(jiān)實(shí)的依靠。

監(jiān)控分類

綜上所述，我們的監(jiān)控平臺(tái)強(qiáng)調(diào)實(shí)時(shí)性和全面性。為了保證實(shí)時(shí)性，錯(cuò)誤發(fā)生時(shí)就嘗試上報(bào)，并且在監(jiān)控面板可以實(shí)時(shí)的展現(xiàn)出來，以及有及時(shí)的告警機(jī)制。全面性是指收集的信息全面，包括用戶信息、環(huán)境信息和錯(cuò)誤信息等，因此監(jiān)控平臺(tái)包括記錄型監(jiān)控和捕捉型監(jiān)控。

• 記錄型監(jiān)控

頁面訪問記錄：用戶訪問了哪些頁面。

資源加載記錄：頁面中加載了哪些資源。

用戶行為記錄：用戶在頁面上做了哪些操作，目前我們只記錄用戶的點(diǎn)擊行為。

接口調(diào)用相關(guān)記錄：頁面調(diào)用了哪些接口。

• 捕捉型監(jiān)控

DNS劫持：頁面是否被劫持。

資源加載錯(cuò)誤：哪些資源加載失敗了，為了捕獲跨域JavaScript的錯(cuò)誤，需要在相應(yīng)資源標(biāo)簽上添加crossorigin屬性。

頁面錯(cuò)誤：頁面渲染過程中出現(xiàn)的錯(cuò)誤。

內(nèi)部邏輯錯(cuò)誤：用戶特定操作出現(xiàn)的錯(cuò)誤，通過用戶行為定位。

接口錯(cuò)誤：調(diào)用接口失敗。

場(chǎng)景還原法

當(dāng)捕捉型監(jiān)控捕捉到錯(cuò)誤后，我們根據(jù)錯(cuò)誤信息定位用戶，再通過記錄型監(jiān)控還原該錯(cuò)誤發(fā)生的場(chǎng)景，從而復(fù)現(xiàn)問題并及時(shí)定位解決。這個(gè)過程我們稱之為場(chǎng)景還原法。

本監(jiān)控平臺(tái)就是通過收集監(jiān)控?cái)?shù)據(jù)，使用場(chǎng)景還原法來解決問題。它將支撐系統(tǒng)處理過的所有記錄和錯(cuò)誤按照時(shí)間順序展示。通過場(chǎng)景還原的列表，我們可以還原出指定用戶在瀏覽頁面過程中發(fā)生的所有事情及其先后順序，從而判斷問題發(fā)生的時(shí)機(jī)和環(huán)境。

假設(shè)以下場(chǎng)景：

• PM：BD反饋用戶在購物車刷不出來啦!
• RD：什么?我試試!我這里可以看到的呀
• PM：商戶反饋，店里有的用戶可以有的用戶不行
• RD：別急，告訴我shopId和打不開的用戶的賬號(hào)，我去監(jiān)控平臺(tái)上看一下
• PM：xxx
• RD在監(jiān)控面板上使用場(chǎng)景還原功能，調(diào)出了該用戶的所有信息記錄。發(fā)現(xiàn)該用戶是從菜品詳情頁進(jìn)入的購物車，而再查看正常的用戶都不是從這個(gè)入口進(jìn)的，定位到是菜品詳情頁跳購物車的部分有問題，并立刻進(jìn)行了修復(fù)

在以上這種用戶可能有多種操作的場(chǎng)景中，場(chǎng)景還原法可以針對(duì)特定用戶，還原其完整的操作路徑和頁面上發(fā)生的所有事情，幫助復(fù)現(xiàn)問題。

另外，一些非必現(xiàn)的問題，常常是由于不同機(jī)型或環(huán)境引起的，也可以在場(chǎng)景還原中復(fù)現(xiàn)問題的發(fā)生環(huán)境予以判斷。

本文主要介紹點(diǎn)餐終端技術(shù)組監(jiān)控平臺(tái)HUNT的前端SDK的實(shí)踐經(jīng)驗(yàn)，仍有許多需要改進(jìn)的地方，歡迎大家拍磚，幫助我們改進(jìn)。

整體設(shè)計(jì)

如圖所示，我們的監(jiān)控平臺(tái)HUNT，分為前端SDK、Web層支撐系統(tǒng)和監(jiān)控面板三大部分。

• 監(jiān)控前端SDK：收集用戶端錯(cuò)誤和相關(guān)信息，并進(jìn)行上報(bào)
• 監(jiān)控Web層支撐系統(tǒng)：處理上報(bào)的監(jiān)控信息
• 監(jiān)控面板：提供實(shí)時(shí)查看上報(bào)信息的面板，方便監(jiān)控?cái)?shù)據(jù)的便捷使用

前端SDK運(yùn)行在前端頁面中，收集監(jiān)控?cái)?shù)據(jù)上報(bào)到支撐系統(tǒng)里，作為監(jiān)控面板上查詢的數(shù)據(jù)源。

就前端SDK來說，可以分為數(shù)據(jù)模塊、數(shù)據(jù)處理模塊、上報(bào)模塊三大部分，其中數(shù)據(jù)模塊包括各具體監(jiān)控?cái)?shù)據(jù)模塊和環(huán)境數(shù)據(jù)模塊：

• 數(shù)據(jù)模塊

各監(jiān)控模塊：獲取需要上報(bào)的具體內(nèi)容信息(EventData或ErrorData)

DNS劫持檢測(cè)

資源完整性檢查

資源加載錯(cuò)誤

API監(jiān)控

全局錯(cuò)誤

用戶交互

自定義上報(bào)

環(huán)境模塊：獲取環(huán)境數(shù)據(jù)

• 數(shù)據(jù)處理模塊：將環(huán)境數(shù)據(jù)和各內(nèi)容數(shù)據(jù)，處理成接口對(duì)應(yīng)的格式，并返回標(biāo)準(zhǔn)格式數(shù)據(jù)。
• 上報(bào)模塊：從環(huán)境模塊獲取環(huán)境數(shù)據(jù)，再和內(nèi)容數(shù)據(jù)一起根據(jù)不同監(jiān)控類型分發(fā)到對(duì)應(yīng)的數(shù)據(jù)處理模塊。獲取標(biāo)準(zhǔn)數(shù)據(jù)后發(fā)送到Node層。

上報(bào)模塊先查看本地緩存數(shù)據(jù)，將本地?cái)?shù)據(jù)和新產(chǎn)生的數(shù)據(jù)一起上報(bào)，若上報(bào)失敗則存入LocalStorage。

詳細(xì)設(shè)計(jì)

SDK里采用單例模式，包括各監(jiān)控模塊、環(huán)境模塊和上報(bào)模塊。

每個(gè)具體監(jiān)控模塊獲取上報(bào)模塊實(shí)例進(jìn)行上報(bào)，上報(bào)模塊內(nèi)部保證同時(shí)只會(huì)有一個(gè)上報(bào)請(qǐng)求。

事件的監(jiān)聽都在捕獲階段進(jìn)行，防止因?yàn)槭录芭荼蛔柚苟z漏信息。

環(huán)境模塊

環(huán)境模塊收集以下環(huán)境信息：項(xiàng)目配置信息、Web環(huán)境數(shù)據(jù)、JsBridge環(huán)境數(shù)據(jù)。

其它的一些諸如UA、ISP等Web層可以獲取的信息由Web層獲取。

該模塊暴露init和getEnv方法。

• init接收用戶配置的環(huán)境參數(shù)
• getEnv更新頁面URL，再返回當(dāng)前env對(duì)象freeze的一個(gè)副本
  

上報(bào)模塊

采取單請(qǐng)求上報(bào)的方式，每個(gè)用戶同時(shí)只會(huì)有一條上報(bào)請(qǐng)求，每次將當(dāng)前記錄到的監(jiān)控信息列表一起上報(bào)，成功后再繼續(xù)上報(bào)。

上報(bào)結(jié)束之前的新上報(bào)記錄都存在Localstorage，收到成功消息后刪除已上報(bào)數(shù)據(jù)，繼續(xù)上報(bào)，不成功的記錄保留在Localstorage。此處需注意對(duì)Localstorage存儲(chǔ)的上限做好控制。

在當(dāng)前沒有數(shù)據(jù)正在上報(bào)的情況下觸發(fā)上報(bào)，嘗試將當(dāng)前Localstorage的數(shù)據(jù)和新數(shù)據(jù)全部上報(bào)，若上報(bào)記錄過多，則分條發(fā)送。全部發(fā)送完或上報(bào)失敗，本次上報(bào)結(jié)束。

各具體監(jiān)控模塊

DNS劫持

HTTPS頁面被劫持后頁面資源無法獲取，劫持者無利可圖的情況下會(huì)降低劫持的動(dòng)力。

若仍被劫持，前端資源未到達(dá)本地，也無法完成上報(bào)，只能從網(wǎng)絡(luò)層去監(jiān)控。

由于美團(tuán)點(diǎn)評(píng)平臺(tái)已經(jīng)全量切了HTTPS，因此該模塊不在本監(jiān)控系統(tǒng)中。

不過之前本團(tuán)隊(duì)做過對(duì)HTTP域下的劫持檢測(cè)，其檢測(cè)思路為請(qǐng)求Node層指定域名下的樣本HTML或JavaScript資源，對(duì)比返回結(jié)果是否符合預(yù)期。

資源完整性檢查

資源完整性檢查模塊的任務(wù)是記錄頁面加載了哪些資源，并進(jìn)行上報(bào)。

當(dāng)我們排查問題時(shí)，可以查看當(dāng)前頁面已經(jīng)加載成功了哪些資源及其加載順序，排除因?yàn)槟承┵Y源沒有加載或者加載順序不當(dāng)而引起錯(cuò)誤的情況。

資源加載完整性檢查的上報(bào)時(shí)機(jī)分四類，每次將開始監(jiān)聽到觸發(fā)上報(bào)之間所有記錄到的已加載資源一起上報(bào)，減少上報(bào)請(qǐng)求數(shù)：

1. onload：window.onload時(shí)觸發(fā)
2. onload_timeout: onload超時(shí)(5秒)時(shí)觸發(fā)
3. async：window.onload后一定延時(shí)(5秒)觸發(fā)，上報(bào)后停止監(jiān)聽
4. hash_change：onhashchange開始監(jiān)聽，一定延時(shí)(5秒)觸發(fā)上報(bào)，上報(bào)后停止監(jiān)聽

內(nèi)存中維護(hù)一個(gè)已加載資源的數(shù)組，每次上報(bào)后刪除已上報(bào)的資源記錄。

資源加載錯(cuò)誤監(jiān)控

Window上error事件代理，過濾Window本身的error。

根據(jù)標(biāo)簽類型判斷資源類型，src或href為資源地址。

為了捕獲跨域JavaScript的錯(cuò)誤，需要在相應(yīng)資源標(biāo)簽上添加crossorigin屬性。

API錯(cuò)誤監(jiān)控

同樣采用XMLHttpRequest加hook方式實(shí)現(xiàn)。

open時(shí)記錄接口URL，send后根據(jù)status判斷，接口調(diào)用失敗時(shí)進(jìn)行上報(bào)。

XMLHttpRequest.prototype.open = function open(method, url, bool) { 
    monitor.originXHR.open.apply(this, [method, url, bool]); 
    // get something... 
    // this.ajaxUrl = url; 
} 
 
XMLHttpRequest.prototype.send = function send(_data) { 
    const self = this; 
 
    this.addEventListener('readystatechange', () => { 
        if (self.readyState === 4) { 
            if (self.status !== 200 && self.status !== 304 && this.ajaxUrl !== REPORT_URL) { // filter urls 
                // report error info 
                // ... 
                // monitor.reporter.report(dataTypes.API_ERROR, error); 
            } 
        } 
    }, false); 
 
    monitor.originXHR.send.apply(this, [_data]); 
}; 

過濾掉SDK本身的上報(bào)地址(防止上報(bào)失敗引起循環(huán)上報(bào))和一些其它需要忽略的接口地址。

注意，接口訪問URL時(shí)可能是一個(gè)相對(duì)路徑，建議補(bǔ)全協(xié)議和domain。

全局錯(cuò)誤監(jiān)控

監(jiān)聽Window上的error事件，過濾事件代理的error。

用戶交互監(jiān)控

監(jiān)聽Window上捕獲階段的click事件，記錄點(diǎn)擊相關(guān)數(shù)據(jù)。

業(yè)務(wù)代碼中可以為比較關(guān)注的元素添加data屬性，每次點(diǎn)擊將會(huì)上報(bào)被點(diǎn)擊元素的指定屬性、附加信息和DOMPath幫助定位該元素。

記錄用戶交互信息可以明確問題發(fā)生時(shí)，該場(chǎng)景下用戶的具體操作路徑，結(jié)合環(huán)境數(shù)據(jù)、資源加載記錄和錯(cuò)誤數(shù)據(jù)，整個(gè)問題場(chǎng)景就一目了然了。

接入方式

SDK的接入方式分為以下兩種：

1.先加載SDK

優(yōu)點(diǎn)：可以記錄頁面加載完成前的情況，加載的資源，以及發(fā)生的錯(cuò)誤。

缺點(diǎn)：影響頁面加載速度，直接拷貝在head中，對(duì)業(yè)務(wù)接入不友好。

2.后加載SDK

優(yōu)點(diǎn)：不影響頁面性能。

缺點(diǎn)：只能監(jiān)控加載成功的頁面，但我們需要關(guān)心頁面加載失敗的場(chǎng)景。

為了滿足功能需要，當(dāng)前監(jiān)控平臺(tái)v1的引入方式是將壓縮后的SDK代碼直接引入到被監(jiān)控頁面的head中，并由業(yè)務(wù)代碼初始化配置項(xiàng)目名稱等。該步操作可以借助webpack的插件來幫助完成，減輕業(yè)務(wù)組接入的復(fù)雜度。

后續(xù)改進(jìn)方向考慮采用：核心基礎(chǔ)庫+loaders/plugins 的方式，將必須先加載的SDK代碼引入在head中，其余代碼等頁面加載完成后再異步添加。

結(jié)語

HUNT系統(tǒng)上線后，已經(jīng)完全覆蓋點(diǎn)餐終端組的活躍Web項(xiàng)目，進(jìn)行監(jiān)控?cái)?shù)據(jù)的多維度上報(bào)。接下來工作重點(diǎn)是對(duì)收集到的數(shù)據(jù)進(jìn)行有效的分析和利用。

目前大部分現(xiàn)有的監(jiān)控工具只關(guān)注捕捉型監(jiān)控這部分，記錄型監(jiān)控是缺失的。相應(yīng)的，以記錄型監(jiān)控作為支撐的場(chǎng)景還原功能也是無法做到的。這類型的監(jiān)控系統(tǒng)只能做到發(fā)現(xiàn)錯(cuò)誤，但是對(duì)于錯(cuò)誤定位幫助甚微。

接入本監(jiān)控系統(tǒng)后，不但能在監(jiān)控面板上實(shí)時(shí)的看到多種錯(cuò)誤信息，還能根據(jù)錯(cuò)誤發(fā)生的上下文，包括頁面加載的過程，其中用戶做了哪些操作，訪問了哪些API等，按時(shí)間順序排列來完成場(chǎng)景還原。再結(jié)合該錯(cuò)誤發(fā)生的環(huán)境數(shù)據(jù)，復(fù)現(xiàn)問題和定位問題變的非常容易。

當(dāng)收到故障反饋后，對(duì)一些偶發(fā)的問題，或者用戶操作復(fù)雜的問題等，可以直接通過監(jiān)控面板了解情況，省去了大量的溝通成本，我們的故障反饋速度和能力也有極大的提高。

以上就是我們終端團(tuán)隊(duì)監(jiān)控平臺(tái)前端SDK部分的實(shí)踐分享，歡迎大家批評(píng)指正，有好的建議也希望能提出來幫助我們改進(jìn)。我們后續(xù)將不斷優(yōu)化，也將繼續(xù)與大家保持討論。耐心看到這里的讀者，表示十二萬分的感謝!

原文鏈接：https://tech.meituan.com/hunt-sdk-practice.html

【本文為51CTO專欄機(jī)構(gòu)“美團(tuán)點(diǎn)評(píng)技術(shù)團(tuán)隊(duì)”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過微信公眾號(hào)聯(lián)系機(jī)構(gòu)獲取授權(quán)】

戳這里，看該作者更多好文