我成了IE狗！！！9月初，新项目正式上线，产品以客户端形式发布。目前以.NETWebBrowser内嵌网页形式开发。对于后端，一切都是那么的自然和简单；但对于前端而言，它彻底把我带入了IE的黑洞，从此一去不复返了！说实话，我内心是很鄙视这个WebBrowser的，因为Windows绑定了IE，而WebBrowser默认使用的是IE内核。按理说大多数系统都是win7及以上的，那为什么这个内核大多是IE9+呢？重装非正版阉割系统。可恶的是WebBrowser即使在这些系统中安装了win7和IE11也被调整为IE7。可恶的是程序控制不了！不好的是调用的IE7和浏览器的IE7不一样。我称之为非7非8。有时候在IE7浏览器里看到类似的东西，黑壳里弹出的检测结果是IE7。貌似和浏览器不一样，完全（想骂人。。。）不在套路里！而且没有控制台，任何异常，不管对程序有没有影响，都会弹出烦人的脚本错误提示框！由于我是在浏览器上调试开发的，所以一开始并不知道会出现这些问题。纵然我当时是兼容IE7的，但就是shell问题乱七八糟！那时候，每天下班回家躺在床上，都怀疑自己的前端之路是不是走进了死胡同，根本看不到光。爽不爽，大前端呢？尼玛，这是什么鬼？欣慰的是后端同学们都在积极研究如何切换到webkitshell。由于一些不可预知的问题，加上项目太紧，到现在为止，我还是天天面对IE7891011。....不要阻止我。..让我哭一会儿。..也就是说，你还是要做一个坚强的孩子！在自己选择的道路上，无论多苦多累，都要咬紧牙关走完；一方面，兼容性问题在前端不可避免；另一方面，既然目前没有更好的解决办法，只能靠自己一步步走下去了；老天不负有心人，终于让我磨出一个ErrorInspector模块！基于以上令人痛恨人生的问题，首先解决以下问题：1、对IE7的兼容；2、异常反馈与跟踪（支持跨域）；3.屏蔽烦人的脚本错误提示框；4.1.跨终端，比如丑陋无用的IEshell，无法调试；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上做更多的工作，比如图形化的分析展示，常见错误解决方案的预测和提示，如果是在线的在线采集站，也可以对错误和解决方案进行分类收集，供读者参考；总之，面对错误，就去做吧！因为问题终于反馈给我了，不存在浏览器兼容性问题，当然选择最OkGoogle吧，BSIE！！！;没有做太多的优化，第一个版本的错误反馈显示的页面大概是这样傻的：当然，图片是测试的结果，每次展开都有更多错误的细节，包括文件地址，行number,Errortype,browserversion,time,page,triggernode等。其实发现window.onerror抓到的error并不总是很详细。最好使用封装好的try_catch主动上报，这样更容易定位错误源，使用try_catch是个好习惯；因为难免有跨域的问题，默认使用newImage的方法是GETnumber根据，当然这个不是必须的，支持自定义举报地址和举报方式；至于屏蔽烦人的脚本错误提示框，其实很简单，只要在window.onerror最后返回true即可，但是在Google中会屏蔽控制台输出的内容，最好在线上使用环境。毕竟本地开发要在控制台调试；由于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){});//...这么多用法，每次都捕获错误事件，然后上报，肯定是相当不靠谱的；jquery非常好用，通过设置全局错误事件就可以捕捉到以上各种方式的错误，你开心吗？例如：$.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.最好放在各大库的后面，自己写的JS的前面，因为框架本身一般不会出错，主要是监控代码中可能存在的意外异常你写;2.初始配置：ErrorInspector.Config={url:'http://localhost:2333/ErrorInspector/xiaofeng',//报错地址qs:{id:location.host,//默认当前域为idpage:location.host+location。pathname,//错误页面地址from:Url,//错误源地址row:Number,//错误行号col:Number,//错误列号msg:String,//错误详情browser:util.Browser,//browser类型和版本，默认几大主流浏览器，后续改进time:util.fmtTime(),//触发错误的时间inspector:String,//Reporterwindow|user|log......//...其他参数ext:'hufeng'//扩展参数},$:{timeout:Number,//Jquery的Ajax超时设置会触发onErroronError:function(xhr){}//全局Jquery的Ajax错误捕获},submit:function(data){},//自定义上报方式，回调上报内容??IgnoreFromJSPattern:/reg/ig,//屏蔽错误来源地址，如第三方广告IgnoreMsgPattern:/reg/ig,//屏蔽报文内容，比如script.errorIgnoreBrowserError:0|1意义不大//是否屏蔽控制台，主要是为了屏蔽IE上烦人的弹框}ErrorInspector.Config.qs一般不需要询问ErrorInspector.Config.qs中的参数，触发错误时会自行收集上报；3.试试看（函数（报告，日志）{}）；封装了try_catch，回调ErrorInspector.report和ErrorInspector.log实际上是类似的，除了try_catch中的报告，可以使用回调值继续自定义报告；一般用这个函数来包裹代码块；4.ErrorInspector.report({name:value});主动报告；5、错误检查器日志；模拟了一个简单的console.log，其实更像是一个alert，可以作为一个统计代码，可能需要改进；6.后端使用了Express和Socket.io，玩过H5的webSocket的同学立马明白，不解释；这几天IE比较忙，例子都没整理出来，唉，其实IE也没那么可怕！ErrorInspector.js仅供分享，功能有限。欢迎改进！github地址：https://github.com/famanoder/...如果你已经在路上，勇敢前行吧！原文来自：http://famanoder.com/bokes/58...
