logline:輕量、實用和客戶端級的前端日志記錄工具

SusanneTier 8年前發布 | 13K 次閱讀 IndexedDB 數據庫 前端技術

Logline

logline是一個輕量,實用和客戶端級的前端日志記錄工具。

為何前端定位問題很困難

前端同學對此肯定深有體會,代碼發出去之后,猶如脫韁的野馬,運行在萬千的客戶終端上,等到產品和后臺反饋問題到我們這邊,很多時候定位問題只能靠猜,尤其是一些偶發誘因,因為根本不知道用戶是如何操作的,真實環境遇到的問題通常是很多隨機因素疊加的形成的,因此很難回放用戶的操作來還原現場找到原因。這個時候,我們想,如果有一個像后臺一樣詳實的可分類和檢索的運行日志,無疑將會提供巨大的幫助。

應用場景

  • 回放用戶細節操作

    真實應用場景下,用戶的行為可能是不可預料的,甚至用戶自己也無法記得自己的操作,有了日志,我們有了回放用戶操作和代碼運行狀態的能力。

  • 核心流程監控

    在產品的一些核心流程中,我們可以在用戶出錯的情況下主動上傳用戶日志,以便我們可以快速統計和定位用戶遇到的問題。

  • 主動抓取用戶的日志分析用戶行為

    有時候在用戶不配合開發人員的時候,我們可以設計一種策略,比如我們在線上發布一個json文件,里面配置一個希望主動抓取日志的用戶列表,當我們的產品在用戶手機上被打開后,延時下載(避免影響主流程性能)這個json,當匹配當前用戶時,直接主動上報該用戶的日志。

  • 統計和輔助分析JS錯誤

    我們可以記錄js的報錯,包含調用隊列一起記錄,直接上傳此錯誤日志或者在累計達到一個閾值的時候統一上傳。

特性

  • 無外部依賴
  • 日志記錄
  • 客戶端級
  • websql/localstorage/indexeddb三種日志協議
  • 命名空間
  • 日志等級
  • 日志清理(防止日志過多,占用上傳帶寬和占滿用戶允許的內存)

快速上手

1. 安裝

通過bower

bower install logline

直接下載

訪問 https://github.com/latel/logline/releases ,選擇需要的版本下載,引入自己的項目。

2. 引入腳本

Logline 支持直接使用 script 標簽引用,也支持 AMD 模塊加載器.

// Script標簽引入方式
<script src="./mod/logline.min.js"></script>
<script>
    // 使用indexedDB協議
    Logline.using(Logline.PROTOCOL.INDEXEDDB);
</script>

// AMD模塊方式 var Logline = require('./mod/logline.min');</code></pre>

3. 選擇日志協議

目前一共支持三個協議, 三個協議都被直接掛載在Logline對象上以便一些特殊的應用場景,也更好的符合語義化:

  • websql: Logline.PROTOCOL.WEBSQL
  • indexeddb: Logline.PROTOCOL.INDEXEDDB
  • localstorage: Logline.PROTOCOL.LOCALSTORAGE

你可以在引入Logline之后,使用 using 主動選定一個期望使用的日志協議。

Logline.using(Logline.PROTOCOL.WEBSQL);

如果你沒有提前選擇一個日志協議,那么當你調用Logline的相關 API 時,Logline 會根據你在構建時給定的參數作為優先級來選擇可用的優先級最高的協議。 比如你的自定義構建命令是 npm run configure -- --with-indexeddb --with-websql --with-localstorage , 如果 indexeddb 協議可用,那么indexeddb將作為自動選擇的協議。 如果 indexeddb 協議不可用但是 websql 協議可用,那么將選擇 websql 協議,如此類推。 如果最后發現所有的協議都不可用,將會拋出錯誤。

4. 記錄日志

// 不同的模塊使用不同的日志會話
var spaLog = new Logline('spa'),
    sdkLog = new Logline('sdk');

// 不包含數據的,描述為 init.succeed 的記錄 spaLog.info('init.succeed');

// 包含錯誤描述數據,描述為 init.failed 的記錄 spaLog.error('init.failed', { retcode: 'EINIT', retmsg: 'invalid signature' });

// 不包含數據的,描述為 outdated 的記錄 sdkLog.warning('outdated');

// 包含錯誤描述數據,描述為 system.vanish 的記錄 sdkLog.critical('system.vanish', { // debug infos here });</code></pre>

5. 讀取日志

Logline.getAll(function(logs) {
    // process logs here
});

6. 清理日志

Logline.keep(.5); // 保留半天以內的日志,如果不傳參則清空日志
Logline.clean(); // 清空日志并刪除數據庫

7. 自定義數據庫名

由于 indexeddb, websql 和 localStorage 都是同域共享的,這時候 Logline 默認的數據庫名 logline 可能會已經被占用,需要指定一個新的數據庫名。 可以通過下面2個方法指定數據庫名。

// 調用using時,同時指定第二個參數作為數據庫名
Logline.using(Logline.PROTOCOL.WEBSQL, 'newlogline');

// 調用database來指定數據庫名 Logline.database('newlogline');</code></pre>

自定義構建

目前Logline一共實現了 localstorage 、 websql 和 indexeddb 三個日志協議,默認是全部打包,可能你只想使用其中某個協議而已,你可以通過 npm run configure 來自定義構建你需要的版本。這樣有利于減小包的大小。

// 不跟參數默認構建所有協議
npm run configure
// 配置你需要的協議,去掉不需要的協議申明--with-xxx
npm run configure -- --with-localstorage --with-websql --with-indexeddb
// 重新打包
npm run build
// 去dist目錄尋找新構建的打包文件

FAQ

如何上傳日志?

從v1.0.1以開始,日志上傳功能被移除,我們希望logline更專注于日志的記錄和維護工作,你可以通過 Logline.getAll 來獲取日志來自行實現上傳過程。

如何分析日志

由于Logline上傳的日志格式符合標準,具有良好的可閱讀性,因此我們可以在某種程度上直接使用命令行工具或者編輯器來閱讀。 但是對命令行不熟悉的用戶使用可能仍然有困難,因此有必要使用Web技術棧搭建一個易于使用并且視覺良好的工具。

我們為此準備了Logline-viewer以供使用。

 

 本文由用戶 SusanneTier 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!