前端错误在线发生在PC端和移动端,很难查看错误,尤其是在用户真实设备的移动端,很难定位错误。为了更好的解决线上问题,需要在前端收集并上报错误信息,然后传递。结束接口将错误传递给日志记录。下面主要分为资源加载错误和运行时错误。监听代码错误然后调用请求上报方法传递错误信息和设备信息:,phoneinfo:document.documentElement.clientWidth+"x"+document.documentElement.clientHeight,deviceinfo:scriptURI+"line:"+lineNumber,});//无法监听资源加载异常};ListenResource错误,在上报之前过滤掉一些其他错误instanceofHTMLScriptElement||targetinstanceofHTMLLinkElement||targetinstanceofHTMLImageElement;if(!isElementTarget)returnfalse;...},true);最后通过接口将错误信息传递给后端完成代码:(函数collectExceptionon(){//前端错误收集上报window.addEventListener("error",function(event){//过滤掉监听到的代码逻辑错误lettarget=event.target||event.srcElement;letisElementTarget=HTMLScriptElement目标实例||HTMLLinkElement目标实例||HTMLImageElement目标实例;??如果(!isElementTarget)返回false;reportException({exceptionmsg:event.type,appinfo:window.navigator.userAgent,phoneinfo:document.documentElement.clientWidth+"x"+document.documentElement.clientHeight,deviceinfo:event.target.src,});},true);window.onerror=function(errorMessage,scriptURI,lineNumber,columnNumber,errorObj){reportException({exceptionmsg:errorMessage,appinfo.navig.window:窗口userAgent,phoneinfo:document.documentElement.clientWidth+"x"+document.documentElement.clientHeight,德维ceinfo:scriptURI+"line:"+lineNumber,});//无法监听资源加载异常};functionreportException(info){$.ajax({type:"POST",url:"ip/bug/add",contentType:"application/json",dataType:"json",data:JSON.stringify(info),success:function(reponse){},error:function(e){console.log("Errorreportingfailed/bug/add");},});}})();
