奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 >

vue前端异常监控

时间:2017-11-08 21:28来源:未知 作者:admin
前端虽说可以在开发的时候就及时找到js的错误,但有时开发者操之过急,或项目庞大的话,如果你没有一个及时的异常捕获,被用户或领导发现那么你的开发能力就大的折扣了。 使用
前端虽说可以在开发的时候就及时找到js的错误,但有时开发者操之过急,或项目庞大的话,如果你没有一个及时的异常捕获,被用户或领导发现那么你的开发能力就大的折扣了。

使用window.onerror来捕获异常。它有如下特点:

window.onerror的方案有如下特点:

  1. 可以捕捉语法错误,也可以捕捉运行时错误;
  2. 可以拿到出错的信息,堆栈,出错的文件、行号、列号;
  3. 只要在当前页面执行的js脚本出错都会捕捉到,例如:浏览器插件的javascript、或者flash抛出的异常等。
  4. 跨域的资源需要特殊头部支持。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue错误异常捕获</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{meinv}}
        <a @click="kn()">点击</a>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                meinv:'xltm'
            },
            methods:{
                kn:function () {
                    console.log(d) //此变量未定义
                }
            }
        })

window.onerror = function(msg,url,line,col,error){
    // //没有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)
    },0);

    return true;
};
    </script>
</body>
</html>

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片