最近在做一个js组件,满足两个条件:
1:捕获前端页面的异常
2:代码可以异步加载
现有方式两种,都有弊端
第一种是针对onError捕获,优点是兼容性好,缺点是捕获到的错误,没有细节,哪一行错了不知道【异步跨域的情况下,无法捕获详细信息】。
第二种是依赖try catch捕获,缺点是需要加入代码中,通用性不好。
求大神分享好的解决方案
2015年12月3日补充分割线。
之前我木有描述清楚,目标是做一个异步加载的组件,可以捕获网站的error数据
。
onError 对于非跨域下的兼容性和效果不错,但是对于跨域无法显示;这个是主要问题:各种网站都可以通过加载我的插件捕获错误和异常
demo代码如下
<!DOCTYPE html>
<html>
<head>
<title>测试错误错误捕获</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
/**
* @param {String} errorMessage 错误信息
* @param {String} scriptURI 出错的文件
* @param {Long} lineNumber 出错代码的行号
* @param {Long} columnNumber 出错代码的列号
* @param {Object} errorObj 错误的详细信息,Anything
*/
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
var info = "错误信息:" + errorMessage + "</br>" +
"出错文件:" + scriptURI + "</br> " +
"出错行号:" + lineNumber + "</br>" +
"出错列号:" + columnNumber + "</br>" +
"错误详情:" + errorObj + "</br></br>";
$("body").append(info);
}
</script>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="error.js"></script>
<script type="text/javascript" src="http://static.anquan.org/static/outer/js/aq_auth.js"></script>
error.js 里面代码如下
throw new Error("has error");
报错页面如下
非跨域错误捕获
错误信息:Uncaught Error: 出错了!
出错文件:http://cuihuan.net/xx/plug/errorPlug/error.js
出错行号:1
出错列号:1
错误详情:Error: has error
跨域错误捕获
错误信息:Script error.
出错文件:
出错行号:0
出错列号:0
错误详情:null
异步捕获数据都是null
能获取行号