国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端異常 — 跨終端實時追蹤

yankeys / 2142人閱讀

摘要:我已淪為狗從月份一開始,新項目正式啟動,產品以客戶端的形式發布,目前用的是的內嵌網頁的形式開發,對于后端來說,一切都是那么自然簡單可對于前端來說,徹底將我帶入到了的黑洞,自此萬劫不復說實話,我內心無比鄙視這個,因為綁定了,默認使用內核,按理

我已淪為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/...

如果你已在路上,就勇敢的向前吧!

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81059.html

相關文章

  • [ 好文分享 ] 美團酒店Node全棧開發實踐

    摘要:我所在的美團酒店事業部去年月份成立,新的業務新的開發團隊,這一切使得我們的前后端分離推進的很徹底。日志監控平臺日志監控平臺是美團內部的一個日志收集系統,目前美團統一使用收集日志,具有接收格式日志的能力,而日志監控平臺也是以格式日志來收集。 轉自:美團技術團隊 作者:美團技術團隊 分享理由:很好的分享,可見,基于Node的前后端分離的架構是越顯流行和重要,前端攻城獅們,No...

    wangdai 評論0 收藏0
  • Web 前端中的增強現實(AR)開發技術

    摘要:增強現實以下簡稱浪潮正滾滾而來,瀏覽器作為人們最唾手可得的人機交互終端,正在大力發展技術。目前年底前端要想實現,都是靠的視頻透視式技術。但這兩個都是移動的,于是谷歌的團隊提供了和兩個庫,以便開發者能用技術來基于和開發,從而實現。 本文作者 GeekPlux,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development...

    Jochen 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<