前端线上bug监控

页面异常一般分以下集中情况

1.js异常：语法错误、运行时错误、跨域脚本

// try...catch 针对某个代码块使用try...catch,进行运行时错误捕捉， 无法捕捉语法错误，
try {
    // ...代码
}catch(e) {
    console.log(e)
}
// window.onerror 这个代码需要分离出去，并且比其他脚本先执行；跨域的资源需要特殊头部处理；
// 无法捕捉网络错误
window.onerror = function(msg, url, line, col, error) {
    return true
}

2.资源加载异常：js、css、img

// 可以捕捉网络请求异常，但是无法判断HTTP的状态是404还是其他，需要结合服务器端日志排查
window.addEventListener('error', (msg,url,row,col,error) => {

})

3.ajax网络请求异常

// 对发送请求进行一个拦截

4.promise异常

window.addEventListener('unhandledrejection', (e) => {
    e.preventDefault()
})

5.vue项目中全局异常

Vue.config.errorHandler = (err, vm, info) => {
    
}

最后进行一个异常的 上报