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

Null 發布于2019-08-23 13:55 / 879人閱讀

摘要：項目中我們可通過設置采集率，或對規定時間內數據匯總再上報，減少請求數量，從而緩解服務端壓力。借鑒別人的一個例子只采集上報錯誤參考文檔高級程序設計如何優雅處理前端異常作者以樂之名本文原創，有不當的地方歡迎指出。

錯誤類型

即時運行錯誤 (代碼錯誤)

資源加載錯誤

常見的錯誤

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;
}

錯誤的捕獲方式

針對即時運行錯誤

try-catch（代碼可疑區域可增加try-catch）

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;
}

針對資源加載錯誤

object.onerror

performance.getEntries()

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錯誤

客戶端：在script標簽增加crossorigin屬性（客戶端）

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

錯誤上報

Ajax請求 (會有跨域問題)

動態創建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高級程序設計》

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

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

云服務器 GPU云服務器高級程序設計-筆記讀書筆記編程思想讀書筆記大數據時代讀書筆記

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

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

讀書筆記(02) - 可維護性 - JavaScript高級程序設計

摘要：解耦優勢代碼復用，單元測試。常用比較誤區可同時判斷，可用來判斷對象屬性是否存在。使用作判斷無法進行充分的類型檢查。文件中應用常量參考文檔高級程序設計作者以樂之名本文原創，有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 編寫可維護性代碼可維護的代碼遵循原則：可理解性（方便他人理解）直觀...

k00baa 2019-08-23 13:51 評論0 收藏0
Ajax與Comet-JavaScript高級程序設計第21章讀書筆記(1)

摘要：技術的核心是對象即。收到響應后，響應的數據會自動填充對象的屬性，相關的屬性有作為響應主體被返回的文本。收到響應后，一般來說，會先判斷是否為，這是此次請求成功的標志。中的版本會將設置為，而中原生的則會將規范化為。會在取得時報告的值為。 Ajax(Asynchronous Javascript + XML)技術的核心是XMLHttpRequest對象,即: XHR。雖然名字中包含XML，但...

imingyu 2019-08-20 16:27 評論0 收藏0
002-讀書筆記-JavaScript高級程序設計 在HTML中使用JavaScript

摘要：文件內部使用使用到的代碼引入外部文件外部代碼的地址標簽的位置一般情況下，標簽的位置放在標簽中引入代碼頁面結構對于需要引入很多的中間，如果把放在頭部，無疑會導致瀏覽器呈現頁面出現延遲，就是導致頁面出現空白。頁面結構引入代碼這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有兩種，第一種就是直接內...

banana_pi 2019-08-22 11:13 評論0 收藏0
001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0
《JavaScript高級程序設計》（第3版）讀書筆記第1~2章

摘要：表示應該立即下載腳本，但不應妨礙頁面中的其他操作可選。表示通過屬性指定的代碼的字符集。表示腳本可以延遲到文檔完全被解析和顯示之后再執行。實際上，服務器在傳送文件時使用的類型通常是，但在中設置這個值卻可能導致腳本被忽略。第1章 JavaScript 簡介雖然JavaScript和ECMAScript通常被人們用來表達相同的含義，但JavaScript的含義比ECMA-262要多得多...

Corwien 2019-08-23 17:18 評論0 收藏0