前端错误收集及统一异常处理

总结

前端错误分为：代码执行错误、资源加载错误

前端收集

• window.onerror---事件冒泡的方式处理 window.onerror会全局的在JS运行时错误、语法错误时触发

window.onerror= function(message,source,lineno,colno,error){...}

• message:错误消息（字符串）

• source：引发错误的脚本的URL（字符串）

• lineno:发生错误的行号（数值）

• colno:发生错误的行的列号（数值）

• error：错误对象

• 解决Script error错误，使用跨源资源共享机制（CORS）

1:为页面上script标签添加crossorigin属性

<script src="" crossorigin></script>

2:响应头中增加Access-Control-Allow-Origin支持跨域资源共享

• 对于Promise中的错误不能被try...catch和window.onerror捕获。需要使用unhandledrejection捕获错误

window.addEventListener('unhandledrejection',(e)=>{
   console.log('Promise.reject()中的内容，告诉发生的错误原因：${e.reason}')
})

• addEventListener('error') 前端有一些静态资源错误，图片、CSS、script等，加载失败，解决方案： 方法一：onerror捕获

<script src="" onerror="errorHandler(this)"></script>
<link rel="stylesheet" href="https://cdn.xxx.com/styles/test.css" onerror="errorHandler(this)"></link>

• 页面崩溃收集和处理 通过监听window对象下的load和beforeunload进行处理并结合sessionstorage

window.addEventListener('load',()=>{
   sessionStorage.setItem('page_exit','pending')
})
window.addEventListener('beforeunload',()=>{
   sessionStorage.setItem('page_exit','true')
})
sessionStorage.getItem('page_exit') != 'true'