js window.onerror 错误监听，发到后台
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);
浙公网安备 33010602011771号