前端日志监控插件

Posted 2021-05-02 NodeShare

介绍

monitors-js 是一个轻量级前端错误监控插件

优点

1. 能够获取客户端浏览器环境

2. 支持amd

3. 记录用户操作

4. 自定义项目

5. 自定义过滤错误信息

6. 可选择错误等级

7. 自定义上报域名

8. 插件形式加载，可扩展性高，轻松自定义扩展

如何获取

通过以下方式都可以下载：

执行npm i monitors-js

如何使用

浏览器引入:

    直接引入
    <script src="monitors-js/lib/monitor.js"></script>
    插件引入
    <script src="monitors-js/lib/vuePlugin.js"></script>

模块引入:

    import Monitor from "monitors-js/lib/monitor.js"
    import vuePlugin from "monitors-js/lib/vuePlugin.js"
    var monitor = new Monitor({
        itemID: 'asdjasdtjk21b3k1j2g3',//唯一的项目Id
        url: '',//若autoPush为true 则自动上报异常 ，跨域需要配置
        autoPush: true,// 是否自动上报异常 ，默认为false
        match: ["localhost"],//需要上报的域名 开发环境下可以不选择上报
        exclude: ['WeixinJSBridge', 'x5onSkinSwitch'],//过滤的错误信息 根据details字段
    })
    //需要最先声明
    monitor
        .addPlugin(vuePlugin)//添加vueError监听 根据errorHandler函数
        .install()
        .on('captureBefore', (data) => {
            //上报异常触发的回调 data 是上报的参数
            console.log(data)
        })
    //设置
    monitor.setConfig({
        email:"[e-mail]",
        userName:"张三"
    })    
    new Vue({
        el: "#id",
        created: function () {
            console.log('c')
            1 / x
        },
        render: function (h) {
            return h('Button', 'click')
        }
    })

new Monitor(config)

Monitor构造函数	说明	类型	默认值
itemID	唯一项目Id	string	" "
url	若autoPush为true 则自动上报异常 ,跨域需要配置	string	" "
autoPush	若autoPush为true 则自动上报异常 ,跨域需要配置	boolean	true
match	需要上报的域名 ,开发环境下可以不选择上报	Array	[]
exclude	过滤的错误信息 ,根据details字段	Array	[]

可自定义扩展参数

实例方法	说明
addPlugin(function)	添加插件
install()	安装插件
on(type:string,callback:function)	监听事件，captureBefore
setConfig()	修改配置
pushException(op:object)	上传异常

监听事件

监听事件type	说明	类型
captureBefore	上传之前回调

扩展插件

    比如vue框架的扩展插件

    export default function vuePlugin() {
        const origin = Vue.config.errorHandler||function(){}
        Vue.config.errorHandler = (error, vm, info) => {
            let details = error.toString();
            let route = ''
            if (vm.$route && vm.$route.meta && vm.$route.meta.title) {
                route = vm.$route.meta.title
            } else if (vm.$route) {
                route = vm.$route.path
            }
            let data = {
                route: route,
                details: details + '   ' + info,
                errorDetails: error.stack,
            }
            this.pushException(data)//调用此方法提交异常

            origin(arguments)
        }
    }
    window.vuePlugin = vuePlugin

提交数据格式

    {
        browserName:'',
        phoneSystemType:'',
        phoneSystemVer:'',
        phoneName:'',
        reportTime:'',
        url:'',
        itemID:'',
        email:'',
        user:'',
        actions:[],
        route:'',
        details:'',
        errorDetails:''
    }