成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

FE.B-異常監(jiān)控原理

caikeal / 1489人閱讀

摘要：錯誤主要有類語法錯誤腳本錯誤監(jiān)控方式有種異常處理處理異常的能力有限，只能捕獲到運(yùn)行時的非異步錯誤，對于語法錯誤和異步錯誤就顯得無能為力。

js錯誤主要有2類：語法錯誤、腳本錯誤;
監(jiān)控方式有2種：try-catch、window.onerror

try-catch 異常處理

try-catch處理異常的能力有限，只能捕獲到運(yùn)行時的非異步錯誤，對于語法錯誤和異步錯誤就顯得無能為力。

try{
error // <- 未定義變量
} catch(e) {
console.log("捕獲到錯誤");
console.log(e);
}
//輸出:
//ReferenceError: error is not defined
try {
var error = "error"； // <-大寫分號
} catch(e) {
console.log("捕獲不到錯誤");
console.log(e);
}
//輸出：
//Uncaught SyntaxError: Invalid or unexpected token
try{
setTimeout(function () {
error // <- 異步錯誤
}, 0)
} catch(e) {
console.log("捕獲不到錯誤");
console.log(e);
}
//輸出：
//Uncaught ReferenceError: error is not defined
window.onerror 異常處理

window.onerror 捕獲異常的能力比 try-catch稍強(qiáng)一點(diǎn)，無論是異步還是非異步的錯誤，onerror都能捕獲到運(yùn)行時的錯誤

/**
 * @param {String}  msg    錯誤信息
 * @param {String}  url    出錯文件
 * @param {Number}  row    行號
 * @param {Number}  col    列號
 * @param {Object}  error  錯誤詳細(xì)信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log("捕獲到運(yùn)行時同步錯誤了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error; // <- 未定義變量
//輸出：
//捕獲到錯誤了
//{msg: "Uncaught ReferenceError: error is not defined", ...}
 window.onerror = function (msg, url, row, col, error) {
  console.log("捕獲到異步錯誤了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error; // <- 未定義變量
});
//輸出：
//捕獲到異步錯誤了
//{msg: "Uncaught ReferenceError: error is not defined", ...}

在實(shí)際使用中，onerror主要用來捕獲預(yù)料之外的錯誤，try-catch則是用來在可預(yù)見情況下監(jiān)控特定的錯誤，兩者結(jié)合使用更加高效

但是對于語法錯誤，window.onerror還是捕獲不了，所以我們在寫代碼的時候要盡可能避免語法錯誤，不過一般這種錯誤比較容易察覺。

除了語法錯誤不能捕獲之外，網(wǎng)絡(luò)異常的錯誤也是不能捕獲的



輸出：
GET http://localhost:8081/404.jpg 404 (Not Found)

這是因?yàn)榫W(wǎng)絡(luò)請求是沒有事件冒泡的，所以需要在捕獲階段才能捕獲到異常，雖然這樣可以捕獲到網(wǎng)絡(luò)的異常，但無法判斷http的狀態(tài)，比如該異常是404還是500，想要知道這個狀態(tài)就必須和服務(wù)日志一起排查了。



輸出：
GET http://localhost:8081/404.jpg 404 (Not Found)
我知道錯誤了
{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}

Promise的錯誤沒有使用catch去捕獲的話，上述的方式都是不能捕獲到錯誤的。但通過監(jiān)聽unhandledrejection事件，可以捕獲未處理的Promise錯誤。但是需要注意的是，這個事件是有兼容問題的。

window.addEventListener("unhandledrejection", function(e){
    e.preventDefault()
    console.log("我知道 promise 的錯誤了");
    console.log(e.reason);
    return true;
});
new Promise((resolve, reject) => {
    reject("promise error");
});
輸出：
我知道 promise 的錯誤了
promise error

說完這些捕獲異常的方式之后，該說說異常上報的常用方法了。

異常上報

當(dāng)我們拿到報錯信息之后，就需要上報這些異常信息，我們上報的方式通常有兩種方法：

通過Ajax發(fā)送數(shù)據(jù)

通過動態(tài)創(chuàng)建img標(biāo)簽的形式

function report(error) {
  var reportUrl = "http://xxxx/report";
  new Image().src = reportUrl + "error=" + error;
}
script error 腳本錯誤

在一個域下引用了其他域的腳本，又沒有去做額外的配資，就很容易產(chǎn)生Script error。說到最后這就是因?yàn)闉g覽器的同源策略產(chǎn)生的。所以最好我們還是使用跨源資源共享機(jī)制( CORS )

// http://localhost:8080/index.html



// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101584.html

相關(guān)文章

  • FE.B-前端性能優(yōu)化

    摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二 http 緩存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

    Anshiii 評論0 收藏0

  • FE.B-前端性能優(yōu)化

    摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二 http 緩存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

    Scliang 評論0 收藏0

  • FE.B-前端性能優(yōu)化

    摘要：緩存長緩存隨機(jī)名字長緩存策略可并行請求數(shù)避免重定向，一次重定向至少瀏覽器緩存不超過數(shù)據(jù)不安全存取防止出錯關(guān)閉瀏覽器失效合理減少視覺交互反饋節(jié)流，防抖視覺欺詐分頁預(yù)加載資源圖片，慎用編碼響應(yīng)式圖像字體異步加載異步加載其他系列二 http 緩存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

    tyheist 評論0 收藏0

  • vivo統(tǒng)一告警平臺設(shè)計(jì)與實(shí)踐

    摘要：告警當(dāng)一個問題通過告警系統(tǒng)將消息以短信電話郵件等方式告知給用戶時，我們稱之為一條告警。圖統(tǒng)一告警系統(tǒng)結(jié)構(gòu)圖告警收斂對于告警平臺每天會產(chǎn)生數(shù)以萬計(jì)的告警，這些告警對于運(yùn)維或開發(fā)人員都需要去分析甄別優(yōu)先級并處理故障。 一、背景一套監(jiān)控系統(tǒng)檢測和告警是密不可分的，檢測用來發(fā)現(xiàn)異常，告警用來將問題信息發(fā)送給相應(yīng)的人。v...

    Rocko 評論0 收藏0

發(fā)表評論

0條評論

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