讀書筆記(04) - 錯誤監控 - JavaScript高級程序設計

錯誤類型

1. 即時運行錯誤 (代碼錯誤)
2. 資源加載錯誤

常見的錯誤

1. 類型轉換錯誤

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

2.數據類型錯誤

建議增強類型判斷

// 數組倒序
function reverseSort(value) {
    if (value instanceof Array) { 
        // 使用instanceof驗證數據類型 
        // (基礎類型用typeof, 引用類型用instanceof)
        value.sort();
        value.revere()
    }
}

3. 通訊錯誤

url參數編碼錯誤形成，建議使用encodeURIComponent()對url參數數據進行編碼

// 錯誤的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);
}, true);  // 默認false爲冒泡階段觸發，true爲捕獲階段觸發

跨域的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高級程序設計》
• 《如何優雅處理前端異常》

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