浅层入门的前端监控系统落地后台前端代码不像java等后端语言运行在自己的服务器上，出错可以直接捕获生成日志，前端代码运行在客户端，错误发生时前端工程师无法知道什么时候出错。前端开发者在应用本系统前获取用户端错误信息的方式是这样的：作为一名合格的前端工程师，本着认真负责的态度，开发了一套属于自己的前端监控系统对项目（技术驱动）一方面，可以促进项目更加完善，增加用户体验。另一方面，学习错误捕获机制可以让我们更加了解JavaScript语言。架构前端SDK使用TypeScript开发，保证代码规范，使用gulp作为代码打包压缩工具。代码构建完成后上传到npm，供前端业务使用。SDK部分主要API的实现：前端资源、img、css、script等的错误捕获window.addEventListener('error',function(e){leterrorData={errorType:'resource',msg:e.target['localName']，目标：e.target['localName']，类型：e.type，resourceUrl：e.target['href']||e.target['currentSrc']||e.目标['src']};},真);捕获前端语法错误window.onerror=function(msg,_url,line,col,error){setTimeout(function(){col=col||(window.event&&window.event['errorCharacter'])||0;leterrorData={errorType:'grammar',msg:error&&error.stack?error.stack.toString():msg,resourceUrl:_url,line:line,col:col,}};};捕获承诺错误window.addEventListener('unhandledrejection',function(e){letresourceUrl,col,line,error=e&&e.reason,message=error.message||'',stack=error.stack||'',errs=stack.match(/\(.+?\)/);如果（错误&＆错误。长度）错误=错误[0]；错误=错误。替换(/\w.+[js|html]/g,$1=>{resourceUrl=$1;return'';});错误=错误。分裂（'：'）;如果(errs&&errs.length>1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0);leterrorData={errorType:'grammar',msg:message,resourceUrl:resourceUrl,line:col,col:line,type:e.type}})来捕获ajax错误虽然xhr.readyState===4写在comment，这里特别重要，可以判断接口成功但不正常。正常结果}elseif(xhr.readyState===4&&xhr.xhr.status!==200){}},onerror:function(xhr){ajaxResponse(xhr)},onload:function(xhr){if(xhr.readyState===4){if(xhr.status<200||xhr.status>300){xhr.方法=xhr。参数。方法}}},open:function(arg,xhr){letresult={url:arg[1].split('?')[0],方法:arg[0]||'GET',type:'xmlhttprequest'}this.args=result}})//ajax重写函数_Ajax(proxy){window['_ahrealxhr']=window['_ahrealxhr']||XMLHttpRequest；//@ts-ignoreXMLHttpRequest=function(){this.xhr=newwindow['_ahrealxhr'];for(varattrinthis.xhr){vartype="";try{type=typeofthis.xhr[attr]}catch(e){}if(type==="function"){this[attr]=hookfun(attr);}else{Object.defineProperty(this,attr,{get:getFactory(attr),set:setFactory(attr)})}}}functiongetFactory(attr){returnfunction(){varv=this.hasOwnProperty(attr+“_”）？这[属性+“_”]：this.xhr[属性]；varattrGetterHook=(proxy[attr]||{})["getter"]returnattrGetterHook&&attrGetterHook(v,this)||v}}functionsetFactory(attr){returnfunction(v){varxhr=this.xhr;那个=这个；varhook=proxy[attr];if(typeofhook==="function"){xhr[attr]=function(){proxy[attr](that)||v.apply(xhr,参数);}}else{varattrSetterHook=(hook||{})["setter"];v=attrSetterHook&&attrSetterHook(v,那)||v尝试{xhr[attr]=v;}catch(e){this[attr+"_"]=v;}}}}functionhookfun(fun){returnfunction(){varargs=[].slice.call(arguments)if(proxy[fun]&&proxy[fun].call(this,args,this.xhr)){返回;}返回this.xhr[fun].apply(this.xhr,args);}}returnwindow['_ahrealxhr'];}数据上报：//1.使用图片src进行数据上报letsendData=newImage();secdData.src=`${地址?数据}`//2.使用Navigator.sendBeaconNodeJS服务端采用经典的MVC结构，框架采用KOA2、pm2进行进程守护，数据仓库采用MySQL作为管理后台。React以React作为管理后台来概括这个业务支持服务。协调，同时做自己想做的项目没有上层的压力，自主权也比较大。我一直认为第一个版本可以尽快推出。感谢前端同学JGT（拼音名字的缩写）的鼓励与配合。目前第一版已稳定上线，服务于公司多个业务。后续还有一些细节需要优化，会加入一些新的思路。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎在github上star，这也是对作者的一种鼓励。
