【前端】诸葛io收集前端js报错信息

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/zhuge_error.html

 

一、什么是诸葛io

诸葛io就是通过分析用户的操作事件对用户数据，行为路径等进行分析的一个数据分析工具。

可以看一下官方的demo，https://demo.zhugeio.com/apppanel/panel.jsp?app_id=35510

 

二、诸葛io怎么用

首先需要进行初始化，非常简单，先注册登录创建一个app，然后找到下面这段js，把它添加到项目的base.js或者common.js文件里，保证每个页面都可以用到。

 

诸葛只有track和identify两个常用方法，

track方法就是触发事件，它有3个参数，第一个参数的事件名，第二个参数是事件属性，第三个参数是回调函数，例如

zhuge.track('购买手机', {
    '手机' : '小米4',
    '价格' : 1799,
    '运营商' : '移动'
}, function(){
    console.info('发送事件成功')
);

 

identify方法是让用户“登录”到诸葛，这样就可以把这个用户所有的事件绑定在用户身上了，事件不再是独立的。它也有2个参数，第一个是用户id（也可以是用户的其他唯一标识），第二个是用户的属性，第三个参数是回调函数，例如

zhuge.identify('0202033', {
    name: '张三',
    //预定义属性
    gender: '男',
    //预定义属性
    '行业': '互联网' //自定义属性
},
function() {
    location.href = 'http://www.xxx.com/index.html'; //执行用户标识成功后的代码,比如跳转页面
});

identify事件只用调用一次就好了，不必每个页面都调用。

 

三、用诸葛io收集js报错

我们通过上面第二部分的内容知道了诸葛有个track方法，可以收集事件，我们就用它来收集我们的js报错事件。

window有个方法onerror，默认是null，如果页面有js报错就会触发它（必须不是trycatch里的，也不能被框架拦截掉）

它有6个参数，分别是errorMsg-简单的报错信息, errorFile-报错的文件, errorLine-报错在哪一行, errorColumn-报错在哪一列, errorData-报错的完整信息

然后我们重写这个方法就好了

window.onerror = function(errorMsg, errorFile, errorLine, errorColumn, errorData){
    try{
        errorData = errorData || {};
        errorFile = errorFile || "";
        track("代码异常", {
            errorMsg: errorMsg,
            errorFile: errorFile.split("?version")[0], //因为js文件加了版本号，所以需要去掉
            errorLine: errorLine,
            errorData: errorData.stack //errorData里的stack才是详细报错信息
        });
    }catch(e){}
}

然后就ok了，部署上线坐等代码报错（好像哪里不对）

这里一定要加trycatch，否则onerror里再报错就不好了

如果用了什么框架，这个onerror可能不会执行，可以修改框架源码报错的处理方法。

 

四、必要性

就是做上面这些是否真的有必要。

好吧，我以前对自己的代码非常自信，我觉得报错不大可能，因为每个页面的功能都正常，怎么可能报错，但现实是。。。

 

14号上线，15号一天接近4500个报错，十几种报错类型。。。。

 

完结，散花