Efe-monitor-sdk NPM

efe-monitor-sdk

集成浏览器端页面性能，ajax/fetch/axios加载情况，错误信息，资源性能上报SDK

一、介绍

1、sdk分三种

一：所有类型通用的上报SDK 即：default.js
二：针对于使用Jquery ajax的上报SDK 即：ajax.js
三：针对于使用Axios ajax的上报SDK 即：fetch.js
通用版本适合所有上报情况
至于三种sdk的选择可酌情选择。通常来说专库专用会更好，因此使用jquery的推荐第二种，使用Axios、fetch的推荐第三种，其他情况使用通用版本
efe-monitor-sdk 只做页面性，错误信息，资源信息，ajax信息等上报，让你不用关心浏览器上报部分，是一个比较完整和健全的数据上报插件。
在此基础上你可以开发任何自己需要的性能上报系统。

2、efe-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、参数说明

domain ：上报api接口
outtime ：上报延迟时间，保证异步数据的加载（默认：300ms）
isPage ：是否上报页面性能数据（默认：true）
isResource ：是否上报页面资源性能数据（默认：true）
isError ：是否上报页面错误信息数据（默认：true）
isAjax ：是否上报ajax信息（默认：true）
add ：附带参数（值为json object 例如：{APPID:'123456789'}）
filterUrl ：不需要上报的ajax请求（例如开发模式下的livereload链接）

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

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

<html>
<head>
  <meta charset="UTF-8">
  <title>performance test</title>
  <script src="../dist/ajax.js"></script>
  <script>
    window.ajaxReport({
      domain:'http://192.168.99.115:7001/api/v1/report/web',
      add: {
        appId: 'xxx'
      }
    })
  </script>
</head>

3、npm引入方式

npm install efe-monitor-sdk --save

import {
  Performance, // default sdk
  // axiosReport,
  // jqueryReport
} from 'efe-monitor-sdk'

Performance({
  domain:'http://192.168.99.115:7001/api/v1/report/web',
  add: {
    appId: 'xxx'
  }
})

三、性能收集场景

在多页面中可加载插件后调用 window.ReportData() 方法直接上报。

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

// 在vue中可如此使用
router.afterEach((to, from, next) => {
  if(from.name){
    try{ window.ReportData(); }catch(e){}
  }else{
    addEventListener("load",function(){
      try{ window.ReportData(); }catch(e){}
    },false);
  }
})

// 在react中也可以使用 withRouter 对路由跳转后进行统一上报。

四、注意事项

jquery和axios JDK需要放在jquery 或 axios之后，不然ajax错误性信息无法采集
增加每次会话的第一次进入标识：isFristIn，客观的统计用户第一次进入页面性能数据
单页面应用程序路由切换时根据页面是否有ajax请求进行性能的上报

五、其他

1、完整上报参数

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

2、后期计划

...

sdk

@babel/runtime

@infinitebrahmanuniverse/nolb-ef @everything-registry/sub-chunk-1556

0.1.1

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago