前端錯誤監控問題如何解決

這篇文章主要介紹“前端錯誤監控問題如何解決”，在日常操作中，相信很多人在前端錯誤監控問題如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”前端錯誤監控問題如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在當今的互聯網時代，web開發越來越受到重視，網頁能實現的功能也越來多，之前只能在客戶端上運行的程序，也逐漸轉到網頁上，面對成千上萬的用戶，出現錯誤的概率也是越來大。項目上線前期的粒度較大的錯誤我們都會在自測和QA測試中發現，然而上線之后的錯誤就不是那么好發現。同時移動端的開發也面臨著一個問題就是不好調試，所以web開發的錯誤監控是一個非常有用的措施。前端的錯誤監控有哪些方法呢。

一、錯誤分類

常見的web錯誤主要分為兩類：

   1. 運行時錯誤：這個錯誤往往是我們在代碼書寫時造成的，比如語法錯誤、邏輯錯誤，這樣的錯誤通常在測試階段就會被發現，但是也可能存在“漏網之魚”。

    2.資源加載錯誤：這個錯誤通常是找不到文件或者是文件加載超時造成的。

二、錯誤捕獲

基于上面兩種的錯誤類型，也有不同的錯誤捕獲方式：

 1.代碼錯誤捕獲：

// try...catch...
try {

  // 運行可能出錯的代碼
} catch(e){

  // 捕獲錯誤
}

// windown.onerror
window.onerror = function () {

  // 捕獲錯誤

}

2. 資源加載錯誤

// Object.onerror
var img = document.getElementById('#img');
img.onerror = function () {

  // 捕獲錯誤

}

利用window的Error事件代理,但是需要注意的是error事件是不冒泡的，我們可以使用事件捕獲進行代理。

window.addEventListener("error",function(){
  // 捕獲錯誤
},true);

三、錯誤上報

常見錯誤上報有兩種： ajax、image對象（推薦）。

   ajax上報就是在上文注釋錯誤捕獲的地方發起ajax請求，來向服務器發送錯誤信息。

   利用image對象

(new Image()).src ="http://post.error.com?";

四、跨域js文件錯誤獲取

跨域js文件獲取是有限制的，如果想獲取其他域下的js錯誤需要在script標簽里添加crossorigin屬性，

<script crossorigin  src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>

然后服務器端要設置

header('Access-Control-Allow-Origin: *');

到此，關于“前端錯誤監控問題如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！