如大家所知，搭建監控系統，主要涉及幾大指標，流量數據、錯誤數據、接口數據、性能數據等；這些數據統計出來以後，除了他們本身的作用外，怎麼利用這幾大類型數據來幫我們排查問題呢，就引出了我們今天所要講到的話題了。
「用戶細查」顧名思義，就是把用戶所有的行爲記錄統計出來，幫助開發者來定位，或者復現用戶所產生的問題。如果一套監控系統沒有用戶細查的能力，光能看問題，卻不能解決問題，那也就是失去了監控系統的靈魂了。
一、如何貫穿用戶的整個行爲鏈路？
這個很好理解，貫穿用戶的整個行爲鏈路，就需要一個唯一的key來標識這個用戶。最簡單的就是使用UserId了，每個用戶我都給他傳入一個userId就可以了串聯起來了。
但是這種方式有一個很容易被忽略的弊端：如果這個項目獲取userId速度比較慢，或者壓根不會有userId，那麼用戶的行爲記錄是不是會出現缺失呢？或者根本就無法關聯呢？那我們該如何規避這種問題呢？
webfunny是如何做到的呢？爲了規避以上提出的幾點問題，webfunny通過設置內置id，來對所有的用戶進行區分。然後再通過userId，將所有的內置id關聯在一起，這樣一來，只要在用戶的生命週期過程中，傳入一次userId，我們就可以關聯上用戶所有的行爲記錄了。內置ID生成規則如下：
function getCustomerKey() {
var customerKey = this.getUuid();
var monitorCustomerKey = utils.getWfCookie("monitorCustomerKey");
if (!monitorCustomerKey) {
var extraTime = new Date().getTime() + 120 * 30 * 24 * 3600 * 1000 // cookie 過期時間爲10年
utils.setWfCookie("monitorCustomerKey", customerKey, extraTime)
monitorCustomerKey = customerKey
}
return monitorCustomerKey;
}
二、利用多個維度來準確定位到具體的用戶
剛纔第一點提到了，用戶的userId獲取速度可能比較慢，或者根本不會有，那我們該怎麼去把用戶的行爲記錄查出來呢。 其實，我們可以通過用戶行爲產生的時間，用戶的ip地址，地理位置以及訪問設備等信息的佐證，來找到具體的用戶，如圖：
用戶細查-用戶列表
通過其他維度的信息，我們可以鎖定一些用戶，即使在沒有userId的情況下，我們依然可以通過內置ID查到用戶的行爲記錄，幫助我們排查問題。
nodeJs獲取ip地址的方式如下：
const clientIpString = req.headers['x-forwarded-for'] ||
req.connection.remoteAddress ||
req.socket.remoteAddress ||
req.connection.socket.remoteAddress;其中如何通過IP地址查詢地理位置，大家可以使用node-ip2region這個庫進行查詢，挺好好用的。
三、用戶細查具體要分析哪些數據，更容易幫助我們定位問題
- 用戶基本信息
既然是查詢用戶的行爲記錄，那麼用戶的基本信息肯定是必不可少。正常情況下，我們需要知道用戶的標籤、使用設備型號、系統版本、IP地址、所在地區、瀏覽器useragent等；如圖：
用戶基本信息
- 頁面平均加載時間
這裏可能有人會問了，既然是用戶行爲記錄查詢，爲什麼又需要查看頁面平均加載時間呢？如大家所知，造成一個用戶在我們的應用上不可用的情況，有很多種原因，其中網絡速度是不可以忽略的因素。所以通過頁面的平均加載時間我們可以判斷用戶當時是否處於一個弱網環境，來增加我們定位問題的效率。如圖：
頁面平均加載時間
頁面平均加載時間的計算方式如下：
var timingObj = performance && performance.timing;
var loadPage = timingObj.loadEventEnd - timingObj.navigationStart;- 接口耗時正態分佈
接口耗時同樣能夠反饋出用戶當時的網絡狀態，同時他也能反饋出服務端接口的狀態。比如，頁面平均耗時表現良好，接口耗時表現差，則能反映出，當時的後端服務狀態不是很好。如圖：
接口耗時正態分佈圖
- 完整的用戶行爲記錄
以上是用戶行爲中的基本信息，接下來要說的是用戶的完整行爲鏈路，通過將頁面訪問、接口請求、代碼報錯、自定義行爲等，按照時間先後順序串聯起來，可以達到復現用戶錯誤的目的。如圖：
用戶行爲記錄
其中，接口請求記錄，除了會記錄接口耗時，還需要記錄接口的返回值，這樣能夠更加精準的定位數據問題。如圖：
接口返回值
總結
利用各種手段，將用戶的行爲記錄下來，復現用戶當時的問題便不再是那麼困難的事情。這對開發者來說，無疑是大大提高了解決問題的效率。webfunny致力於解決前端監控的問題，提高前端的性能。