1. 程式人生 > >乾貨 | 在Angular2中像Log4j一樣管理日誌

乾貨 | 在Angular2中像Log4j一樣管理日誌

點選上方“中興開發者社群”,關注我們

每天讀一篇一線開發者原創好文

640?wx_fmt=png

開篇

前端開發人員在編碼過程中,會經常使用console命令取代原始的alert(),將日誌資訊輸出到控制檯中,便於除錯程式碼,跟蹤業務流程。console的命令非常多,功能強大,日誌內容豐富,更不會像alert()那樣阻塞頁面操作。所以非常受歡迎,在程式碼中的使用率非常高。中開社的技術論壇裡也有很多前輩和大牛介紹了其相關用法。

640?wx_fmt=png

然而世界是繁雜的,正所謂陰中有陽,陽中有陰。console命令給我們帶來便利的同時也帶來一些不容忽視的問題。我們需要站在新的角度去發現和思考。

首先,版本釋出時不一定能及時清理程式碼中的console命令,更不會去刪除那些有特殊需要的日誌列印。其次,console命令雖多,但是很容易過度使用,特別是輸出日誌時不區分級別。最終的結果是版本執行後,瀏覽器控制檯裡面的日誌資訊密密麻麻。等到定位問題時,滿眼白花,無從下手,影響心情,影響效率。相信每位搞前端的小夥伴都有類似的深刻體會。

可怕的是在傳遞給console命令列印輸出的物件是不能被垃圾回收的,因為在程式碼執行之後需要在控制檯中能檢視物件資訊。這有可能造成記憶體洩露。所以最好不要在生產環境中使用console.log方法輸出任何物件。

黎明

在服務端的世界裡,那些精通Java的大哥哥一定知道Log4j,熟悉Nodejs的小姐姐也知道Log4js;而我們這些玩angular的小夥伴們也很想知道有沒有Log4angular這玩意兒?可惜,木有。

不要氣餒,畢竟我們這些玩前端的小夥伴的智慧和想象力是無窮的,在這裡我向大家推薦angular2-logger,它的靈感恰好來自Log4js。它提供了Logger服務,能夠象Log4js一樣通過定義每一條日誌資訊的級別,我們能夠更加細緻地控制日誌的生成過程。並且可以在控制檯動態修改日誌級別或關閉日誌。有了它,媽媽再也不用擔心我加班定位問題了。

640?wx_fmt=png

曙光

angular2-logger是一個開源的,基於ng2的日誌記錄器模組。

它提供了6個日誌級別:

640?wx_fmt=png

 Logger服務提供的api方法:

640?wx_fmt=png

1.安裝方法

 npm install --save angular2-logger

2.配置方法

在app.module中設定provider:

640?wx_fmt=png

3.在程式碼中使用   

在component或service中注入Logger服務

640?wx_fmt=png

4.在控制檯中使用

640?wx_fmt=png

1.檢視當前日誌級別

輸入logger.level 按回車鍵

640?wx_fmt=png

2.修改當前日誌級別

輸入logger.level=level數值 按回車鍵

640?wx_fmt=png

後續控制檯只輸出小於等於當前級別的日誌

3.支援儲存當前設定

輸入logger.store() 按回車鍵

640?wx_fmt=png

重新整理或重新開啟介面,後續控制檯只輸出小於等於上次儲存的級別的日誌。如果要恢復預設的日誌級別,可以清除瀏覽器快取。

640?wx_fmt=png

4.不儲存當前設定(預設)

輸入logger.unstore() 按回車鍵

5.關閉控制檯日誌功能

輸入logger.level=0 按回車鍵

5.分享OES拓撲團隊的使用方法

在environment.prod.ts配置WARN級別

640?wx_fmt=png

在environment.ts配置日誌LOG級別

640?wx_fmt=png

在app.module中設定provider

640?wx_fmt=png

這樣OES拓撲客戶端的日誌在開發環境下預設是LOG級別,在生產環境下預設是WARN級別,所以版本打包部署後,在環境中執行時預設只看到ERROR和WARN級別的日誌。

道家講究法於陰陽,和於術數。我覺得不管做什麼事,最重要的是把握一個度。通過使用angular2-logger,客戶端日誌在合理的控制下,瀏覽器控制檯一下子變得非常清爽。如果定位問題時,需要看到更加詳盡的日誌,可以隨時在瀏覽器控制檯動態修改日誌級別。由於設定了store為true,瀏覽器自動儲存使用者設定。

展望未來

雖然目前angular2-logger不能跟大名鼎鼎的Log4j相比。但它是基於ng2框架的,提供了元件化,模組化的設計思想,為我們去擴充套件它,改造它,提供了無限的可能。後續我會為它擴充套件如下的功能,貢獻出來方便大家使用。歡迎感興趣的小夥伴們一起參與。

    1.新增prefixPattern屬性,支援格式化每條訊息的字首。

    2.新增datatimePatten屬性,支援每條訊息帶時間戳,並且可以格式化。

    3.新增url屬性,支援將重要的日誌內容通過url配置的介面,post到服務端。

 最後,衷心的感謝大家對我的支援,希望大家多多提出寶貴的意見,幫助我成長。祝大家2018年萬事如意!開工大吉!

拓展閱讀

640?wx_fmt=png