bmfe_monitor_tool

介绍

前端监控平台

项目结构

|-- dist
|-- index.js
|-- src
    |-- debug
    |-- performance
    |-- utils

安装教程

1. npm i bmfe_monitor_tool

使用说明

在入口文件处引入

    import { BM_perf,BM_debug } from 'bmfe_monitor_tool'

    // 初始化错误监控配置
    BM_debug.init({
        project: 'wechatV2', // 必填，项目名称
        reportUrl: 'https://test1.benmu-health.com/fe/monitor/exception', // 必填，后端日志地址
        extra: {
            openId: GLOBAL.useInfo.openId // 非必填，额外配置，一般为用户信息，方便定位问题
        },
        prodHost: ['wechat.benmu-health.com','test2.benmu-health.com'], // 非必填，生产环境域名，其余域名认为是开发环境，不进行监控，不配置时默认任何域名都会监控
        type: 'vue' // 非必填，框架类型
    }, Vue)

    // 因为我们的接口请求会包一层promise，所以接口报错时，也会报promise错误
    // 因此需要在promise报错中过滤接口报错
    function fliterFn(reason) {
        // 如果存在msg或者resCode，此种格式可以认为是接口报错，返回true过滤掉
        if (reason.msg || reason.resCode) return true
    }
    BM_debug.filterPromiseErr(fliterFn) // 配置过滤promise错误的函数

    // 启动错误监控
    BM_debug.install()

    // 初始化性能监控配置，性能监控不需要install
    BM_perf.init({
        project: 'wechatV2',
        reportUrl: 'https://test1.benmu-health.com/fe/monitor/apm',
        prodHost: ['wechat.benmu-health.com','test2.benmu-health.com'], // 生产环境域名，其余域名认为是开发环境，不进行监控
        extra: {
            openId: GLOBAL.useInfo.openId
        }
        analyzeShow: true, // 是否在控制台展示分析数据，默认为false
        detailShow: true // 是否在控制台展示详细原始数据，默认为false
    });

注意事项

资源文件和项目域名不一致，所以请求会涉及到跨域问题，js中的错误会报Script error.，解决方法就是CORS，即脚本中增加crossorigin="anonymous"，然后在ng上配置Access-Control-Allow-Origin: *。