前端非常—跨终端及时追踪

我已沦为IE狗！！！

从9月份一开始，新项目正式启动，产物以客户端的情势宣布，如今用的是.NET的WebBrowser内嵌网页的情势开辟，关于后端来讲，一切都是那末天然、简朴；可关于前端来讲，完整将我带入到了IE的黑洞，自此万劫不复！说实话，我心田非常蔑视这个WebBrowser，因为windows绑定了IE，WebBrowser默许运用IE内核，按理说如今win7及以上体系占多数，所以这个内核怎样也是IE9+占多数才对啊，可恶的是，浩瀚体系都是重装的非正版阉割后的体系，可恶的是，WebBrowser在这些体系哪怕是装的win7、IE11都调的是IE7，可恶的是顺序对其不可控！可恶的是这个挪用的IE7与阅读器的IE7还不太一样，我叫它非7非8，偶然我在IE7阅读器里看到一个模样，到了黑壳子里弹出检测效果是IE7，模样竟然和阅读器上不一样，完整（想骂人。。。）不在套路上！而且没有控制台，恣意一个非常，不管是不是影响顺序，都邑弹出一个讨人厌的剧本毛病的提醒框！因为我在阅读器上调试和开辟的，所以一开始并不知道会有这些题目，即使当时我兼容到了IE7，到了壳子内里又是一番乱七八糟的题目！当时每天放工回家躺在床上，我都在疑心自身的前端之路是不是是走进了一条死胡同，完整看不到光，说好的炫酷呢，说好的大前端呢？尼玛这都什么鬼？

欣喜的是后端同砚在主动研讨怎样切换到webkit的壳子，基于一些不可预知的题目，以及项目催的太紧，到如今为止，我依旧每天面对着IE7891011。。。。。不要拦我。。。让我哭会儿。。。

话说照样要做个顽强的孩子！自身挑选的路，再苦再累也要咬牙走完呀；一方面，兼容题目是前端不可避免的题目；另一方面，既然眼下没有更好的计划，只要靠自身一步步走稳脚下的路了；

皇天不负苦心人，终究让我磨出了一个ErrorInspector模块！

基于以上可恶的让人疑心人生的题目，起首处理以下题目：

1、兼容到IE7；

2、非常的反应与追踪（支撑跨域）；

3、屏障掉谁人讨人厌的剧本毛病提醒框；

4、要跨终端，比方谁人丑的不要的IE壳子，不可调试；

5、毛病及时上报并关照和展现；

6、一并追踪与后端交互的毛病，比方：500、404，把Jquery的ajax拉进来；

7、包装try_catch，多用try_catch；

因为要兼容到IE7，那末基础库用Jquery一定最好了，加上自身日常平凡造的一些模块和组件以及Jquery的插件，基础够开辟用了；不幸的我再次与牛逼的React、Angular擦肩而过了；如今以Nodejs的模块化体式格局开辟，用webpack打包兼并，如今觉得还拼集；

最初的主意是，经由过程window.onerror和try_catch捕捉并上报毛病到一个自力的毛病网络站点，不需要后端合营，自身用Express造一个简朴的站点就是，经由过程H5的webSocket和Node的Socket.io及时相应上报的毛病，假如已翻开阅读器端无需革新即可收到关照，也许直接发送邮件提醒，到达跨终端及时追踪上报；假如能够的话，在Web上能够做更多事情，比方，图形化剖析和展现，罕见毛病的处理要领的展望和提醒，假如是线上网络站点还能够对毛病极为处理要领做分类网络，供阅读者参考；总之，face to error,just do it !

因为题目终究上报到我这，所以就不存在阅读器兼容题目了，固然选最好的谷歌了，BSIE！！！；没做太多优化，初版毛病反应展现的页面大概是这个傻模样：

固然，图片里是测试的效果，每条睁开有更多毛病的概况，包含毛病激发的文件地点、行号、毛病范例、阅读器版本、时候、地点页面、触发节点等；现实发明，window.onerror捕捉的毛病并不老是很细致，最好是多用包装好的try_catch去主动上报，才会比较轻易定位毛病源，多用try_catch是个好习惯；因为不免存在跨域的题目，默许运用new Image的体式格局GET数据，固然，这不是必需的，支撑自定义上报地点和上报要领；至于屏障掉谁人讨人厌的剧本毛病提醒框，实在很简朴，在window.onerror末了return true就是的，但是在谷歌里就会屏障掉控制台输出的内容，最好在线上环境运用，毕竟当地开辟还得在控制台里调试；

因为Jquery的Ajax运用迥殊天真，所以做好全局去捕捉Ajax与后端交互的毛病；看看Jquery的Ajax罕见用法：

// 以GET为例
$.ajax({
url:'',
success:function(data){},
error:function(){}
});
$.get(url,data,function(data){});
$.get(url,data).success(function(data){}).error(function(){});
$.get(url,data).then(function(data){},function(err){});
// ...

这么多种用法，每次都去捕捉error事宜，然后在内里上报，一定是相称不靠谱的；Jquery是很好用的，能够经由过程设置全局的error事宜来捕捉上面各种体式格局下的毛病，爽不爽？比方如许：

$.ajaxSetup({
timeout:setAjax.$.timeout,
error: function(xhr){
setTimeout(function () {
util.getArgType(setAjax.$.onError)=='function'?setAjax.$.onError(xhr):alert(xhr.status+'，'+xhr.statusText);
}, 1);
}
});

不过这类毛病平常后端的能够性大些，前端罕见的就是这里的参数没传好，激发的后端毛病，固然能够挑选屏障不上报，或简朴的提醒个服务器非常就好了；

ErrorInspector的用法：

1、最好放在各大library的背面，你写的JS前面，因为框架自身平常不会激发毛病，主如果监控自身写的代码能够存在的未预知的非常；

2、初始化设置：

ErrorInspector.COnfig={
url:'http://localhost:2333/ErrorInspector/xiaofeng', //上报地点
qs:{
id:location.host, //默许以当前域为id
page:location.host+location.pathname,//毛病页面地点
from:Url, //毛病泉源的地点
row:Number, //毛病行号
col:Number, //毛病列号
msg:String, //毛病概况
browser:util.Browser, //阅读器范例及版本，默许几大主流阅读器，后续完美
time:util.fmtTime(), //毛病触发的时候
inspector:String, //上报者window|user|log......
// ...其他参数
ext:'hufeng' //扩大的参数
},
$:{
timeout:Number, //Jquery的Ajax超时设置，会触发onError
onError:function(xhr){} //全局的Jquery的Ajax毛病捕捉
},
submit:function(data){}, //自定义上报体式格局，回调了上报内容
IgnoreFromJSPattern:/reg/ig, //屏障毛病泉源的地点，比方第三方的广告
IgnoreMsgPattern:/reg/ig, //屏障上报的音讯内容，比方没太大意义的script.error
IgnoreBrowserError:0|1 //是不是屏障控制台，重要屏障掉谁人IE上憎恶的弹框
}

ErrorInspector.Config.qs里的参数平常无需干涉，毛病触发时会自身网络上报；

3、Tryit(function(report,log){});

包装好的try_catch，回调的ErrorInspector.report和ErrorInspector.log实在迥然不同，除了try_catch里的上报外，能够用回调值继承自定义上报；平常用这个函数包装代码块；

4、ErrorInspector.report({name:value});

主动上报；

5、ErrorInspector.log;

模仿简朴的console.log，实在更像alert，能够充任统计代码用，也许还需革新；

6、后端运用Express和Socket.io，玩过H5的webSocket的同砚立马就懂了，不诠释；

这些天被IE忙活坏了，例子未整理，唉，实在IE并不是那末恐怖！ErrorInspector.js仅作分享，才能有限，迎接革新！github地点：https://github.com/famanoder/&＃8230;

假如你已在路上，就英勇的向前吧！

原文来自：http://famanoder.com/bokes/58&＃8230;