錯誤型別

1. 即時執行錯誤 (程式碼錯誤)

2. 資源載入錯誤

常見的錯誤

1. 型別轉換錯誤

建議使用全等===操作符

2.資料型別錯誤

建議加強型別判斷

// 陣列倒序
function reverseSort(value) {
    if (value instanceof Array) { 
        // 使用instanceof驗證資料型別 
        // (基礎型別用typeof, 引用型別用instanceof)
        value.sort();
        value.revere()
    }
}

3. 通訊錯誤

url引數編碼錯誤造成，建議使用encodeURIComponent()

// 錯誤的url引數
// http://www.xxx.com/?redir=http://www.xxx.com?a=b&c=d

// 針對redir後面的引數字串進行編碼

// 封裝一個處理方法（摘自書中程式碼）
function addQueryStringArg(url, name, value) {
    if (url.indexOf('?') < 0) {
        url += '?';        
    } else {
        url += '&';
    }
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
 

錯誤的捕獲方式

針對即時執行錯誤

1. try-catch（程式碼可疑區域可增加try-catch）

2. window.onerror (全域性監控js錯誤異常)

1. try-catch

try {
    // 可能會導致錯誤的程式碼
} catch (error) {
    // 錯誤發生時處理
    console.log(error.message);
} finally {
    // 一定會執行(無論是否發生錯誤)
}

TIPS: 使用了finally，try跟catch的return語句都會被忽略

function testFinally() {
    try {
        return 2;
    } catch (error) {
        return 1;
    } finally {
        return 0;
    }
}

// testFinally 最終返回 0
 

TIPS: try-catch只能捕獲同步執行的程式碼錯誤，無法檢測語法和非同步錯誤

（語法可藉助ESlint工具在開發階段提示解決）

2. window.onerror

遵循DOM0級事件，window.onerror事件處理程式不會建立event物件，但可以接收三個引數message(錯誤資訊), url(錯誤檔案url), line(行號)

window.onerror = function(message, url, line){
    console.log(message, ulr, line);
};

在事件處理程式中返回false，可以阻止瀏覽器報告錯誤的預設行為

window.onerror = function(message, url, line) {
    return false;
}

針對資源載入錯誤

1. object.onerror

2. performance.getEntries()

3. Error事件捕獲 （全域性監控靜態資源異常）

1. object.onerror

如script，image等標籤src引用，會返回一個event物件

TIPS: object.onerror不會冒泡到window物件，所以window.onerror無法監控資源載入錯誤

var img = new Image();
img.src = 'http://xxx.com/xxx.jpg';
img.onerror = function(event) {
    console.log(event);
}

 2. window.performance.getEntires()

適用高版本瀏覽器，返回已成功載入的資源列表，然後自行做比對差集運算，核實哪些檔案沒有載入成功

var result = [];
window.performance.getEntries().forEach(function (perf) {
    result.push({
        'url': perf.name,
        'entryType': perf.entryType,
        'type': perf.initiatorType,
        'duration(ms)': perf.duration
    });
});
console.log(result);

3. Error事件捕獲

window.addEventListener('error', function(error){
    //...（全域性監控靜態資源異常）
    console.log(error);
})

跨域的js錯誤捕獲

一般涉及跨域的js執行錯誤時會丟擲錯誤提示script error，但沒有具體資訊（如出錯檔案，行列號提示等）, 可利用資源共享策略來捕獲跨域js錯誤

1. 客戶端：在script標籤增加crossorigin屬性（客戶端）

2. 服務端：js資源響應頭Access-Control-Allow-Origin: *

錯誤上報

1. Ajax請求 (會有跨域問題)

2. 動態建立Image標籤 (相容完美，程式碼簡潔，需要注意瀏覽器url長度限制)

Image標籤

(new Image()).src= 'http://xxx.com/error?code=1002'

上報頻率

錯誤資訊頻繁傳送上報請求，會對後端伺服器造成壓力。
專案中我們可通過設定採集率，或對規定時間內資料彙總再上報，減少請求數量，從而緩解服務端壓力。

// 借鑑別人的一個例子
Reporter.send=function(data) {
    // 只採集30%
    if（Math.random() < 0.3) {
        send(data); // 上報錯誤
    }
}

參考文件

• 《JavaScript高階程式設計》

• 《如何優雅處理前端異常》

作者：以樂之名本文原創，有不當的地方歡迎指出。轉載請指明出處。