一、錯誤分類

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

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

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

二、錯誤捕獲

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

1.代碼錯誤捕獲：

try...catch...

                    try{

                               // 運行可能出錯的代碼

                    }catch{

                               // 捕獲錯誤

                    }

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屬性，服務器端要設置

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

---------------------
作者：newbietao
來源：CSDN
原文：https://blog.csdn.net/newbietao/article/details/78018384
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

web前端錯誤監控