如何在網頁實時查看APP日誌

寫在前面

對於一個已經上線的APP,若是沒有本身的Log系統。一旦線上出現問題,你就會收到各類領導微信的艾特,各類客戶投訴。因此一套本身成熟的Log系統是相當重要的。本文重點仍是說局域網下日誌實時查看功能。html

需求分析

輸入ios

  • 支持文件寫入和讀取
  • 支持設置單個文件大小
  • 支持設置單個文件寫入時間大小
  • 支持設置日誌文件總數
  • 支持日誌文件有效時間
  • 支持數據庫寫入和讀取
  • 支持日誌級別(Off、Error、Debug、Info、Verbose)
  • 支持自定義format
  • 支持控制檯與console.app
  • 支持日誌過濾

輸出git

  • 支持搖一搖日誌文件分享
  • 支持局域網日誌實時日誌
  • 支持日誌文件上傳到服務器
  • 支持服務端對單個APP帳號或deviceID作日誌開關

系統架構

推薦方案

CocoaLumberjack,默認支持多個級別的日誌輸出,並能夠靈活的擴展日誌級別,日誌format,日誌過濾條件。默認支持日誌文件大小,文件寫入數量等等。知足了大部分需求。github

功能實現

添加terminal輸出

[DDLog addLogger:[DDTTYLogger sharedInstance]];
複製代碼

添加Apple system log

[DDLog addLogger:[DDASLLogger sharedInstance]];
複製代碼

使用系統版本macosx(10.4,10.12), ios(2.0,10.0), watchos(2.0,3.0), tvos(9.0,10.0) ,用下面的代替。web

[DDLog addLogger:[DDOSLogger sharedInstance]];
複製代碼

自定義format

自定義format須要建立一個類並遵循協議DDLogFormatter,而後實現方法。sql

@interface LogFormatter : NSObject<DDLogFormatter>

@end
@implementation LogFormatter

- (NSString * _Nullable)formatLogMessage:(nonnull DDLogMessage *)logMessage {
    return [NSString stringWithFormat:@"[%@]:%@ line:%@ ----%@",logMessage->_fileName,logMessage->_function,@(logMessage->_line),logMessage->_message];
}

@end
複製代碼

寫入文件

fileLogger = [[DDFileLogger alloc] init];
    fileLogger.maximumFileSize = 1024 * 1;  //  1kb 文件最大大小
    fileLogger.rollingFrequency = 60 * 1;       // 60 Seconds 單個文件最大寫日誌時間
    fileLogger.logFileManager.maximumNumberOfLogFiles = 4; //最大文件數
    [DDLog addLogger:fileLogger];
複製代碼

寫入數據庫

寫入數據庫須要實現自定義的Logger類,本文中使用的是官方demo的FMDBLogger數據庫

添加SQLiteLoggermacos

sqliteLogger = [[FMDBLogger alloc] initWithLogDirectory:logsDirectory];
    
    sqliteLogger.saveThreshold     = 500;               //當緩存到達閾值時寫入
    sqliteLogger.saveInterval      = 60;               // 60 seconds 當緩存超過60秒時寫入
    sqliteLogger.maxAge            = 60 * 60 * 24 * 7; //  最大保存時間
    sqliteLogger.deleteInterval    = 60 * 5;           //官方解釋大概說,刪除是一個很耗時的IO操做,因此設置一個時間間隔
    sqliteLogger.deleteOnEverySave = NO; 
    
    [DDLog addLogger:sqliteLogger];
複製代碼

局域網實時日誌

大體步驟以下:瀏覽器

  • 基於websocket實現對日誌的實時傳輸
  • 在APP中用js+HTML實現一個帶websocket客戶端的xxx.html文件
  • 在APP開啓webserver,並設置xxx.html爲root document
  • 在任何端用瀏覽器打開 http://yourIP:port,只須要瀏覽器支持websocket
  • APP當有websocket鏈接本地webserver 就攔截日誌給JS的websocket客戶端發送日誌

HTML 代碼緩存

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"><meta name="theme-color" content="#000000">
        <title>Live log</title>
        <script>
            var dpr,rem,docEl=document.documentElement,fontEl=document.createElement("style"),scale=(docEl.clientWidth/375).toFixed(2);dpr=window.devicePixelRatio||1,1.4<scale&&(scale=1),rem=12*scale,docEl.setAttribute("data-dpr",dpr),docEl.setAttribute("data-scale",scale),docEl.firstElementChild.appendChild(fontEl),fontEl.innerHTML="html{font-size:"+rem+"px!important;}"
            </script>
    </head>
    <body>
        <a id="openApp">打開瀏覽器審查元素,進入console界面</a>
        <script>
            var url = window.location.origin.replace("http","ws")+"/livelog";
            var ws = new WebSocket(url);
            ws.onclose = function (event) {
                console.log("ws close:",event.data);
            }
            ws.onerror = function (event) {
                console.log("ws error:",event.data);
            }
            ws.onmessage = function (event) {
                var data = event.data;
                console.log(data);
            }
            ws.onopen = function (event) {console.log("ws opened");}
            window.webs = ws;
            </script>

    </body>

</html>
複製代碼

搖一搖分享

因爲涉及項目其餘業務,因此只提供思路。

日誌開關在搖一搖以後展現一個alert頁面的上配置,一旦開關打開則開始記錄日誌並寫入本地文件一種。在復現問題或捕捉到想要的日誌後再次搖一搖選擇對應的日誌,使用UIDocumentInteractionController分享到微信和airdrop便可。 搖一搖分享適合在非正式下的配置日誌開關,若是線上版本,能夠經過下面的方式開始。

上傳服務端

根據業務需求自行上傳。

demo 地址

demo地址

參考

CocoaLumberjack

CocoaHTTPServer

總結

本文重點仍是說局域網下日誌實時查看功能: 不管在DEBUG模式下仍是經過console.app都須要手機鏈接到MAC電腦來查看實時日誌。還有一些在APP內部附帶日誌控件的方式,這種方式會APP的性能有必定影響,對測試結果也會有影響。因此我的以爲局域網下面再網頁端直接查看APP實時日誌即減小了日誌控件的性能的影響,也能夠對日誌進行篩選、複製、導出等操做。所以我的以爲值得一試。

若是以爲好用點個star吧 Logger

相關文章
相關標籤/搜索