如何自动捕获前端的异常

最近在做一个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

阅读 14.3k
4 个回答
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
    txt="There was an error on this page.\n\n"
    txt+="Error: " + msg + "\n"
    txt+="URL: " + url + "\n"
    txt+="Line: " + l + "\n\n"
    txt+="Click OK to continue.\n\n"
    alert(txt)
    return true
}

能获取行号

window.onerror = function() {
  alert(“发生错误!”);
  return true;
}

还有打开chrome的console看错误提示,有显示行号的,点进去还会进入js文件错误的字节上,还有断点测试~
window.onerror=function(a,b,c){
    //是有3个参数的 自己console 出来看看吧
}

老铁,用Fundebug的监控插件试试。Fundebug是前端JavaScript错误实时监控平台,经过大量兼容性调试,Fundebug的JavaScript监控插件已经能够在各种主流浏览器中自动捕获错误,并且可以获取最全面的错误信息,帮助开发者更快的Debug。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题