摘要：我已淪為狗從月份一開始，新項(xiàng)目正式啟動(dòng)，產(chǎn)品以客戶端的形式發(fā)布，目前用的是的內(nèi)嵌網(wǎng)頁的形式開發(fā)，對于后端來說，一切都是那么自然簡單可對于前端來說，徹底將我?guī)氲搅说暮诙矗源巳f劫不復(fù)說實(shí)話，我內(nèi)心無比鄙視這個(gè)，因?yàn)榻壎?，默認(rèn)使用內(nèi)核，按理

我已淪為IE狗?。?！

從9月份一開始，新項(xiàng)目正式啟動(dòng)，產(chǎn)品以客戶端的形式發(fā)布，目前用的是.NET的WebBrowser內(nèi)嵌網(wǎng)頁的形式開發(fā)，對于后端來說，一切都是那么自然、簡單；可對于前端來說，徹底將我?guī)氲搅薎E的黑洞，自此萬劫不復(fù)！說實(shí)話，我內(nèi)心無比鄙視這個(gè)WebBrowser，因?yàn)閣indows綁定了IE，WebBrowser默認(rèn)使用IE內(nèi)核，按理說現(xiàn)在win7及以上系統(tǒng)居多，所以這個(gè)內(nèi)核怎么也是IE9+居多才對啊，可惡的是，眾多系統(tǒng)都是重裝的非正版閹割后的系統(tǒng)，可惡的是，WebBrowser在這些系統(tǒng)哪怕是裝的win7、IE11都調(diào)的是IE7，可惡的是程序?qū)ζ洳豢煽?！可惡的是這個(gè)調(diào)用的IE7與瀏覽器的IE7還不太一樣，我叫它非7非8，有時(shí)我在IE7瀏覽器里看到一個(gè)樣子，到了黑殼子里彈出檢測結(jié)果是IE7，樣子居然和瀏覽器上不一樣，完全（想罵人。。。）不在套路上！而且沒有控制臺(tái)，任意一個(gè)異常，無論是否影響程序，都會(huì)彈出一個(gè)討人厭的腳本錯(cuò)誤的提示框！由于我在瀏覽器上調(diào)試和開發(fā)的，所以一開始并不知道會(huì)有這些問題，即便當(dāng)時(shí)我兼容到了IE7，到了殼子里面又是一番烏七八糟的問題！當(dāng)時(shí)每天下班回家躺在床上，我都在懷疑自己的前端之路是不是走進(jìn)了一條死胡同，完全看不到光，說好的炫酷呢，說好的大前端呢？尼瑪這都什么鬼？

欣慰的是后端同學(xué)在積極研究怎么切換到webkit的殼子，基于一些不可預(yù)知的問題，以及項(xiàng)目催的太緊，到目前為止，我依然天天面對著IE7891011。。。。。不要攔我。。。讓我哭會(huì)兒。。。

話說還是要做個(gè)堅(jiān)強(qiáng)的孩子！自己選擇的路，再苦再累也要咬牙走完呀；一方面，兼容問題是前端不可避免的問題；另一方面，既然眼下沒有更好的方案，只有靠自己一步步走穩(wěn)腳下的路了；

皇天不負(fù)苦心人，終于讓我磨出了一個(gè)ErrorInspector模塊！

基于以上可惡的讓人懷疑人生的問題，首先解決以下問題：

1、兼容到IE7；

2、異常的反饋與追蹤（支持跨域）；

3、屏蔽掉那個(gè)討人厭的腳本錯(cuò)誤提示框；

4、要跨終端，比如那個(gè)丑的不要的IE殼子，不可調(diào)試；

5、錯(cuò)誤實(shí)時(shí)上報(bào)并通知和展示；

6、一并追蹤與后端交互的錯(cuò)誤，比如：500、404，把Jquery的ajax拉進(jìn)來；

7、包裝try_catch，多用try_catch；

由于要兼容到IE7，那么基礎(chǔ)庫用Jquery肯定最好了，加上自己平時(shí)造的一些模塊和組件以及Jquery的插件，基本夠開發(fā)用了；可憐的我再次與牛逼的React、Angular擦肩而過了；現(xiàn)在以Nodejs的模塊化方式開發(fā)，用webpack打包合并，目前感覺還湊合；

最初的想法是，通過window.onerror和try_catch捕獲并上報(bào)錯(cuò)誤到一個(gè)獨(dú)立的錯(cuò)誤收集站點(diǎn)，不需要后端配合，自己用Express造一個(gè)簡單的站點(diǎn)就是，通過H5的webSocket和Node的Socket.io實(shí)時(shí)響應(yīng)上報(bào)的錯(cuò)誤，如果已打開瀏覽器端無需刷新即可收到通知，或者直接發(fā)送郵件提示，達(dá)到跨終端實(shí)時(shí)追蹤上報(bào)；如果可以的話，在Web上可以做更多工作，比如，圖形化分析和展示，常見錯(cuò)誤的解決方法的預(yù)測和提示，如果是線上收集站點(diǎn)還可以對錯(cuò)誤極其解決方法做分類收集，供瀏覽者參考；總之，face to error,just do it !

因?yàn)閱栴}最終上報(bào)到我這，所以就不存在瀏覽器兼容問題了，當(dāng)然選最好的谷歌了，BSIE?。。?；沒做太多優(yōu)化，第一版錯(cuò)誤反饋展示的頁面大概是這個(gè)傻樣子：

當(dāng)然，圖片里是測試的結(jié)果，每條展開有更多錯(cuò)誤的詳情，包括錯(cuò)誤引發(fā)的文件地址、行號(hào)、錯(cuò)誤類型、瀏覽器版本、時(shí)間、所在頁面、觸發(fā)節(jié)點(diǎn)等；實(shí)際發(fā)現(xiàn)，window.onerror捕獲的錯(cuò)誤并不總是很詳細(xì)，最好是多用包裝好的try_catch去主動(dòng)上報(bào)，才會(huì)比較容易定位錯(cuò)誤源，多用try_catch是個(gè)好習(xí)慣；因?yàn)殡y免存在跨域的問題，默認(rèn)使用new Image的方式GET數(shù)據(jù)，當(dāng)然，這不是必須的，支持自定義上報(bào)地址和上報(bào)方法；至于屏蔽掉那個(gè)討人厭的腳本錯(cuò)誤提示框，其實(shí)很簡單，在window.onerror最后return true就是的，但是在谷歌里就會(huì)屏蔽掉控制臺(tái)輸出的內(nèi)容，最好在線上環(huán)境使用，畢竟本地開發(fā)還得在控制臺(tái)里調(diào)試；

由于Jquery的Ajax使用特別靈活，所以做好全局去捕獲Ajax與后端交互的錯(cuò)誤；看看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事件，然后在里面上報(bào)，肯定是相當(dāng)不靠譜的；Jquery是很好用的，可以通過設(shè)置全局的error事件來捕獲上面各種方式下的錯(cuò)誤，爽不爽？比如這樣：

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

不過這種錯(cuò)誤一般后端的可能性大些，前端常見的就是這里的參數(shù)沒傳好，引發(fā)的后端錯(cuò)誤，當(dāng)然可以選擇屏蔽不上報(bào)，或簡單的提示個(gè)服務(wù)器異常就行了；

ErrorInspector的用法：

1、最好放在各大library的后面，你寫的JS前面，因?yàn)榭蚣鼙旧硪话悴粫?huì)引發(fā)錯(cuò)誤，主要是監(jiān)控自己寫的代碼可能存在的未預(yù)知的異常；

2、初始化配置：

ErrorInspector.Config={
    url:"http://localhost:2333/ErrorInspector/xiaofeng",   //上報(bào)地址
    qs:{
        id:location.host,            //默認(rèn)以當(dāng)前域?yàn)閕d
        page:location.host+location.pathname,//錯(cuò)誤頁面地址
        from:Url,                    //錯(cuò)誤來源的地址
        row:Number,                  //錯(cuò)誤行號(hào)
        col:Number,                  //錯(cuò)誤列號(hào)
        msg:String,                  //錯(cuò)誤詳情
        browser:util.Browser,        //瀏覽器類型及版本，默認(rèn)幾大主流瀏覽器，后續(xù)完善
        time:util.fmtTime(),         //錯(cuò)誤觸發(fā)的時(shí)間
        inspector:String,            //上報(bào)者window|user|log......
        // ...其他參數(shù)
        ext:"hufeng"                 //擴(kuò)展的參數(shù)
    },
    $:{
        timeout:Number,              //Jquery的Ajax超時(shí)設(shè)置，會(huì)觸發(fā)onError
        onError:function(xhr){}      //全局的Jquery的Ajax錯(cuò)誤捕獲
    },
        submit:function(data){},         //自定義上報(bào)方式，回調(diào)了上報(bào)內(nèi)容     
    IgnoreFromJSPattern:/reg/ig,     //屏蔽錯(cuò)誤來源的地址，比如第三方的廣告
    IgnoreMsgPattern:/reg/ig,        //屏蔽上報(bào)的消息內(nèi)容，比如沒太大意義的script.error
    IgnoreBrowserError:0|1           //是否屏蔽控制臺(tái)，主要屏蔽掉那個(gè)IE上討厭的彈框
}

ErrorInspector.Config.qs里的參數(shù)一般無需過問，錯(cuò)誤觸發(fā)時(shí)會(huì)自己收集上報(bào)；

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

包裝好的try_catch，回調(diào)的ErrorInspector.report和ErrorInspector.log其實(shí)大同小異，除了try_catch里的上報(bào)外，可以用回調(diào)值繼續(xù)自定義上報(bào)；一般用這個(gè)函數(shù)包裝代碼塊；

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

主動(dòng)上報(bào)；

5、ErrorInspector.log;

模擬簡單的console.log，其實(shí)更像alert，可以充當(dāng)統(tǒng)計(jì)代碼用，或許還需改進(jìn)；

6、后端使用Express和Socket.io，玩過H5的webSocket的同學(xué)立馬就懂了，不解釋；

這些天被IE忙活壞了，例子未整理，唉，其實(shí)IE并非那么可怕！ErrorInspector.js僅作分享，能力有限，歡迎改進(jìn)！github地址：https://github.com/famanoder/...

如果你已在路上，就勇敢的向前吧！

原文來自：http://famanoder.com/bokes/58...