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

資訊專欄INFORMATION COLUMN

FE.B-異常監控原理

caikeal / 1476人閱讀

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

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

try-catch 異常處理

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

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稍強一點，無論是異步還是非異步的錯誤，onerror都能捕獲到運行時的錯誤

/**
 * @param {String}  msg    錯誤信息
 * @param {String}  url    出錯文件
 * @param {Number}  row    行號
 * @param {Number}  col    列號
 * @param {Object}  error  錯誤詳細信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log("捕獲到運行時同步錯誤了");
  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", ...}

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

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

除了語法錯誤不能捕獲之外，網絡異常的錯誤也是不能捕獲的



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

這是因為網絡請求是沒有事件冒泡的，所以需要在捕獲階段才能捕獲到異常，雖然這樣可以捕獲到網絡的異常，但無法判斷http的狀態，比如該異常是404還是500，想要知道這個狀態就必須和服務日志一起排查了。



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

Promise的錯誤沒有使用catch去捕獲的話，上述的方式都是不能捕獲到錯誤的。但通過監聽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

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

異常上報

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

通過Ajax發送數據

通過動態創建img標簽的形式

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

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

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



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

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

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

相關文章

  • FE.B-前端性能優化

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

    Anshiii 評論0 收藏0

  • FE.B-前端性能優化

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

    Scliang 評論0 收藏0

  • FE.B-前端性能優化

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

    tyheist 評論0 收藏0

  • vivo統一告警平臺設計與實踐

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

    Rocko 評論0 收藏0

發表評論

0條評論

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