移动端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/

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值