那么我們?nèi)绾蝸?lái)捕獲這種異常呢，有兩種方法，
第一種是try..catch
第二種是 window.onerror
由于try.catch 沒(méi)法捕捉到全局的錯(cuò)誤事件，也即是說(shuō) 只有try,catch的塊里邊運(yùn)行出錯(cuò)才會(huì)被你捕捉到。所以我們這里排除它的這種方案，
來(lái)采用第二種方法，也就是window.onerror方法。
window.onerror
打開(kāi)瀏覽器自帶的開(kāi)發(fā)者工具，當(dāng)一個(gè)錯(cuò)誤發(fā)生時(shí)，我們可以立刻得到提示，并且知道錯(cuò)誤發(fā)生的位置以及調(diào)用的堆棧信息。
我們可以通過(guò) window.onerror 來(lái)捕獲頁(yè)面上的各種腳本執(zhí)行異常，它能幫助我們獲取有用的信息。但是這個(gè)方法存在兼容性問(wèn)題，在不同的瀏覽器上提供的數(shù)據(jù)不完全一致，
部分過(guò)時(shí)的瀏覽器只能提供部分?jǐn)?shù)據(jù)。它的用法如下:
window.onerror = function (message, url, lineNo, columnNo, error)
五個(gè)參數(shù)的含義如下：
1、message {String} 錯(cuò)誤信息。直觀的錯(cuò)誤描述信息，不過(guò)有時(shí)候你確實(shí)無(wú)法從這里面看出端倪，特別是壓縮后腳本的報(bào)錯(cuò)信息，可能讓你更加疑惑。
2、url {String} 發(fā)生錯(cuò)誤對(duì)應(yīng)的腳本路徑，比如是你的http://a.js報(bào)錯(cuò)了還是http://b.js報(bào)錯(cuò)了。
3、lineNo {Number} 錯(cuò)誤發(fā)生的行號(hào)。
4、columnNo {Number} 錯(cuò)誤發(fā)生的列號(hào)。
5、error {Object} 具體的 error 對(duì)象，包含更加詳細(xì)的錯(cuò)誤調(diào)用堆棧信息，這對(duì)于定位錯(cuò)誤非常有幫助。
兼容性問(wèn)題
不同瀏覽器對(duì)同一個(gè)錯(cuò)誤的 message是不一樣的。
IE10以下瀏覽器只能獲取到 message，url 和 lineNo這三個(gè)參數(shù)，獲取不到columnNo 和 error
不過(guò) window.event對(duì)象提供了 errorLine和 errorCharacter，以此來(lái)對(duì)應(yīng)相應(yīng)的行列號(hào)信息。
在使用onerror的時(shí)候，我們可以使用arguments.callee.caller來(lái)遞歸出調(diào)用堆棧，這一類信息是最直接的錯(cuò)誤信息信息，所以是必須要捕獲并上報(bào)的。后面我們會(huì)用js去示范。
不同瀏覽器默認(rèn)可獲取的參數(shù)值：
寫一個(gè)js報(bào)錯(cuò)的上報(bào)庫(kù)
既然知道了window.onerror的用法，為啥我們不來(lái)寫一個(gè)js庫(kù)來(lái)監(jiān)控我們的前端js,廢話少說(shuō)，寫之。
實(shí)現(xiàn)思路：
1、收集window.onerror的五個(gè)參數(shù)
2、除了那五個(gè)參數(shù)，可以增加自定義參數(shù)
3、發(fā)送到后臺(tái)服務(wù)器
我們暫且給我們的庫(kù)起名為 badJsReport
原理比較簡(jiǎn)單，代碼如下：
/**
* Name: badJsReport.js
* Version 1.1.0
* Author xianyulaodi
* Address: https://github.com/xianyulaodi/badJsReport
* Released on: December 22, 2016
*/
;(function(){
'use strict';
if (window.badJsReport){
return window.badJsReport
};
/*
* 默認(rèn)上報(bào)的錯(cuò)誤信息
*/
var defaults = {
msg:'', //錯(cuò)誤的具體信息
url:'', //錯(cuò)誤所在的url
line:'', //錯(cuò)誤所在的行
col:'', //錯(cuò)誤所在的列
error:'', //具體的error對(duì)象
};
/*
*ajax封裝
*/
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//設(shè)置表單提交時(shí)的內(nèi)容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
/*
*格式化參數(shù)
*/
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
/*
* 合并對(duì)象，將配置的參數(shù)也一并上報(bào)
*/
function cloneObj(oldObj) { //復(fù)制對(duì)象方法
if (typeof(oldObj) != 'object') return oldObj;
if (oldObj == null) return oldObj;
var newObj = new Object();
for (var prop in oldObj)
newObj[prop] = oldObj[prop];
return newObj;
};
function extendObj() { //擴(kuò)展對(duì)象
var args = arguments;
if (args.length < 2) {return;}
var temp = cloneObj(args[0]); //調(diào)用復(fù)制對(duì)象方法
for (var n = 1,len=args.length; n 0)) {
ext.push(fn.toString());
if (fn === fn.caller) {
break;//如果有環(huán)
}
fn = fn.caller;
}
ext = ext.join(",");
defaults.msg = error.stack.toString();
}
// 合并上報(bào)的數(shù)據(jù)，包括默認(rèn)上報(bào)的數(shù)據(jù)和自定義上報(bào)的數(shù)據(jù)
var reportData=extendObj(params.data || {},defaults);
// 把錯(cuò)誤信息發(fā)送給后臺(tái)
ajax({
url: params.url, //請(qǐng)求地址
type: "POST", //請(qǐng)求方式
data: reportData, //請(qǐng)求參數(shù)
dataType: "json",
success: function (response, xml) {
// 此處放成功后執(zhí)行的代碼
params.successCallBack&¶ms.successCallBack(response, xml);
},
fail: function (status) {
// 此處放失敗后執(zhí)行的代碼
params.failCallBack&¶ms.failCallBack(status);
}
});
},0);
return true; //錯(cuò)誤不會(huì)console瀏覽器上,如需要，可將這樣注釋
};
}
window.badJsReport=badJsReport;
})();
/*===========================
badJsReport AMD Export
===========================*/
if (typeof(module) !== 'undefined'){
module.exports = window.badJsReport;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.badJsReport;
});
}我們封裝了原生ajax,還有將上報(bào)的參數(shù)對(duì)象合并。并暴露了一個(gè)全局方法 badJsReport
使用方法:
1、將badJsReport.js加載到其他的js之前
2、簡(jiǎn)單的使用方法：（這個(gè)執(zhí)行方法要放在其他代碼執(zhí)行之前）
badJsReport({
url:'http://www.baidu.com', //發(fā)送到后臺(tái)的url *必須
})3、如果需要新增上報(bào)參數(shù)，或者要知道發(fā)送給后臺(tái)的回調(diào)。可以用下面的方法
badJsReport({
url:'http://www.baidu.com', //發(fā)送到后臺(tái)的url *必須
data:{}, //自定義添加上報(bào)參數(shù)，比如app版本，瀏覽器版本 -可省略
successCallBack:function(response, xml){
// 發(fā)送給后臺(tái)成功的回調(diào)，-可省略
},
failCallBack:function(error){
// 發(fā)送給后臺(tái)失敗的回調(diào)，-可省略
}
})注意點(diǎn)：
1、對(duì)于跨域的JS資源，window.onerror拿不到詳細(xì)的信息，需要往資源的請(qǐng)求添加額外的頭部。
靜態(tài)資源請(qǐng)求需要加多一個(gè)Access-Control-Allow-Origin頭部，也就是需要后臺(tái)加一個(gè)Access-Control-Allow-Origin，同時(shí)script引入外鏈的標(biāo)簽需要加多一個(gè)crossorigin的屬性。這樣就可以獲取準(zhǔn)確的出錯(cuò)信息。
2、因?yàn)榇a的最后return true，所以如果有錯(cuò)誤信息，瀏覽器不會(huì)console出來(lái)，如果需要瀏覽器console，可以注釋掉最后的return true
缺點(diǎn)：
對(duì)于壓縮之后的代碼，我們得到錯(cuò)誤的信息，但是我們卻無(wú)法定位到錯(cuò)誤的行數(shù)，比如jquery的源碼壓縮，總共才3行。這樣就很難定位到具體的地方了，因?yàn)橐恍杏泻芏嗪芏嗟拇a。
關(guān)于“js前端代碼異常監(jiān)控的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
新聞名稱：js前端代碼異常監(jiān)控的示例分析
瀏覽地址：http://weahome.cn/article/gggosj.html
重慶分公司
重慶分公司
