移动端WEB网页开发前端错误收集与监控(三)

移动端WEB网页开发前端错误收集与监控

1.捕获资源加载错误：如跨域，图片资源加载失败等

window.addEventListener('error', event =>  {  
               console.log('addEventListener error:' + event.target); 
                event.srcElement inatanceof HTMLScriptElement
                HTMLLinkElement
                HTMLImageElement
        //过滤掉监听的代码逻辑错误
    }, true); 
    // true代表在捕获阶段调用，false代表在冒泡阶段捕获。使用true或false都可以

//在跨域脚本上配置crossorigin="anonymous"捕获跨域脚本错误

2.代码执行逻辑或堆栈错误，function等错误

window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
    //无法监听资源加载异常
  } 

3.异步或同步request请求报错

if(!window.XMLHttpRequest) return;
var xmlhttp = window.XMLHttpRequest;
var _oldSend = xmlhttp.prototype.send;
var _handleEvent = function (event) {
    if (event && event.currentTarget && event.currentTarget.status !== 200) {
          // 自定义错误上报 }
}
xmlhttp.prototype.send = function () {
    if (this['addEventListener']) {
        this['addEventListener']('error', _handleEvent);
        this['addEventListener']('load', _handleEvent);
        this['addEventListener']('abort', _handleEvent);
    } else {
        var _oldStateChange = this['onreadystatechange'];
        this['onreadystatechange'] = function (event) {
            if (this.readyState === 4) {
                _handleEvent(event);
            }
            _oldStateChange && _oldStateChange.apply(this, arguments);
        };
    }
    return _oldSend.apply(this, arguments);
}
if(!window.fetch) return;
    let _oldFetch = window.fetch;
    window.fetch = function () {
        return _oldFetch.apply(this, arguments)
        .then(res => {
            if (!res.ok) { // True if status is HTTP 2xx
                // 上报错误
            }
            return res;
        })
        .catch(error => {
            // 上报错误
            throw error;  
        })
}
//axios拦截器
//ajax catch

4.未处理的promise reject错误

window.addEventListener('unhandledrejection', event => { 
       console.log('unhandledrejection:' + event.reason); // 捕获后自定义处理

//只能监听未处理的promise异常
    });

5.将错误信息上传至服务器

//本质上，上传是一个HTTP请求，因此可以使用如下方式：

//1.通过 ajax 发送http请求数据
//2.通过资源链接：如 new Image();

$.ajax({
    url:"",
    data:{}
})

new Image().src = ""?params='';

6.Vue错误监控

Vue.config.errorHandler = (err, vm, info) => {
    // 错误上报到收集报错的平台
    啦啦啦------
}

7.使用raven.js

文档传送：https://docs.sentry.io/clients/javascript/