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

安装

版本V2.1.0

npm install monitor-web --save

导入

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

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

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

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

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

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

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

使用方法

js api配置项

字段名	值类型	是否必传	描述及默认值
config	Object	true	配置对象
config::url	String	true	上报接口url 必传
config::maxRetryCount	Number	false	日志上报失败重试次数, 默认值: 5
config::reportingCycle	Number	false	日志自动上报/清理周期, 单位/毫秒,默认值:10000
config::isLog	Boolean	false	是否在控制台打印上报情况, 默认值:true
config::appid	String	true	应用ID, 必传
config::appName	String	true	页面模块名称, 必传

创建实例

    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中使用.

参数	类型	是否必传	描述及默认值
error	Object	true	错误信息

以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

字段名	值类型	是否必传	描述及默认值
config	Object	true	配置对象
::url	String	true	上报接口url
::max_retry_count	Number	true	日志上报失败重试次数, 默认值: 5
::reporting_cycle	Number	true	日志自动上报日志队列周期, 单位/毫秒,默认值:10000
::app_name	String	true	页面模块名称, 必传
::is_log	boolean	true	是否在控制台打印上报情况, 默认值:true
::appid	String	true	应用ID
data	Array(LogData)	true	异常日志

代码逻辑异常日志字段

Object:LogData

字段名	值类型	是否必传	描述及默认值
log_type	String	true	错误日志类型, 代码错误或ajax错误
click_events	Array(Object)	true	点击报错时收集到的事件源及html结构路径
::height	Number	false	浏览器高度px
::width	Number	false	浏览器宽度px
::x	Number	false	鼠标位置x坐标
::y	Number	false	鼠标位置y坐标
::outer_html	String	false	点击元素标签以及子元素
::path	Array(Object)	false	点击事件源路径从window到事件源
::::node_name	String	false	标签名称
::::class_name	String	false	标签类名
::::id	String	false	标签ID
column_no	Number	true	报错代码起始列
line_no	Number	true	报错代码起始行
error_type	String	true	错误类型
error	String	true	完整异常信息
is_trusted	String	true	是否为用户操作事件导致的异常
msg	String	true	异常信息
path	String	true	页面路径
time	long	true	异常产生时间戳
user_agent	String	true	用户信息Navigator.userAgent(操作系统版本、浏览器内核、浏览器版本)
time_local_string	String	true	格式化后的时间
performance	Object	true	性能监控
::timing	Object	true	统计各阶段耗时
::memory	Object	true	内存占用情况
id	String	true	日志唯一ID
uuid	String	true	设备唯一ID

ajax网络异常日志字段

Object:LogData

字段名	值类型	是否必传	描述及默认值
log_type	String	true	错误日志类型, 代码错误或ajax错误
time	long	true	该条日志记录时间
time_local_string	String	true	格式化后的时间
level	String	true	该条日志的级别，分为 info、warn、error 3 种
messages	Array	true	请求状态、请求耗时、url、请求方式、发送数据、接收数据、状态码
path	String	true	该条日志所在页面的 URL
code	Number	true	请求状态码(如: 400、500等)
request_url	String	true	请求URL
request_body	Object	true	请求体参数
method	String	true	请求方式(如: "GET"、"POST"等)
response	String	true	返回数据
spend_time	Number	true	请求耗时
user_agent	String	true	用户信息Navigator.userAgent(操作系统版本、浏览器内核、浏览器版本)
performance	Object	true	性能监控
::timing	Object	true	统计各阶段耗时
::memory	Object	true	内存占用情况
click_events	Array(Object)	true	点击报错时收集到的事件源及html结构路径
::height	Number	false	浏览器高度px
::width	Number	false	浏览器宽度px
::x	Number	false	鼠标位置x坐标
::y	Number	false	鼠标位置y坐标
::outer_html	String	false	点击元素标签以及子元素
::path	Array(Object)	false	点击事件源路径从window到事件源
::::node_name	String	false	标签名称
::::class_name	String	false	标签类名
::::id	String	false	标签ID
id	String	true	日志唯一ID
uuid	String	true	设备唯一ID

---

二、埋点分析

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

使用方法

js api配置项

字段名	值类型	是否必传	描述及默认值
config	Object	true	配置对象
config::url	String	true	埋点上报接口Url
config::appid	String	true	分析用户下appID
config::appName	String	true	app名称

创建实例

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

实例方法

clickStat 埋点上报

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

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

参数	类型	是否必传	描述及默认值
eventName	String	true	埋点事件名
params	Any	false	埋点自定义携带的参数

例:

// 创建实例
    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

字段名	值类型	是否必传	描述及默认值
config	Object	true	配置对象
config::url	String	true	埋点上报接口Url
config::appid	String	true	分析用户下appID
config::app_name	String	true	app名称
data	Array(Object)	true	埋点数据
data::point_params	Any	false	埋点自定义携带参数
data::point_name	String	false	埋点事件名
data::uuid	String	true	设备ID
data::user_agent	Object	true	用户代理信息
data::performance	Object	true	性能信息
data::time_local_string	String	true	上报时间