前端异常监控

[xlearns]

异常监控方式

• 流程：采集错误、上传错误、分析错误、报警

• 采集：环境、性能、异常、业务

• 环境：url【window.localtion.href】、ua【window.navigator.userAgent】、token

• 性能：

• try catch 缺点：只能捕获捉到运行时非异步错误，语法错误（syntaxError）和异步错误捕捉不到

• window.onerror(message,file,line,col,obj) 优点: 异步还是非异步错误，onerror 都能捕获到运行时错误
  函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught ReferenceError : xxxxx。缺点没办法捕获静态资源【img、script、link】以及promise的reject没catch住的异常、网络异常

• window.addEventListener('error',(err)=>{},true)只有再捕获状态下才可以捕获资源报错， 优点：可以捕获静态资源

• 捕获接口异常全局监听，比如axios的interceptor进行拦截

• window.addEventListener('unhandlerrejection') 优点：可以捕获promise的reject没catch住的异常

• 网页崩溃：service work 【不同于render线程，为单独线程，配合心跳包来确定页面是否崩溃】

• 成熟的产品：sentry、arms、fundebug、webfunny

性能监控

• window.performance 提供了在加载和使用当前页面期间发生的各种事件的性能计时信息（毫秒）
• FP：首次绘制、标记浏览器渲染任何视觉上不同于导航前屏幕内容之内容的时间点
• FCP:首次内容绘制，标记浏览器渲染来自DOM第一位内容的时间点，内容可能是文本、图像、SVG或者元素

//计算fp和fcp
const paint = window.performance.getEntriesByType('paint');
const FP = paint[0].startTime,
const FCP = paint[1].startTime,

window.logInfo = {};  //统计页面加载时间
    window.logInfo.openTime = performance.timing.navigationStart;
    window.logInfo.whiteScreenTime = + new Date() - window.logInfo.openTime;
    document.addEventListener('DOMContentLoaded', function (event) {
        window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
    });
    // 网页加载完毕执行
    window.onload = function () {
        window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
        window.logInfo.nowTime = new Date().getTime();
        var timname = {
            whiteScreenTime: '白屏时间',
            readyTime: '用户可操作时间',
            allloadTime: '总下载时间',
            mobile: '使用设备',
            nowTime: '时间',
        };
        var logStr = '';
        for (var i in timname) {
            console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
            if (i === 'mobile') {
                logStr += '&' + i + '=' + window.logInfo[i];
            } else {
                logStr += '&' + i + '=' + window.logInfo[i];
            }
        }
        // 
        (new Image()).src = '/action?' + logStr;
    };