資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目中我們可通過(guò)設(shè)置采集率，或?qū)σ?guī)定時(shí)間內(nèi)數(shù)據(jù)匯總再上報(bào)，減少請(qǐng)求數(shù)量，從而緩解服務(wù)端壓力。借鑒別人的一個(gè)例子只采集上報(bào)錯(cuò)誤參考文檔高級(jí)程序設(shè)計(jì)如何優(yōu)雅處理前端異常作者以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。
錯(cuò)誤類型
即時(shí)運(yùn)行錯(cuò)誤 (代碼錯(cuò)誤)
資源加載錯(cuò)誤
常見(jiàn)的錯(cuò)誤建議使用全等===操作符
建議加強(qiáng)類型判斷
// 數(shù)組倒序
function reverseSort(value) {
if (value instanceof Array) {
// 使用instanceof驗(yàn)證數(shù)據(jù)類型
// (基礎(chǔ)類型用typeof, 引用類型用instanceof)
value.sort();
value.revere()
}
}
url參數(shù)編碼錯(cuò)誤造成，建議使用encodeURIComponent()對(duì)url參數(shù)數(shù)據(jù)進(jìn)行編碼
// 錯(cuò)誤的url參數(shù)
// http://www.xxx.com/?redir=http://www.xxx.com?a=b&c=d
// 針對(duì)redir后面的參數(shù)字符串進(jìn)行編碼
// 封裝一個(gè)處理方法（摘自書(shū)中代碼）
function addQueryStringArg(url, name, value) {
if (url.indexOf("?") < 0) {
url += "?";
} else {
url += "&";
}
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
錯(cuò)誤的捕獲方式
try-catch（代碼可疑區(qū)域可增加try-catch）
window.onerror (全局監(jiān)控js錯(cuò)誤異常)
try {
// 可能會(huì)導(dǎo)致錯(cuò)誤的代碼
} catch (error) {
// 錯(cuò)誤發(fā)生時(shí)處理
console.log(error.message);
} finally {
// 一定會(huì)執(zhí)行(無(wú)論是否發(fā)生錯(cuò)誤)
}
TIPS: 使用了finally，try跟catch的return語(yǔ)句都會(huì)被忽略
function testFinally() {
try {
return 2;
} catch (error) {
return 1;
} finally {
return 0;
}
}
// testFinally 最終返回 0
TIPS: try-catch只能捕獲同步運(yùn)行的代碼錯(cuò)誤，無(wú)法檢測(cè)語(yǔ)法和異步錯(cuò)誤
（語(yǔ)法可借助ESlint工具在開(kāi)發(fā)階段提示解決）
遵循DOM0級(jí)事件，window.onerror事件處理程序不會(huì)創(chuàng)建event對(duì)象，但可以接收三個(gè)參數(shù)message(錯(cuò)誤信息), url(錯(cuò)誤文件url), line(行號(hào))
window.onerror = function(message, url, line){
console.log(message, ulr, line);
};
在事件處理程序中返回false，可以阻止瀏覽器報(bào)告錯(cuò)誤的默認(rèn)行為
window.onerror = function(message, url, line) {
return false;
}
object.onerror
performance.getEntries()
Error事件捕獲 （全局監(jiān)控靜態(tài)資源異常）
如script，image等標(biāo)簽src引用，會(huì)返回一個(gè)event對(duì)象
TIPS: object.onerror不會(huì)冒泡到window對(duì)象，所以window.onerror無(wú)法監(jiān)控資源加載錯(cuò)誤
var img = new Image();
img.src = "http://xxx.com/xxx.jpg";
img.onerror = function(event) {
console.log(event);
}
適用高版本瀏覽器，返回已成功加載的資源列表，然后自行做比對(duì)差集運(yùn)算，核實(shí)哪些文件沒(méi)有加載成功
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);
window.addEventListener("error", function(error){
//...（全局監(jiān)控靜態(tài)資源異常）
console.log(error);
}, true); // 默認(rèn)false為冒泡階段觸發(fā)，true為捕獲階段觸發(fā)
跨域的js錯(cuò)誤捕獲
一般涉及跨域的js運(yùn)行錯(cuò)誤時(shí)會(huì)拋出錯(cuò)誤提示script error，但沒(méi)有具體信息（如出錯(cuò)文件，行列號(hào)提示等）, 可利用資源共享策略來(lái)捕獲跨域js錯(cuò)誤
客戶端：在script標(biāo)簽增加crossorigin屬性（客戶端）
服務(wù)端：js資源響應(yīng)頭Access-Control-Allow-Origin: *
錯(cuò)誤上報(bào)Ajax請(qǐng)求 (會(huì)有跨域問(wèn)題)
動(dòng)態(tài)創(chuàng)建Image標(biāo)簽 (兼容完美，代碼簡(jiǎn)潔，需要注意瀏覽器url長(zhǎng)度限制)
(new Image()).src= "http://xxx.com/error?code=1002"
錯(cuò)誤信息頻繁發(fā)送上報(bào)請(qǐng)求，會(huì)對(duì)后端服務(wù)器造成壓力。
項(xiàng)目中我們可通過(guò)設(shè)置采集率，或?qū)σ?guī)定時(shí)間內(nèi)數(shù)據(jù)匯總再上報(bào)，減少請(qǐng)求數(shù)量，從而緩解服務(wù)端壓力。
// 借鑒別人的一個(gè)例子
Reporter.send=function(data) {
// 只采集30%
if（Math.random() < 0.3) {
send(data); // 上報(bào)錯(cuò)誤
}
}
參考文檔
《JavaScript高級(jí)程序設(shè)計(jì)》
《如何優(yōu)雅處理前端異常》
作者：以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/99769.html
摘要：解耦優(yōu)勢(shì)代碼復(fù)用，單元測(cè)試。常用比較誤區(qū)可同時(shí)判斷，可用來(lái)判斷對(duì)象屬性是否存在。使用作判斷無(wú)法進(jìn)行充分的類型檢查。文件中應(yīng)用常量參考文檔高級(jí)程序設(shè)計(jì)作者以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 編寫可維護(hù)性代碼 可維護(hù)的代碼遵循原則： 可理解性 （方便他人理解） 直觀...
摘要：技術(shù)的核心是對(duì)象即。收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充對(duì)象的屬性，相關(guān)的屬性有作為響應(yīng)主體被返回的文本。收到響應(yīng)后，一般來(lái)說(shuō)，會(huì)先判斷是否為，這是此次請(qǐng)求成功的標(biāo)志。中的版本會(huì)將設(shè)置為，而中原生的則會(huì)將規(guī)范化為。會(huì)在取得時(shí)報(bào)告的值為。 Ajax(Asynchronous Javascript + XML)技術(shù)的核心是XMLHttpRequest對(duì)象,即: XHR。雖然名字中包含XML，但...
摘要：文件內(nèi)部使用使用到的代碼引入外部文件外部代碼的地址標(biāo)簽的位置一般情況下，標(biāo)簽的位置放在標(biāo)簽中引入代碼頁(yè)面結(jié)構(gòu)對(duì)于需要引入很多的中間，如果把放在頭部，無(wú)疑會(huì)導(dǎo)致瀏覽器呈現(xiàn)頁(yè)面出現(xiàn)延遲，就是導(dǎo)致頁(yè)面出現(xiàn)空白。頁(yè)面結(jié)構(gòu)引入代碼 這篇筆記的內(nèi)容對(duì)應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第二章。 1.使用方式 在HTML中使用 JavaScript 的方式有兩種，第一種就是直接內(nèi)...
摘要：由于計(jì)算機(jī)的國(guó)際化，組織的標(biāo)準(zhǔn)牽涉到很多其他國(guó)家，因此組織決定改名表明其國(guó)際性。規(guī)范由萬(wàn)維網(wǎng)聯(lián)盟制定。級(jí)標(biāo)準(zhǔn)級(jí)標(biāo)準(zhǔn)是不存在的，級(jí)一般指的是最初支持的。 這篇筆記的內(nèi)容對(duì)應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計(jì)算機(jī)制造商協(xié)會(huì)的縮寫，全程是 European Computer Manufacturers Ass...
摘要：表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁(yè)面中的其他操作可選。表示通過(guò)屬性指定的代碼的字符集。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。實(shí)際上，服務(wù)器在傳送文件時(shí)使用的類型通常是，但在中設(shè)置這個(gè)值卻可能導(dǎo)致腳本被忽略。 第1章 JavaScript 簡(jiǎn)介 雖然JavaScript和ECMAScript通常被人們用來(lái)表達(dá)相同的含義，但JavaScript的含義比ECMA-262要多得多...
閱讀 2657·2019-08-30 15:53
閱讀 2879·2019-08-29 16:20
閱讀 1086·2019-08-29 15:10
閱讀 1026·2019-08-26 10:58
閱讀 2198·2019-08-26 10:49
閱讀 637·2019-08-26 10:21
閱讀 707·2019-08-23 18:30
閱讀 1640·2019-08-23 15:58
