1.0.3 • Published 5 years ago

fdpms-report v1.0.3

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

fdpms-report 是一款浏览器端页面性能，ajax, fetch ,错误信息，资源性能上报 SDK，资源小巧，性能强悍

forked from https://github.com/wangweianger/web-report-sdk

上报 sdk 有五种

  • 一 ：所有类型通用的上报 SDK 即：fdpms-report-default.js
  • 二 ：针对于使用 Jquery ajax 的上报 SDK 即：fdpms-report-jquery.js
  • 三 ：针对于使用 Axios ajax 的上报 SDK 即：fdpms-report-axios.js
  • 四 ：针对于使用 Fetch ajax 的上报 SDK 即：fdpms-report-fetch.js
  • 五 ：针对于业务代码手动触发的上报 SDK 即：fdpms-report-none.js
  • 通用版本适合所有上报情况

  • 至于四种 sdk 的选择可酌情选择。通常来说专库专用会更好，因此使用 jquery 的推荐第二种，使用 fetch 的推荐第三种,使用 Axios 的推荐第三种，其他情况使用通用版本

  • fdpms-report 只做页面性，错误信息，资源信息，ajax 信息等上报，让你不用关心浏览器上报部分，是一个比较完整和健全的数据上报插件。

  • 在此基础上你可以开发任何自己需要的性能上报系统。

fdpms-report 主要上报以下性能信息

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

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

  • 1、下载 dist/fdpms-report-default.min.js 到本地
  • 2、使用 script 标签引入到 html 的头部（备注：放到所有 js 资源之前）
  • 3、使用 performance 函数进行数据的监听上报
<html>
    <head>
        <meta charset="UTF-8" />
        <title>performance test</title>
        <script src="../dist/fdpms-report-default.min.js"></script>
        <script>
            Performance({
                domain: 'http://some.com/api', //Your API address
            })
        </script>
    </head>
</html>

npm 引入方式

npm install fdpms-report --save

import {
  Performance,
  axiosReport,
  defaultReport,
  fetchReport,
  jqueryReport,
  noneReport
} from 'fdpms-report'

webpack 使用

npm install fdpms-report --save
//New performance.js file
//The contents are as follows

import { Performance } from 'fdpms-report'

Performance({
    domain: 'http://some.com/api',
})
//Change webpack configuration

entry: {
    //add performance entry
    'performance':path.resolve(__dirname, '../src/performance.js'),
},

//change htmlWebpackPlugin config like this
//Attention to dependence
new htmlWebpackPlugin({
    ...
    chunks: ['vendors','performance','main'],
    chunksSortMode: 'manual',
}),

none JDK 使用方法

  • none JDK 在程序中使用 window.ReportData();来触发上报
  • 在多页面中可加载插件后调用 window.ReportData() 方法直接上报。
  • 在 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 对路由跳转后进行统一上报。

以下我根据此 SDK 开发的一款完整版本前端性能监控系统

https://github.com/fdpms/fdpms

SDK npm 地址

https://www.npmjs.com/package/fdpms-report

注意事项

  • jquery 和 axios JDK 需要放在 jquery 或 axios 之后，不然 ajax 错误性信息无法采集

单页面程序上报处理

  • 增加每次会话的第一次进入标识：isFristIn，客观的统计用户第一次进入页面性能数据
  • 单页面应用程序路由切换时根据页面是否有 ajax 请求进行性能的上报
  • 也可以自行使用 none 类型 jdk 配合路由钩子进行上报

上报参数 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 请求 （例如开发模式下的 livereload 链接）
  • fn ：自定义上报函数，上报方式可以用 ajax 可以用 fetch (非必填：默认使用 fetch,如果使用 ajax 则必须参数 report:'report-data'，如果是 fetch 则必须参数：type:'report-data')
  • 案例
1、最简单最常用的上报
Performance({
  domain:'http://some.com/api'  //你的api地址
})

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

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

4、自己写AJAX fn上报
Performance({},data=>{
  $.ajax({
    type:'POST',
    report:'report-data',
    contentType: 'application/json',
    data:{
      data:data
    },
    success:data=>{}
  })
})

5、完整版本的上报案例
Performance({
    domain:'http://some.com/api',
    outtime:500,
    isPage:true,
    isAjax:true,
    isResource:true,
    isError:true,
    add:{
      appId:'123456789'
    },
    filterUrl:['http://localhost:35729/livereload.js?snipver=1']
})

对外方法：

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

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

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

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

Performance.addData((data) => {
    data.name = 'wangwei'
    data.some = {
        name: 'wangwie',
        age: 20,
    }
})

USE Vue

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

  • 1、Introduce Performance
  • 2、Copy the following code
import { Performance } from 'fdpms-report'

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 Performance.addError method
    Performance.addError({
        msg: message,
        col: col,
        line: line,
        resourceUrl: resourceUrl,
    })
}

USE React

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

  • 1、Introduce Performance
  • 2、Error Handling in React 16. If you don't know Error Handling.Go to the official website to understand https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html react16 之后提供 Error Handling 处理报错机制，父组件新增 componentDidCatch 钩子函数，父组件只能监听子组件的异常信息
//Top reference
import { Performance } from 'fdpms-report'

//Parent component listens for subcomponent error information
componentDidCatch(error, info) {
    let {message,stack} = error

    // 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 Performance.addError method
    Performance.addError({
      msg:message,
      col:col,
      line:line,
      resourceUrl:resourceUrl
    })
}

Runing

git clone https://github.com/fdpms/fdpms-report.git
npm install

// Development
npm run dev

// product
npm run build

// test page
http://localhost:8080/test/

Return parameter description

parameter namedescribeexplain
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->coljs 错误行
->data->linejs 错误列
->data->statusajax 错误状态
->data->textajax 错误信息
performance页面资源性能数据(单位均为毫秒)
->dnstDNS 解析时间
->tcptTCP 建立时间
->wit白屏时间
->domtdom 渲染完成时间
->lodt页面 onload 时间
->radt页面准备时间
->rdit页面重定向时间
->uodtunload 时间
->reqtrequest 请求耗时
->andt页面解析 dom 耗时
resoruceList页面资源性能数据
->decodedBodySize资源返回数据大小
->duration资源耗时
->method请求方式GET,POST
->name请求资源路径
->nextHopProtocolhttp 协议版本
->type请求资源类型script，img，fetchrequest，xmlhttprequest，other

A complete report of the report looks like this.

{
  "time": 1524136760783,
  "preUrl": "",
  "appId":"123456789",
  "type": 1,
  "isFristIn": true,
  "markUv": "hzYyTkk2TzJ2M3dE1aR1539930145705",
  "markUser": "FtJ7BykWAPc3SyXQayd1539917250089",
  "url":"http://blog.seosiwei.com",
  "errorList": [
    {
      "t": 1524136759597,
      "n": "resource",
      "msg": "img is load error",
      "data": {
        "target": "img",
        "type": "error",
        "resourceUrl": "http://img1.imgtn.bd95510/"
      },
      "method": "GET"
    },
    {
      "t": 1524136759720,
      "n": "js",
      "msg": "ReferenceError: wangwei is not defined at http://localhost:8080/test/:73:15",
      "data": {
        "resourceUrl": "http://localhost:8080/test/",
        "line": 73,
        "col": 15
      },
      "method": "GET"
    },
    {
      "t": 1524136759764,
      "n": "fetch",
      "msg": "fetch request error",
      "data": {
        "resourceUrl": "http://mock-api.seosiwei.com/guest/order/api/order/getOrde",
        "text": "TypeError: Failed to fetch",
        "status": 0
      },
      "method": "POST"
    },
    {
      "t": 1524136759780,
      "n": "ajax",
      "msg": "ajax request error",
      "data": {
        "resourceUrl": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInf",
        "text": "ajax request error",
        "status": 0
      },
      "method": "GET"
    }
  ],
  "performance": {
    "dnst": 0,
    "tcpt": 0,
    "wit": 542,
    "domt": 693,
    "lodt": 872,
    "radt": 4,
    "rdit": 0,
    "uodt": 0,
    "reqt": 540,
    "andt": 168
  },
  "resourceList": [
    {
      "name": "http://localhost:8080/dist/fdpms-report.js",
      "method": "GET",
      "type": "script",
      "duration": "73.70",
      "decodedBodySize": 18666,
      "nextHopProtocol": "http/1.1"
    },
    {
      "name": "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js",
      "method": "GET",
      "type": "script",
      "duration": "0.00",
      "decodedBodySize": 0,
      "nextHopProtocol": "h2"
    },
    {
      "name": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=295864288,1887240069&fm=27&gp=0.jpg",
      "method": "GET",
      "type": "img",
      "duration": "0.00",
      "decodedBodySize": 0,
      "nextHopProtocol": "http/1.1"
    },
    {
      "name": "http://localhost:35729/livereload.js?snipver=1",
      "method": "GET",
      "type": "script",
      "duration": "149.00",
      "decodedBodySize": 0,
      "nextHopProtocol": "http/1.1"
    },
    {
      "name": "http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInfo",
      "method": "GET",
      "type": "fetchrequest",
      "duration": "48.80",
      "decodedBodySize": 0,
      "nextHopProtocol": "http/1.1"
    },
    {
      "name": "http://mock-api.seosiwei.com/guest/order/api/order/getOrder",
      "method": "POST",
      "type": "xmlhttprequest",
      "duration": "40.20",
      "decodedBodySize": 0,
      "nextHopProtocol": "http/1.1"
    }
  ],
  "addData": {
    "name": "wangwei",
    "some": {
      "name": "wangwie",
      "age": 20
    }
  }
}
@infinitebrahmanuniverse/nolb-fd@everything-registry/sub-chunk-1654
1.0.2

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago