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是一款非常强大的前端监控工具，可以帮助我们监控并且追踪前端错误，分析日志信息等。同时，它还提供了多种分析方式，例如性能分析、接口分析等，可以帮助我们深入了解我们的应用程序，并对其进行优化。