monitor-web v2.1.2

web前端日志收集及埋点上报方案

安装

版本V2.1.2

npm install monitor-web --save

导入

功能分为MonitorWeb异常监控, 和AnalysisWeb埋点分析两部分, 可根据需要导入

import {MonitorWeb, AnalysisWeb} from 'monitor-web'

一、前端异常日志采集与上报

通过收集前端异常报错信息, 帮助开发者判断线上项目产生的问题;

适用大部分前端项目、PC、移动端、框架、原生

注意由于使用了indexDB作为本地存储, 暂不支持服务端渲染

上报接口请求方式为POST, 暂不支持更改

使用方法

js api配置项

创建实例

    new MonitorWeb({
        url: 'http://127.0.0.1:8888', // 上报url 必传!
        maxRetryCount: 5, // 上报重试次数
        reportingCycle: 10000, // 上报周期, 单位:毫秒
        appName: 'focus', // 页面项目名称 必传!
        isLog: true, // 是否在控制台打印日志及上报情况
        appid: 'yqnfFhj21'
    });

实例方法

catchError 手动将错误信息传入队列

一般在框架内部错误被拦截,无法被全局捕获时, 需使用框架自身的捕获报错的方法来将捕获到的异常信息传入上报队列

如vue有config.errorHandler, react有EerrorBoundary和unstable_handleError的方法;

当然, 也可在try catch中使用.

以vue举例:

// 在main.js中引入后, 自动注册为全局变量
import {MonitorWeb} from 'monitor-web'

// 将创建的实例赋给vue原型中方便调用
Vue.prototype.$MonitorWeb = new MonitorWeb(
    {
        url: 'http://127.0.0.1:8888', // 上报url 必传!
        maxRetryCount: 5, // 上报重试次数
        reportingCycle: 10000, // 上报周期, 单位:毫秒
        appName: '项目名称', // 项目名称 必传!
        isLog: true, // 是否在控制台打印日志及上报情况
        appid: 'appid' // 应用ID，必传
    }
)

// 在vue实例的config.errorHandler方法中, 将完整错误信息传入catchError等待上报
Vue.config.errorHandler = (err, vm, info) => {
  Vue.prototype.$MonitorWeb.catchError(err)
}

日志上报内容

接口及参数样例:

POST /weblog/logreport

代码逻辑异常日志字段

Object:LogData

ajax网络异常日志字段

Object:LogData

二、埋点分析

通过手动埋点方式, 收集用户操作信息, 帮助产品对用户行为以及各功能流程进行统计分析;

使用方法

js api配置项

创建实例

    new AnalysisWeb({ // 埋点相关配置
 		url: 'http://127.0.0.1:8888', // 埋点接口url, 必传
 		appid: '1000101', // 用户下该应用ID, 必传
 		appName: '本地测试应用' // 应用名称, 必传
    });

实例方法

clickStat 埋点上报

将方法放入需要埋点的流程代码中执行;

例如: 页面初始化、 登录、 注册成功、 跳转页面、游戏开始、游戏得分、游戏结束等关键步骤流程;

例:

// 创建实例
    let analysis = new AnalysisWeb({ // 埋点相关配置
        	url: 'http://127.0.0.1:8888', // 埋点接口url, 不传则默认使用日志上报url
            appid: '1000101', // 用户下该应用ID, 必传
            appName: '本地测试应用' // 应用名称
    });

// 在流程中调用
    analysis.clickStat('initPage', '进入页面')
// ...
    analysis.clickStat('login', {
        name: '登陆成功',
        userID: 'XXX'
    })
// ...
    analysis.clickStat('loadList', [
        {adName: '广告1', id: 'XXX'},
        {adName: '广告2', id: 'XXX'},
        {adName: '广告3', id: 'XXX'},
        {adName: '广告4', id: 'XXX'},
        {adName: '广告5', id: 'XXX'}
    ])

接口及参数样例:

POST /weblog/logreport