monitor-track

前端监控及埋点 SDK 工具

使用

# using npm
$ npm install monitor-track -S

import Track from 'monitor-track';

const track = new Track();

track.init({
  // 由监控平台后台管理系统创建项目时生成
  projectID: '123',
  reportUrl: 'http://localhost:3008/report',
  spa: true,
  // 不是hash模式的项目一定要改成false，否则不能统计到pv的类型
  hash: true,
});

配置项

配置项	类型	必填	默认值	注释
reportUrl	string	是	''	上报地址，后台地址
projectID	string	是	''	项目 ID
spa	boolean	否	false	是否为单页面应用，主要区别页面性能，及路由切换行为
hash	boolean	否	false	路由是否为 hash 模式
enableBehavior	boolean	否	true	启用用户行为上报
enableError	boolean	否	true	启用异常信息上报
enableVisualTrack	boolean	否	false	启用可视化埋点上报
ignore	见下方 ignore	否	false	忽略上报的信息
customPayload	string	否	false	自定义 payload
enable	boolean	否	false	是否开启日志收集，默认关闭
maxLength	number	否	1000	最长上报数据长度
XMLHttpRequestTimeout	number	否	1000	上报 xhr 请求超过指定时间

ignore

参数	类型	必填	默认值	注释
urls	string[]	否	[]	忽略的 url
errors	string[]	否	[]	忽略的异常信息
apis	string[]	否	[]	忽略的接口

全局方法

//注意：以下window上的方法，如果没有enable埋点，那么这些window上的方法都不存在

//手动上报视频录像, 视频时间应当在30秒到60秒之间
if (typeof window.getRRWebUserEventsCaptureFunc ！== 'undefined') {
  window.getRRWebUserEventsCaptureFunc()
} else {
  //console.log('getRRWebUserEventsCaptureFunc is undefined, check monitor-track version!)
}

//手动截图, 图片内容包含整个页面内容，注意getFullScreenShootFunc返回一个Promise
if (typeof window.getFullScreenShootFunc ！== 'undefined') {
  window.getFullScreenShootFunc().catch((err) => { console.error('截图失败', err) })
} else {
  //console.log('getFullScreenShootFunc is undefined, check monitor-track version!)
}

//手动上报,data必须是一个对象
if (typeof window.manualReportTrackFunc ！== 'undefined') {
  window.manualReportTrackFunc(data)
} else {
  //console.log('manualReportTrackFunc is undefined, check monitor-track version!)
}

项目引入时，定义环境变量，防止开发环境中上报信息

// webpack中配置环境变量

new webpack.DefinePlugin({
  isDev: 'development',
});

const isDevEnv = typeof isDev !== 'undefined';

if (isDevEnv) {
  track.init({
    // 由监控平台后台管理系统创建项目时生成
    projectID: '123',
    reportUrl: 'http://localhost:3008/report',
    spa: true,
    // 不是hash模式的项目一定要改成false，否则不能统计到pv的类型
    hash: true,
  });
}