騰訊開發工程師：前端異常監控到底怎麼做

快速疊代是騰訊産品的生命力

穩定性則是網際網路産品的主基調

本期直播課淺談我們在前端異常的探索和實踐

讓我們對異常時刻警惕

| 導語 從事Web前端同學對此肯定深有體會，代碼發出去之後，猶如脫缰的野馬，運作在萬千的客戶終端上，等到産品和背景回報問題到我們這邊，很多時候定位問題隻能靠猜，尤其是一些偶發誘因，因為根本不知道使用者是如何操作的，真實環境遇到的問題通常是很多随機因素疊加的形成的，是以很難回放使用者的操作來還原現場找到原因。

現在的痛點

1、使用者回報問題後，有時候雖然我們查詢了js報錯日志和cgi調用，但是沒有發現任何錯誤，我們根本不知道使用者的終端上到底發生了什麼。

2、目前使用的js錯誤上報系統，看到上報有一定的延時，作為一款金融産品，分秒必争，這短暫的延時可能是緻命的，我們必須快速的找到原因并予以修複。

經過一段時間經驗的累積，我們想到，如果我們有一個同背景一樣詳實的可分類和檢索的代碼運作日志，無疑将會提供巨大的幫助。

我們的探索

一個健壯的日志系統大緻包含日志記錄、日志上傳和日志分析三個主要部分，在這次的實踐中，我們對這三方面都有所探索。

由于前端受到很多限制，不能同APP一樣可以在檔案沙箱記憶體取檔案，是以如何持久化的存儲日志成了一個問題。目前H5也支援若幹種本地存儲方案，cookie, localStorage, indexedDB和websql等，其他的由插件提供的能力不在考慮的範圍之類，如flash，移動端的可用性會是一個很大的問題。

不用想，應該沒有人會考慮吧, Cookie的原則應該是盡可能的精簡避免浪費帶寬。

localStorage大家應該都很熟悉，一個簡單的鍵值存儲系統，接口簡單實用，相容性也非常的棒。但是考慮到目前很多項目都有使用localStorage來做緩存，而localStorage本身是有大小限制的。根據日志記錄的細粒度，很可能會産生較多的日志内容，如果也記錄在localStorage裡，可能會有超出容量限制的風險。是以，localStorage應該作為一個備用的持久化方案。

websql作為一項W3C标準，目前已經被廢棄，但是各大桌面浏覽器和移動端浏覽器都有很好的實作這個接口，相容性問題不大，底層基本上都是sqlite（正是因為這樣，作為一個web标準是不可接受的）。因而日志作為大量的結構化資料，應用場景非常的适合。經測試，在iOS上容量最大支援50MB，不過如果使用系統自帶的safari，超過5MB時，會主動提醒使用者是否要增加資料庫的大小，不是很友好，不過微信裡到是不會。想想5MB獨占作為日志存儲基本上夠用了，處理好過舊日志的清理工作即可。是以我們覺得websql應當作為目前階段主要的解決方案。

IndexedDB 是一種可以讓你在使用者的浏覽器内持久化存儲資料的方法，作為下一代的用戶端結構化資料持久存儲方案，足夠的強大和高效，目前在各大浏覽器中也有很好的支援，是未來用來替換websql的方案，應當在日後的疊代中主要支援。

時間戳，這個無需多說，時間戳是日志的基本要義。

多會話，一個前端工程中可能同時存在多個獨立的子產品，這些子產品很可能會同時互不幹擾的記錄各自的日志。如果每個子產品都在自己的會話下記錄日志，就不會互相幹擾，并且提供了另一個次元的過濾能力。

錯誤等級，如 <code>info</code>, <code>warning</code>, <code>error</code>, <code>critical</code> 等，以提供最為基本的過濾能力。

描述符，如 <code>verify.request.start</code>, <code>submit.prevented</code> 等等。盡可能的以便使用者一眼就可以知曉日志的大緻内容，也友善代碼中日志記錄代碼的可讀性，也更易于在代碼中搜尋。

資料和詳情，有時候一個簡單的描述符并不能說明問題，可能需要記錄更多的描述性文本或者資料來分析問題。

由于我們并不需要實時的擷取來自用戶端的大量日志，是以日志是存儲在使用者用戶端本地的，我們需要背景配合開發一個用于接收用戶端通過網絡上傳的日志内容并存儲起來的接口。同時可能要考慮一些安全性問題，如引入token機制和驗證登入态等等。目前我們騰訊微證券采用的方案為：使用者在微信公衆号中發送消息“問題回報”（直接使用日志上報等關鍵詞可能會引起使用者的反感），背景會傳回日志上傳頁面位址連結，使用者點選連結進入後，在擷取登入态後自動上報日志。

由于Logline上傳的日志格式符合标準，具有良好的可閱讀性，是以我們可以在某種程度上直接使用指令行工具或者編輯器來閱讀。但是對指令行不熟悉的使用者使用可能仍然有困難，是以有必要使用Web技術棧搭建一個易于使用并且視覺良好的工具。我們希望這套工具可以不依賴于後端，既可以部署在伺服器端，也可以當做本地網頁直接輕按兩下打開，也可以被簡單的包一層外殼而當做桌面APP來使用。

作為日志，承載的最主要的内容便是大量的純文字，在調研了一些方案後，我們認為H5規範中的FileReader.readAsText可以很好的做到這一點，結合拖放事件，我們便可以很大緻建構出一個不錯的方案：使用者将一個或者多個日志檔案拖放至網頁中，即可對這些日志批量分析和檢索。

基于以上工作，我們騰訊微證券項目組推出了自己的解決方案：<code>We.Logline</code>，一個輕量，實用和用戶端級的前端日志記錄工具。