前端錯誤監控

inapt 發布于2019-08-23 14:43 / 2482人閱讀

摘要：前端錯誤監控一錯誤分類運行時錯誤這個錯誤往往是在寫代碼是造成的。我知道錯誤了在實際的使用過程中，主要是來捕獲預料之外的錯誤，而則是用來在可預見情況下監控特定的錯誤，兩者結合使用更加高效。

前端錯誤監控 一、錯誤分類

1.運行時錯誤：這個錯誤往往是在寫代碼是造成的。如語法錯誤、邏輯錯誤等，這種錯誤一般在測試過程也能夠發現。

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

二、錯誤捕獲

1.代碼錯誤捕獲

try…catch…

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

window.onerror

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

/**
同步錯誤
 * @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

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

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

由于網絡請求異常不會事件冒泡，因此必須在捕獲階段將其捕捉到才行，但是這種方式雖然可以捕捉到網絡請求的異常，但是無法判斷 HTTP 的狀態是 404 還是其他比如 500 等等，所以還需要配合服務端日志才進行排查分析才可以。

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

2.資源加載錯誤

Object.onerror

var img=document.getElementById("#img");
img.onerror = function() {
  // 捕獲錯誤  
}

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

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

三、錯誤上報

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

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

利用image對象

function report(error) {
var reportUrl = "http://xxxx/report";
new Image().src = reportUrl + "?" + "error=" + error;
}

四、跨域js文件錯誤獲取

跨域js文件獲取是有限制的，如果想獲取其他域下的js錯誤需要再script標簽中添加crossorgin屬性，然后服務器要設置header("Access-Control-Allow-Origin");

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



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

云服務器 GPU云服務器 java錯誤日志監控 js前端監控業務實時監控服務 ARMS 前端監控資源包有沒有優惠從零開始搭建前端數據監控系統

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

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

一步一步搭建前端監控系統：JS錯誤監控篇

摘要：摘要徒手寫錯誤監控。為什么用定時器呢，因為在單頁應用中，路由的切換和地址欄的變化是無法被監控的，我確實沒有想到特別好的辦法來監控，所以用了這種方式，如果有人有更好的辦法，請給我留言，謝謝。摘要：徒手寫JS錯誤監控。作者：一步一個腳印一個坑原文：搭建前端監控系統（二）JS錯誤監控篇 Fundebug經授權轉載，版權歸原作者所有。背景：市面上的監控系統有很多，大多收費，對于...

EdwardUp 2019-08-23 18:30 評論0 收藏0
前端埋點 - 報錯監控

摘要：說起埋點又到了談起前端項目中數據收集與監控，那么今天來簡單的聊下前端報錯監控的埋點。錯誤監控的錯誤監控主要是為了發現服務接口返回值的問題。如果為，則偵聽器只在目標或冒泡階段處理事件。說起埋點又到了談起前端項目中數據收集與監控，那么今天來簡單的聊下前端報錯監控的埋點。首先先安利下自己做的報錯監控的項目 FE-Monitor 歡迎 issue 和 star 。首先我們可以看下前端做報...

stackfing 2019-08-23 18:37 評論0 收藏0
前端異常監控-看這篇就夠了

摘要：前端異常監控如果是移除的流程，那么編程就一定是將放進去的流程。過濾掉運行時錯誤上報加載錯誤事件捕獲異常最新的規范中定義了事件用于全局捕獲對象沒有處理器時異常情況。前端異常監控如果debug是移除bug的流程，那么編程就一定是將bug放進去的流程。如果沒有用戶反饋問題，那就代表我們的產品棒棒噠，對不對？主要內容 Web規范中相關前端異常異常按照捕獲方式分類異常的捕獲方式日志...

Aklman 2019-08-23 12:59 評論0 收藏0
一步一步搭建前端監控系統：如何定位前端線上問題？

摘要：一直以來，前端的線上問題很難定位，因為它發生于用戶的一系列操作之后。當然，這些問題并非不能克服，讓我們來一起看看如何去定位線上的問題吧。地址參考一步一步搭建前端監控系統錯誤監控篇一步一步搭建前端監控系統接口請求異常監控篇摘要：記錄用戶行為，排查線上BUG。作者：一步一個腳印一個坑原文：如何定位前端線上問題（如何排查前端生產問題） Fundebug經授權轉載，版權歸原作者所...

aaron 2019-08-23 18:41 評論0 收藏0
前端錯誤監控與收集探究

摘要：這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。編寫代碼只是做好項目的一小部分，寫代碼難免會碰到錯誤。因此，在項目上線后，我們還需要主動對項目的錯誤進行收集，不能等用戶發現錯誤，再聯系我們，我們再去處理。這樣很容易造成大的損失，提前做好錯誤收集和處理，可以減少損失。本人并沒有做過相關的工作，下面的文章只是我在學習中的一點思考和總結，可能有比較多不足和錯誤的地方，希望大...

ZoomQuiet 2019-08-22 16:02 評論0 收藏0