Webfunny——前端監控工具

Webfunny是一款前端監控工具，它可以幫助我們監控並且追蹤前端錯誤，分析日誌信息等。同時，它也提供了多種分析方式，例如性能分析、接口分析等，我們可以更好地了解我們的應用程序，並針對性地進行優化。

一、安裝

首先，我們需要在Github上下載Webfunny的代碼：https://github.com/a597873885/webfunny_monitor

在下載完成後，我們可以通過npm install或者yarn install來安裝它所依賴的所有模塊。接着，通過npm run build或者yarn build將代碼編譯成瀏覽器可識別的代碼。

npm install / yarn install
npm run build / yarn build

最後，我們將編譯好的代碼以及相關的靜態資源放置到我們的服務器上，就可以開始使用Webfunny來監控我們的應用程序了。

二、使用

1、監控錯誤

Webfunny可以幫助我們監控前端錯誤，例如JavaScript錯誤、Promise錯誤、靜態資源加載失敗等問題：

window.onerror = function(message, source, lineno, colno, error) {
    var reportData = {
        message: message,
        source: source,
        lineno: lineno,
        colno: colno,
        error: error
    };
    report(reportData);
};

然後，我們可以使用report函數將錯誤信息上報給Webfunny服務器。我們可以通過Webfunny提供的控制台查看這些問題，並且定位問題代碼。

2、性能分析

Webfunny還可以幫助我們進行性能分析，例如頁面加載時間、資源加載時間、渲染時間等：

window.onload = function() {
    var timings = window.performance.timing;
    var payload = {
        dnsTime: timings.domainLookupEnd - timings.domainLookupStart,
        tcpTime: timings.connectEnd - timings.connectStart,
        requestTime: timings.responseStart - timings.requestStart,
        responseTime: timings.responseEnd - timings.responseStart,
        domReadyTime: timings.domContentLoadedEventEnd - timings.navigationStart,
        onLoadTime: timings.loadEventStart - timings.navigationStart
    };
    report(payload);
};

我們可以通過將performance.timing對象中的時間數據進行計算，得到上述監控到的性能指標。這些指標將會被上報到Webfunny服務器，我們可以通過控制台對其進行分析。

3、接口分析

Webfunny還可以幫助我們進行接口分析，例如接口請求時間、接口調用次數等：

function ajax(url, method, data, success, failure) {
    var startTime = (new Date()).getTime();
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var endTime = (new Date()).getTime();
            var payload = {
              url: url,
              method: method,
              requestTime: endTime - startTime,
              responseCode: xhr.status
            };
            report(payload);
            if (xhr.status === 200) {
                success(xhr.responseText);
            } else {
                failure(xhr);
            }
        }
    };
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(data);
}

我們跟蹤XMLHttpRequest的回調函數，在接口請求成功或失敗之後，將接口請求時間和響應碼上報到Webfunny服務器。這些數據可以幫助我們更好地了解我們的接口性能，並且根據需要進行優化。

三、總結

Webfunny是一款非常強大的前端監控工具，可以幫助我們監控並且追蹤前端錯誤，分析日誌信息等。同時，它還提供了多種分析方式，例如性能分析、接口分析等，可以幫助我們深入了解我們的應用程序，並對其進行優化。