成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

caikeal / 1527人閱讀

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

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

try-catch 異常處理

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

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

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

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

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

但是對(duì)于語(yǔ)法錯(cuò)誤，window.onerror還是捕獲不了，所以我們?cè)趯懘a的時(shí)候要盡可能避免語(yǔ)法錯(cuò)誤，不過(guò)一般這種錯(cuò)誤比較容易察覺(jué)。

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


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

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


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

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

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

說(shuō)完這些捕獲異常的方式之后，該說(shuō)說(shuō)異常上報(bào)的常用方法了。

異常上報(bào)

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

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

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

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

在一個(gè)域下引用了其他域的腳本，又沒(méi)有去做額外的配資，就很容易產(chǎn)生Script error。說(shuō)到最后這就是因?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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101584.html

相關(guān)文章

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

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

    Anshiii 評(píng)論0 收藏0

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

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

    Scliang 評(píng)論0 收藏0

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

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

    tyheist 評(píng)論0 收藏0

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

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

    Rocko 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<