快速迭代是騰訊產品的生命力
穩定性則是互聯網產品的主基調
本期直播課淺談我們在前端異常的探索和實踐
讓我們對異常時刻警惕
| 導語 從事Web前端同學對此肯定深有體會，代碼發出去之後，猶如脫繮的野馬，運行在萬千的客戶終端上，等到產品和後臺反饋問題到我們這邊，很多時候定位問題只能靠猜，尤其是一些偶發誘因，因爲根本不知道用戶是如何操作的，真實環境遇到的問題通常是很多隨機因素疊加的形成的，因此很難回放用戶的操作來還原現場找到原因。
現在的痛點
1、用戶反饋問題後，有時候雖然我們查詢了js報錯日誌和cgi調用，但是沒有發現任何錯誤，我們根本不知道用戶的終端上到底發生了什麼。
2、目前使用的js錯誤上報系統，看到上報有一定的延時，作爲一款金融產品，分秒必爭，這短暫的延時可能是致命的，我們必須快速的找到原因並予以修復。
經過一段時間經驗的累積，我們想到，如果我們有一個同後臺一樣詳實的可分類和檢索的代碼運行日誌，無疑將會提供巨大的幫助。
我們的探索
一個健壯的日誌系統大致包含日誌記錄、日誌上傳和日誌分析三個主要部分，在這次的實踐中，我們對這三方面都有所探索。
1、日誌到底存哪裏？
由於前端受到很多限制，不能同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的方案，應當在日後的迭代中主要支持。
2、什麼樣的日誌格式堪稱優雅？
時間戳，這個無需多說，時間戳是日誌的基本要義。
多會話，一個前端工程中可能同時存在多個獨立的模塊，這些模塊很可能會同時互不干擾的記錄各自的日誌。如果每個模塊都在自己的會話下記錄日誌，就不會相互干擾，並且提供了另一個維度的過濾能力。
錯誤等級，如
info,warning,error,critical等，以提供最爲基本的過濾能力。描述符，如
verify.request.start,submit.prevented等等。儘可能的以便用戶一眼就可以知曉日誌的大致內容，也方便代碼中日誌記錄代碼的可讀性，也更易於在代碼中搜索。數據和詳情，有時候一個簡單的描述符並不能說明問題，可能需要記錄更多的描述性文本或者數據來分析問題。
3、日誌如何獲取？
由於我們並不需要實時的獲取來自客戶端的大量日誌，因此日誌是存儲在用戶客戶端本地的，我們需要後臺配合開發一個用於接收客戶端通過網絡上傳的日誌內容並存儲起來的接口。同時可能要考慮一些安全性問題，如引入token機制和驗證登錄態等等。目前我們騰訊微證券採用的方案爲：用戶在微信公衆號中發送消息“問題反饋”（直接使用日誌上報等關鍵詞可能會引起用戶的反感），後臺會返回日誌上傳頁面地址鏈接，用戶點擊鏈接進入後，在獲取登錄態後自動上報日誌。
4、日誌分析如何分析？
由於Logline上傳的日誌格式符合標準，具有良好的可閱讀性，因此我們可以在某種程度上直接使用命令行工具或者編輯器來閱讀。但是對命令行不熟悉的用戶使用可能仍然有困難，因此有必要使用Web技術棧搭建一個易於使用並且視覺良好的工具。我們希望這套工具可以不依賴於後端，既可以部署在服務器端，也可以當做本地網頁直接雙擊打開，也可以被簡單的包一層外殼而當做桌面APP來使用。
作爲日誌，承載的最主要的內容便是大量的純文本，在調研了一些方案後，我們認爲H5規範中的FileReader.readAsText可以很好的做到這一點，結合拖放事件，我們便可以很大致構建出一個不錯的方案：用戶將一個或者多個日誌文件拖放至網頁中，即可對這些日誌批量分析和檢索。
基於以上工作，我們騰訊微證券項目組推出了自己的解決方案：We.Logline，一個輕量，實用和客戶端級的前端日誌記錄工具。