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

資訊專欄INFORMATION COLUMN

前端錯(cuò)誤監(jiān)控

inapt / 2489人閱讀

摘要：前端錯(cuò)誤監(jiān)控一錯(cuò)誤分類運(yùn)行時(shí)錯(cuò)誤這個(gè)錯(cuò)誤往往是在寫(xiě)代碼是造成的。我知道錯(cuò)誤了在實(shí)際的使用過(guò)程中，主要是來(lái)捕獲預(yù)料之外的錯(cuò)誤，而則是用來(lái)在可預(yù)見(jiàn)情況下監(jiān)控特定的錯(cuò)誤，兩者結(jié)合使用更加高效。

前端錯(cuò)誤監(jiān)控 一、錯(cuò)誤分類
1.運(yùn)行時(shí)錯(cuò)誤：這個(gè)錯(cuò)誤往往是在寫(xiě)代碼是造成的。如語(yǔ)法錯(cuò)誤、邏輯錯(cuò)誤等，這種錯(cuò)誤一般在測(cè)試過(guò)程也能夠發(fā)現(xiàn)。
2.資源加載錯(cuò)誤：這個(gè)錯(cuò)誤通常是找不到文件或者是文件加載超時(shí)造成的。
二、錯(cuò)誤捕獲
1.代碼錯(cuò)誤捕獲
try…catch…
try{
  //運(yùn)行可能出錯(cuò)的代碼  
}catch(e) {
    //捕獲錯(cuò)誤
}
window.onerror

a.

window.onerror = function() {
  //捕獲錯(cuò)誤  
}

b.

/**
同步錯(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("我知道錯(cuò)誤了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error

c.

//異步錯(cuò)誤
window.onerror = function (msg, url, row, col, error) {
  console.log("我知道異步錯(cuò)誤了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error;
});

需要注意的是， window.onerror 函數(shù)只有在返回 true的時(shí)候，異常才不會(huì)向上拋出，否則即使是知道異常的發(fā)生控制臺(tái)還是會(huì)顯示 Uncaught Error: xxxxx 。

由于網(wǎng)絡(luò)請(qǐng)求異常不會(huì)事件冒泡，因此必須在捕獲階段將其捕捉到才行，但是這種方式雖然可以捕捉到網(wǎng)絡(luò)請(qǐng)求的異常，但是無(wú)法判斷 HTTP 的狀態(tài)是 404 還是其他比如 500 等等，所以還需要配合服務(wù)端日志才進(jìn)行排查分析才可以。

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

2.資源加載錯(cuò)誤
Object.onerror
var img=document.getElementById("#img");
img.onerror = function() {
  // 捕獲錯(cuò)誤  
}

利用 window 的 error 事件代理，但是需要注意的是 error 事件是不冒泡的，可以使用事件捕獲進(jìn)行代理

 window.addElementListener("error",function(){
  // 捕獲錯(cuò)誤
},true);
三、錯(cuò)誤上報(bào)
常見(jiàn)的錯(cuò)誤上報(bào)有兩種：ajax、image對(duì)象（推薦）
ajax上報(bào)就是在上文注釋錯(cuò)誤捕獲的地方發(fā)起ajax請(qǐng)求，來(lái)向服務(wù)器發(fā)送錯(cuò)誤信息 
利用image對(duì)象
function report(error) {
var reportUrl = "http://xxxx/report";
new Image().src = reportUrl + "?" + "error=" + error;
}
四、跨域js文件錯(cuò)誤獲取
跨域js文件獲取是有限制的，如果想獲取其他域下的js錯(cuò)誤需要再script標(biāo)簽中添加crossorgin屬性，然后服務(wù)器要設(shè)置header("Access-Control-Allow-Origin");
// 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://systransis.cn/yun/101037.html

相關(guān)文章

  • 一步一步搭建前端監(jiān)控系統(tǒng)：JS錯(cuò)誤監(jiān)控篇

    摘要：摘要徒手寫(xiě)錯(cuò)誤監(jiān)控。為什么用定時(shí)器呢，因?yàn)樵趩雾?yè)應(yīng)用中，路由的切換和地址欄的變化是無(wú)法被監(jiān)控的，我確實(shí)沒(méi)有想到特別好的辦法來(lái)監(jiān)控，所以用了這種方式，如果有人有更好的辦法，請(qǐng)給我留言，謝謝。 摘要： 徒手寫(xiě)JS錯(cuò)誤監(jiān)控。 作者：一步一個(gè)腳印一個(gè)坑 原文：搭建前端監(jiān)控系統(tǒng)（二）JS錯(cuò)誤監(jiān)控篇 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 背景：市面上的監(jiān)控系統(tǒng)有很多，大多收費(fèi)，對(duì)于...

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

  • 前端埋點(diǎn) - 報(bào)錯(cuò)監(jiān)控

    摘要：說(shuō)起埋點(diǎn)又到了談起前端項(xiàng)目中數(shù)據(jù)收集與監(jiān)控，那么今天來(lái)簡(jiǎn)單的聊下前端報(bào)錯(cuò)監(jiān)控的埋點(diǎn)。錯(cuò)誤監(jiān)控的錯(cuò)誤監(jiān)控主要是為了發(fā)現(xiàn)服務(wù)接口返回值的問(wèn)題。如果為，則偵聽(tīng)器只在目標(biāo)或冒泡階段處理事件。 說(shuō)起埋點(diǎn)又到了談起前端項(xiàng)目中數(shù)據(jù)收集與監(jiān)控，那么今天來(lái)簡(jiǎn)單的聊下前端報(bào)錯(cuò)監(jiān)控的埋點(diǎn)。 首先先安利下自己做的報(bào)錯(cuò)監(jiān)控的項(xiàng)目 FE-Monitor 歡迎 issue 和 star 。 首先我們可以看下前端做報(bào)...

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

  • 前端異常監(jiān)控-看這篇就夠了

    摘要：前端異常監(jiān)控如果是移除的流程，那么編程就一定是將放進(jìn)去的流程。過(guò)濾掉運(yùn)行時(shí)錯(cuò)誤上報(bào)加載錯(cuò)誤事件捕獲異常最新的規(guī)范中定義了事件用于全局捕獲對(duì)象沒(méi)有處理器時(shí)異常情況。 前端異常監(jiān)控 如果debug是移除bug的流程，那么編程就一定是將bug放進(jìn)去的流程。如果沒(méi)有用戶反饋問(wèn)題，那就代表我們的產(chǎn)品棒棒噠，對(duì)不對(duì)？ 主要內(nèi)容 Web規(guī)范中相關(guān)前端異常 異常按照捕獲方式分類 異常的捕獲方式 日志...

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

  • 一步一步搭建前端監(jiān)控系統(tǒng)：如何定位前端線上問(wèn)題？

    摘要：一直以來(lái)，前端的線上問(wèn)題很難定位，因?yàn)樗l(fā)生于用戶的一系列操作之后。當(dāng)然，這些問(wèn)題并非不能克服，讓我們來(lái)一起看看如何去定位線上的問(wèn)題吧。地址參考一步一步搭建前端監(jiān)控系統(tǒng)錯(cuò)誤監(jiān)控篇一步一步搭建前端監(jiān)控系統(tǒng)接口請(qǐng)求異常監(jiān)控篇 摘要： 記錄用戶行為，排查線上BUG。 作者：一步一個(gè)腳印一個(gè)坑 原文：如何定位前端線上問(wèn)題（如何排查前端生產(chǎn)問(wèn)題） Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所...

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

  • 前端錯(cuò)誤監(jiān)控與收集探究

    摘要：這樣很容易造成大的損失，提前做好錯(cuò)誤收集和處理，可以減少損失。 編寫(xiě)代碼只是做好項(xiàng)目的一小部分，寫(xiě)代碼難免會(huì)碰到錯(cuò)誤。因此，在項(xiàng)目上線后，我們還需要主動(dòng)對(duì)項(xiàng)目的錯(cuò)誤進(jìn)行收集，不能等用戶發(fā)現(xiàn)錯(cuò)誤，再聯(lián)系我們，我們?cè)偃ヌ幚?。這樣很容易造成大的損失，提前做好錯(cuò)誤收集和處理，可以減少損失。 本人并沒(méi)有做過(guò)相關(guān)的工作，下面的文章只是我在學(xué)習(xí)中的一點(diǎn)思考和總結(jié)，可能有比較多不足和錯(cuò)誤的地方，希望大...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<