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

快速迭代是騰訊產品的生命力

穩定性則是互聯網產品的主基調

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

讓咱們對異常時刻警戒

| 導語 從事Web前端同窗對此確定深有體會，代碼發出去以後，猶如脫繮的野馬，運行在萬千的客戶終端上，等到產品和後臺反饋問題到咱們這邊，不少時候定位問題只能靠猜，尤爲是一些偶發誘因，由於根本不知道用戶是如何操做的，真實環境遇到的問題一般是不少隨機因素疊加的造成的，所以很難回放用戶的操做來還原現場找到緣由。

如今的痛點

一、用戶反饋問題後，有時候雖然咱們查詢了js報錯日誌和cgi調用，可是沒有發現任何錯誤，咱們根本不知道用戶的終端上到底發生了什麼。

二、目前使用的js錯誤上報系統，看到上報有必定的延時，做爲一款金融產品，分秒必爭，這短暫的延時多是致命的，咱們必須快速的找到緣由並予以修復。

通過一段時間經驗的累積，咱們想到，若是咱們有一個同後臺同樣詳實的可分類和檢索的代碼運行日誌，無疑將會提供巨大的幫助。

咱們的探索

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

一、日誌到底存哪裏？

因爲前端受到不少限制，不能同APP同樣能夠在文件沙箱內存取文件，所以如何持久化的存儲日誌成了一個問題。目前H5也支持若干種本地存儲方案，cookie, localStorage, indexedDB和websql等，其餘的由插件提供的能力不在考慮的範圍之類，如flash，移動端的可用性會是一個很大的問題。

• Cookie

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

• localStorage

  localStorage你們應該都很熟悉，一個簡單的鍵值存儲系統，接口簡單實用，兼容性也很是的棒。可是考慮到目前不少項目都有使用localStorage來作緩存，而localStorage自己是有大小限制的。根據日誌記錄的細粒度，極可能會產生較多的日誌內容，若是也記錄在localStorage裏，可能會有超出容量限制的風險。所以，localStorage應該做爲一個備用的持久化方案。

• websql

  websql做爲一項W3C標準，目前已經被廢棄，可是各大桌面瀏覽器和移動端瀏覽器都有很好的實現這個接口，兼容性問題不大，底層基本上都是sqlite（正是由於這樣，做爲一個web標準是不可接受的）。於是日誌做爲大量的結構化數據，應用場景很是的適合。經測試，在iOS上容量最大支持50MB，不過若是使用系統自帶的safari，超過5MB時，會主動提醒用戶是否要增長數據庫的大小，不是很友好，不過微信裏到是不會。想一想5MB獨佔做爲日誌存儲基本上夠用了，處理好過舊日誌的清理工做便可。所以咱們以爲websql應看成爲當前階段主要的解決方案。

• indexedDB

  IndexedDB 是一種可讓你在用戶的瀏覽器內持久化存儲數據的方法，做爲下一代的客戶端結構化數據持久存儲方案，足夠的強大和高效，目前在各大瀏覽器中也有很好的支持，是將來用來替換websql的方案，應當在往後的迭代中主要支持。

二、什麼樣的日誌格式堪稱優雅？

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

• 多會話，一個前端工程中可能同時存在多個獨立的模塊，這些模塊極可能會同時互不干擾的記錄各自的日誌。若是每一個模塊都在本身的會話下記錄日誌，就不會相互干擾，而且提供了另外一個維度的過濾能力。

• 錯誤等級，如 info, warning, error, critical 等，以提供最爲基本的過濾能力。

• 描述符，如 verify.request.start, submit.prevented 等等。儘量的以便用戶一眼就能夠知曉日誌的大體內容，也方便代碼中日誌記錄代碼的可讀性，也更易於在代碼中搜索。

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

三、日誌如何獲取？

因爲咱們並不須要實時的獲取來自客戶端的大量日誌，所以日誌是存儲在用戶客戶端本地的，咱們須要後臺配合開發一個用於接收客戶端經過網絡上傳的日誌內容並存儲起來的接口。同時可能要考慮一些安全性問題，如引入token機制和驗證登陸態等等。目前咱們騰訊微證券採用的方案爲：用戶在微信公衆號中發送消息「問題反饋」（直接使用日誌上報等關鍵詞可能會引發用戶的反感），後臺會返回日誌上傳頁面地址連接，用戶點擊連接進入後，在獲取登陸態後自動上報日誌。

四、日誌分析如何分析？

因爲Logline上傳的日誌格式符合標準，具備良好的可閱讀性，所以咱們能夠在某種程度上直接使用命令行工具或者編輯器來閱讀。可是對命令行不熟悉的用戶使用可能仍然有困難，所以有必要使用Web技術棧搭建一個易於使用而且視覺良好的工具。咱們但願這套工具能夠不依賴於後端，既能夠部署在服務器端，也能夠當作本地網頁直接雙擊打開，也能夠被簡單的包一層外殼而當作桌面APP來使用。

做爲日誌，承載的最主要的內容即是大量的純文本，在調研了一些方案後，咱們認爲H5規範中的FileReader.readAsText能夠很好的作到這一點，結合拖放事件，咱們即可以很大體構建出一個不錯的方案：用戶將一個或者多個日誌文件拖放至網頁中，便可對這些日誌批量分析和檢索。

基於以上工做，咱們騰訊微證券項目組推出了本身的解決方案：We.Logline，一個輕量，實用和客戶端級的前端日誌記錄工具。