乾貨 | 在Angular2中像Log4j一樣管理日誌
點選上方“中興開發者社群”,關注我們
每天讀一篇一線開發者原創好文
開篇
前端開發人員在編碼過程中,會經常使用console命令取代原始的alert(),將日誌資訊輸出到控制檯中,便於除錯程式碼,跟蹤業務流程。console的命令非常多,功能強大,日誌內容豐富,更不會像alert()那樣阻塞頁面操作。所以非常受歡迎,在程式碼中的使用率非常高。中開社的技術論壇裡也有很多前輩和大牛介紹了其相關用法。
然而世界是繁雜的,正所謂陰中有陽,陽中有陰。console命令給我們帶來便利的同時也帶來一些不容忽視的問題。我們需要站在新的角度去發現和思考。
首先,版本釋出時不一定能及時清理程式碼中的console命令,更不會去刪除那些有特殊需要的日誌列印。其次,console命令雖多,但是很容易過度使用,特別是輸出日誌時不區分級別。最終的結果是版本執行後,瀏覽器控制檯裡面的日誌資訊密密麻麻。等到定位問題時,滿眼白花,無從下手,影響心情,影響效率。相信每位搞前端的小夥伴都有類似的深刻體會。
可怕的是在傳遞給console命令列印輸出的物件是不能被垃圾回收的,因為在程式碼執行之後需要在控制檯中能檢視物件資訊。這有可能造成記憶體洩露。所以最好不要在生產環境中使用console.log方法輸出任何物件。
黎明
在服務端的世界裡,那些精通Java的大哥哥一定知道Log4j,熟悉Nodejs的小姐姐也知道Log4js;而我們這些玩angular的小夥伴們也很想知道有沒有Log4angular這玩意兒?可惜,木有。
不要氣餒,畢竟我們這些玩前端的小夥伴的智慧和想象力是無窮的,在這裡我向大家推薦angular2-logger,它的靈感恰好來自Log4js。它提供了Logger服務,能夠象Log4js一樣通過定義每一條日誌資訊的級別,我們能夠更加細緻地控制日誌的生成過程。並且可以在控制檯動態修改日誌級別或關閉日誌。有了它,媽媽再也不用擔心我加班定位問題了。
曙光
angular2-logger是一個開源的,基於ng2的日誌記錄器模組。
它提供了6個日誌級別:
Logger服務提供的api方法:
1.安裝方法
npm install --save angular2-logger
2.配置方法
在app.module中設定provider:
3.在程式碼中使用
在component或service中注入Logger服務
4.在控制檯中使用
1.檢視當前日誌級別
輸入logger.level 按回車鍵
2.修改當前日誌級別
輸入logger.level=level數值 按回車鍵
後續控制檯只輸出小於等於當前級別的日誌
3.支援儲存當前設定
輸入logger.store() 按回車鍵
重新整理或重新開啟介面,後續控制檯只輸出小於等於上次儲存的級別的日誌。如果要恢復預設的日誌級別,可以清除瀏覽器快取。
4.不儲存當前設定(預設)
輸入logger.unstore() 按回車鍵
5.關閉控制檯日誌功能
輸入logger.level=0 按回車鍵
5.分享OES拓撲團隊的使用方法
在environment.prod.ts配置WARN級別
在environment.ts配置日誌LOG級別
在app.module中設定provider
這樣OES拓撲客戶端的日誌在開發環境下預設是LOG級別,在生產環境下預設是WARN級別,所以版本打包部署後,在環境中執行時預設只看到ERROR和WARN級別的日誌。
道家講究法於陰陽,和於術數。我覺得不管做什麼事,最重要的是把握一個度。通過使用angular2-logger,客戶端日誌在合理的控制下,瀏覽器控制檯一下子變得非常清爽。如果定位問題時,需要看到更加詳盡的日誌,可以隨時在瀏覽器控制檯動態修改日誌級別。由於設定了store為true,瀏覽器自動儲存使用者設定。
展望未來
雖然目前angular2-logger不能跟大名鼎鼎的Log4j相比。但它是基於ng2框架的,提供了元件化,模組化的設計思想,為我們去擴充套件它,改造它,提供了無限的可能。後續我會為它擴充套件如下的功能,貢獻出來方便大家使用。歡迎感興趣的小夥伴們一起參與。
1.新增prefixPattern屬性,支援格式化每條訊息的字首。
2.新增datatimePatten屬性,支援每條訊息帶時間戳,並且可以格式化。
3.新增url屬性,支援將重要的日誌內容通過url配置的介面,post到服務端。
最後,衷心的感謝大家對我的支援,希望大家多多提出寶貴的意見,幫助我成長。祝大家2018年萬事如意!開工大吉!
拓展閱讀