【前端】诸葛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个报错,十几种报错类型。。。。

完结,散花

原文地址:https://www.cnblogs.com/shamoyuu/p/zhuge_error.html