Destinteam-web-monitor NPM

destinteam-web-monitor 是DestinTeam制作的一款简易web监控sdk

destinteam-web-monitor SDK主要上报以下性能信息

url 上报页面地址
preUrl 来访上一页面URL
performance 页面性能数据详情，字段含义详情请参考后面内容
errorList 页面错误信息详情，包含js,img,ajax,fetch等所有错误信息，字段含义详情请参考后面内容
resoruceList 页面性能数据详情，当前页面所有资源性能详情信息，字段含义详情请参考后面内容
markUv 统计uv标识
markUser 从用户进入网站开始标识，直到用户离开销毁，可以用来做用户漏斗分析
time 当前上报时间
screenwidth 屏幕宽度
screenheight 屏幕高度
isFristIn 是否是某次会话的第一次进入
type 上报类型 1:页面级性能上报 2:页面ajax性能上报 3：页面内错误信息上报

浏览器页面直接引用资源方式：

1、下载 dist/destinteam-web-monitor.min.js 到本地
2、使用script标签引入到html的头部（备注：放到所有js资源之前）
3、使用WebMonitor函数进行数据的监听上报

<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="../dist/destinteam-web-monitor.min.js"></script>
  <script>
    WebMonitor({
        domain:'http://some.com/api', //Your API address
    })
  </script>
</head>

npm引入方式

npm install destinteam-web-monitor --save

import { WebMonitor } from 'destinteam-web-monitor'

WebMonitor({ 
  domain:'http://some.com/api' 
})

上报参数type值说明（重要）

type = 1: 页面级别性能数据上报，即页面加载|路由切换时页面性能数据的上报
type = 2: 页面已加载完毕，当进行某些操作请求了ajax信息时，对ajax性能数据的上报（如果ajax报错则上报错误信息）
type = 3: 页面已加载完毕，当进行某些操作报错时，对错误信息的上报

参数说明

同时传入 domain和传入的function ，function优先级更高，也就是说function会执行
domain ：上报api接口
outtime ：上报延迟时间，保证异步数据的加载（默认：300ms）
isPage ：是否上报页面性能数据（默认：true）
isResource ：是否上报页面资源性能数据（默认：true）
isError ：是否上报页面错误信息数据（默认：true）
isAjax ：是否上报ajax信息（默认：true）
add ：附带参数（值为json object 例如：{APPID:'123456789'}）
filterUrl ：不需要上报的ajax请求
fn ：自定义上报函数

案例

1、最简单最常用的上报
WebMonitor({
  domain:'http://some.com/api'  //你的api地址
})

2、加add参数上报
WebMonitor({
  domain:'http://some.com/api'  //你的api地址
  add:{
    appId:'123456789'
  }
})

3、自己写 fn上报
WebMonitor({},data=>{
  fetch('http://some.com/api',{
    type:'POST',
    report:'report-data',
    headers: {'Content-Type': 'application/json'},
    body:JSON.stringify(data)
  }).then((data)=>{})
})


4、完整版本的上报案例
WebMonitor({
    domain:'http://some.com/api', 
    outtime:500,
    isPage:true,
    isAjax:true,
    isResource:true,
    isError:true,
    add:{
      appId:'123456789'
    },
    filterUrl:['http://localhost:8080/xxx/xxx']
})

对外方法：

一：addError ：此方法向插件中自定义上报错误信息，vue,react，try{}catch 的报错信息均可采用此方法上报案例：

let message = 'js add error'
let col = 20
let line = 20
let resourceUrl = 'http://www.xxx.com/01.js'

WebMonitor.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
})

二：addData ：上报时自定义的数据案例：

WebMonitor.addData((data)=>{
  data.name = 'xiaoe'
  data.some = {
    name:'xiaoe',
    age:20
  }
})

USE Vue

If you use the Vue framework, you can do it like this.

1、Introduce WebMonitor
2、Copy the following code

import { WebMonitor } from 'destinteam-web-monitor'

Vue.config.errorHandler = function (err, vm, info) {
    let { message, stack } = err;

    // Processing error
    let resourceUrl,col,line;
    let errs = stack.match(/\(.+?\)/)
    if(errs&&errs.length) errs = errs[0]
    errs=errs.replace(/\w.+js/g,$1=>{resourceUrl=$1;return '';})
    errs=errs.split(':')
    if(errs&&errs.length>1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0)

    // Fixed parameters
    // Call the WebMonitor.addError method
    WebMonitor.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
    })
}

上报信息参数说明

parameter name	describe	explain
url	上报页面地址
markUv	统计uv标识
markUser	用户标识	可用来做UV统计，和用户行为漏斗分析
isFristIn	是否是每次会话的第一次渲染	可以用来做首屏渲染性能统计分类
type	上报类型	1:页面级性能上报 2:页面ajax性能上报 3：页面内错误信息上报
screenwidth	屏幕宽度
screenheight	屏幕高度
preUrl	上一页面

errorList	错误资源列表信息
->t	资源时间
->n	资源类型	resource，js，ajax，fetch,other
->msg	错误信息
->method	资源请求方式	GET，POST
->data->resourceUrl	请求资源路径
->data->col	js错误行
->data->line	js错误列
->data->status	ajax错误状态
->data->text	ajax错误信息

performance	页面资源性能数据(单位均为毫秒)
->dnst	DNS解析时间
->tcpt	TCP建立时间
->wit	白屏时间
->domt	dom渲染完成时间
->lodt	页面onload时间
->radt	页面准备时间
->rdit	页面重定向时间
->uodt	unload时间
->reqt	request请求耗时
->andt	页面解析dom耗时

resoruceList	页面资源性能数据
->decodedBodySize	资源返回数据大小
->duration	资源耗时
->method	请求方式	GET,POST
->name	请求资源路径
->nextHopProtocol	http协议版本
->type	请求资源类型	script，img，fetchrequest，xmlhttprequest，other

@babel/polyfill

@infinitebrahmanuniverse/nolb-des @everything-registry/sub-chunk-1471 @zalastax/nolb-des

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago