window.onerror = function (message, url, lineNo, columnNo, error)
參數信息
1、message {String} 錯誤信息。直觀的錯誤描述信息，不過有時候你確實無法從這里面看出端倪，特別是壓縮后腳本的報錯信息，可能讓你更加疑惑。
2、url {String} 發生錯誤對應的腳本路徑，比如是你的http://a.js報錯了還是http://b.js報錯了。
3、lineNo {Number} 錯誤發生的行號。
4、columnNo {Number} 錯誤發生的列號。
5、error {Object} 具體的 error 對象，包含更加詳細的錯誤調用堆棧信息，這對於定位錯誤非常有幫助。
注意
1、對於跨域的JS資源，window.onerror拿不到詳細的信息，需要往資源的請求添加額外的頭部。
靜態資源請求需要加多一個Access-Control-Allow-Origin頭部，也就是需要后台加一個Access-Control-Allow-Origin，同時script引入外鏈的標簽需要加多一個crossorigin的屬性。這樣就可以獲取准確的出錯信息。
為了方便設置Header，可以把error.js做一個小改動，更名為：error-js.php
<?php header('Access-Control-Allow-Origin:*'); header('Content-type:text/javascript'); ?> throw new Error('出錯了');
2、壓縮之后的代碼，我們得到錯誤的信息，但是我們卻無法定位到錯誤的行數
實例1：
<!DOCTYPE html>
<html>
<head>
<title>Js錯誤捕獲</title>
<script type="text/javascript">
var MaxErrorReportLimit = 10;
window.onerror = function(msg,url,line,col,error){
// 同一個頁面最多上報10次錯誤，防止某個循環錯誤頁面一直打開，不斷的報錯
if (MaxErrorReportLimit-- < 0) return;
//沒有URL不上報！上報也不知道錯誤
if (msg != "Script error." && !url){
return true;
}
//采用異步的方式
//我遇到過在window.onunload進行ajax的堵塞上報
//由於客戶端強制關閉webview導致這次堵塞上報有Network Error
//我猜測這里window.onerror的執行流在關閉前是必然執行的
//而離開文章之后的上報對於業務來說是可丟失的
//所以我把這里的執行流放到異步事件去執行
//腳本的異常數降低了10倍
setTimeout(function(){
var data = {};
//不一定所有瀏覽器都支持col參數
col = col || (window.event && window.event.errorCharacter) || 0;
data.url = url;
data.line = line;
data.col = col;
if (!!error && !!error.stack){
//如果瀏覽器有堆棧信息
//直接使用
data.msg = error.stack.toString();
}else if (!!arguments.callee){
//嘗試通過callee拿堆棧信息
var ext = [];
var f = arguments.callee.caller, c = 3;
//這里只拿三層堆棧信息
while (f && (--c>0)) {
ext.push(f.toString());
if (f === f.caller) {
break;//如果有環
}
f = f.caller;
}
ext = ext.join(",");
data.msg = error.stack.toString();
}
//把data上報到后台！
console.log(data,'======data=====')
var xhr=new XMLHttpRequest();
xhr.open('POST','/get_error.php',false);
// 添加http頭，發送信息至服務器時內容編碼類型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// xhr.setRequestHeader('Content-Type','application/json');
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if (xhr.status==200 || xhr.status==304){
// console.log(xhr.responseText);
}
}
}
xhr.send(JSON.stringify(data));
},0);
var show_js_error = true;
if(show_js_error != true){
//關閉js報錯提示
return true;
}
};
</script>
</head>
<body>
<!--<script type="text/javascript" src="http://127.0.0.1/error.js"></script>-->
<script type="text/javascript" >
aa //故意報錯測試
// throw new Error('出錯了');
</script>
</body>
</html>
get_error.php
<?php echo '<pre>'; print_r($_REQUEST);
實例2（引入js插件）：
<!DOCTYPE html>
<html>
<head>
<title>Js錯誤捕獲</title>
</head>
<body>
<script type="text/javascript" src="badJsReport.js"></script>
<SCRIPT>
badJsReport({
url:'get_error.php', //發送到后台的url *必須
})
aa //故意報錯測試
// throw new Error("出錯了！");
</SCRIPT>
</body>
</html>
badJsReport.js
/** * Name: badJsReport.js * Version 1.1.0 * Author xiangyulaodi * Address: https://github.com/xianyulaodi/badJsReport * Released on: December 22, 2016 */ ;(function(){ 'use strict'; if (window.badJsReport){ return window.badJsReport }; /* * 默認上報的錯誤信息 */ var defaults = { msg:'', //錯誤的具體信息 url:'', //錯誤所在的url line:'', //錯誤所在的行 col:'', //錯誤所在的列 error:'', //具體的error對象 }; /* *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); //設置表單提交時的內容類型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } /* *格式化參數 */ 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("&"); } /* * 合並對象，將配置的參數也一並上報 */ function cloneObj(oldObj) { //復制對象方法 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() { //擴展對象 var args = arguments; if (args.length < 2) {return;} var temp = cloneObj(args[0]); //調用復制對象方法 for (var n = 1,len=args.length; n <len; n++){ for (var index in args[n]) { temp[index] = args[n][index]; } } return temp; } /** * 核心代碼區 **/ var badJsReport=function(params){ var MaxErrorReportLimit = 10; if(!params.url){return} window.onerror = function(msg,url,line,col,error){ // 同一個頁面最多上報10次錯誤，防止某個循環錯誤頁面一直打開，不斷的報錯 if (MaxErrorReportLimit-- < 0) return; //采用異步的方式,避免阻塞 setTimeout(function(){ //不一定所有瀏覽器都支持col參數，如果不支持就用window.event來兼容 col = col || (window.event && window.event.errorCharacter) || 0; defaults.url = url; defaults.line = line; defaults.col = col; if (error && error.stack){ //如果瀏覽器有堆棧信息，直接使用 defaults.msg = error.stack.toString(); }else if (arguments.callee){ //嘗試通過callee拿堆棧信息 var ext = []; var fn = arguments.callee.caller; var floor = 3; //這里只拿三層堆棧信息 while (fn && (--floor>0)) { ext.push(fn.toString()); if (fn === fn.caller) { break;//如果有環 } fn = fn.caller; } defaults.msg = ext.join(","); } // 合並上報的數據，包括默認上報的數據和自定義上報的數據 var reportData=extendObj(params.data || {},defaults); // 把錯誤信息發送給后台 ajax({ url: params.url, //請求地址 type: "POST", //請求方式 data: reportData, //請求參數 dataType: "json", success: function (response, xml) { // 此處放成功后執行的代碼 params.successCallBack&¶ms.successCallBack(response, xml); }, fail: function (status) { // 此處放失敗后執行的代碼 params.failCallBack&¶ms.failCallBack(status); } }); },0); return true; //錯誤不會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; }); }
get_error.php
<?php
echo '<pre>'; print_r($_REQUEST);