采集方法说明
1、windows.onerror-全局异常上报
当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。加载一个全局的error事件处理函数可用于自动收集错误报告。
window.onerror=function(message,source,lineno,colno,error): void{
letmsg='';
if(error&&error.stack){
msg=error.stack;
}elseif(typeofmessage==='string'){
msg=message;
}
// 上报代码
if(originOnError&&isFunction(originOnError)){
originOnError.apply(window,[message,source,lineno,colno,error]);
}};
对于跨域的JS资源，window.onerror 拿不到详细的信息，只能得到一个字符串Script error。因为浏览器实现script资源加载的地方，是进行了同源策略判断的，目的是避免数据错误信息里面包含的信息泄露到不安全的域中。如果是非同源资源，errorMessage就固定为 Script error。针对此问题的解决思路是，跨源资源共享机制（CORS）,为 script 标签添加 crossOrigin 属性:
<script src="http://m.jd.com/360buy.js" crossorigin></script>
特别需要说明的是服务端需要设置: Access-Control-Allow-Origin
try catch-主动处理异常上报
使用try catch能够很好的捕获异常并对应进行相应处理，不至于让页面挂掉。在捕获异常后可以进行异常报。但是需要说明，try catch只能捕获到同步运行时错误，无法捕获语法错误和异步错误。
try {
// do something
} catch (error) {
console.error(error);
}
window.addEventListener('error',()=>{})-资源加载异常
当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window 能被单一的window.addEventListener 捕获，window.onerror捕获不到资源加载错误。 不过 window.addEventListener 也可以捕获到JS运行时错误，这里我们需要过滤掉。
window.addEventListener('error',(event)=>{
if(event){
consttarget=event.target||event.srcElement;
constisElementTarget=targetinstanceofHTMLScriptElement||targetinstanceofHTMLLinkElement||targetinstanceofHTMLImageElement;
// js error不再处理
if(!isElementTarget)return;
if(target){
// @ts-ignore
consturl=(target.src||target.href)||'';
// your reporter code
}
}},true);
window.addEventListener('unhandledrejection',function(event)-Promise异常
window.onerror 和 window.addEventListener('error', ()=>{}) 都不能捕获Promise 中的异常。当 Promise 被reject并且错误信息没有被处理的时候，会抛出一个unhandledrejection；可以对 unhandledrejection 进行监听，用来全局监听Uncaught Promise Error。
window.addEventListener("unhandledrejection", function(e){
e.preventDefault();
console.log('捕获到异常：', e);
returntrue;
});
Promise.reject('promise error');
Vue.config.errorHandler-vue的全局异常
在MVVM框架中使用window.onerror来捕获异常，大概率捕获不到，因为你的异常信息被框架自身的异常机制捕获了。vue中的错误将会被传递至全局 Vue.config.errorHandler 配置函数。
Vue.config.errorHandler = (err, vm, info) => {
console.error('通过vue errorHandler捕获的错误');
console.error(err);
console.error(vm);
console.error(info);
}
ErrorBoundary-React的全局异常
和vue的原理是类似的，在React中可以使用ErrorBoundary组件捕获异常
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
网友评论