mk-report

v1.0.0

Published

2 years ago

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

Downloads

0High
0Medium
0Low

doudoudzj

mk-report

mk-report 是一款前端页面性能、ajax/fetch、错误信息和资源性能上报 SDK，资源小巧，性能强悍

SDK NPM 地址

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

SDK

上报 SDK 即：mk-report.js

mk-report 只做页面性，错误信息，资源信息，ajax 信息等上报

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

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

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

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

<html>
    <head>
        <meta charset="UTF-8" />
        <title>performance test</title>
        <script src="../dist/mk-report.min.js"></script>
        <script>
            Performance({
                domain: "https://domain.com/api", // Your API address
            });
        </script>
    </head>
</html>

npm 引入方式和使用

npm install mk-report --save

import {
    Performance,
    MKReport
} from "mk-report";

webpack 使用

npm install mk-report --save

//New performance.js file
//The contents are as follows

import { Performance } from 'mk-report'

Performance({
    domain: 'http://domain.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 SDK 使用方法

none SDK 在程序中使用 window.ReportData() 来触发上报
在多页面中可加载插件后调用 window.ReportData() 方法直接上报。
在 vue 中可如此使用：

router.afterEach((to, from, next) => {
    if (from.name) {
        try {
            window.ReportData();
        } catch (e) {}
    } else {
        window.addEventListener("load",
            function () {
                try {
                    window.ReportData();
                } catch (e) {}
            },
            false
        );
    }
});

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

单页面程序上报处理

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

上报参数 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: 'https://domain.com/api' // 你的api地址
})

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

// 3、自己写fetch fn上报
Performance({}, data => {
    fetch('https://domain.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: 'https://domain.com/api',
    outtime: 500,
    isPage: true,
    isAjax: true,
    isResource: true,
    isError: true,
    add: {
        appId:'123456789'
    },
    filterUrl:['http://localhost:35729/']
})

对外方法：

一：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 = "user1";
    data.some = {
        name: "user1",
        age: 20,
    };
});

使用 Vue

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

1、Introduce Performance
2、Copy the following code

import { Performance } from "mk-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,
    });
};

使用 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 'mk-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://gitlab.pnlyy.com/web/mk-report.git
npm install

// Development
npm run dev

// product
npm run build

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

Return parameter description

| parameter name | describe | ------------------- | ---------------- | url | 上报页面地址 | markUv | 统计 uv 标识 | markUser | 用户标识 | isFristIn | 是否是每次会 | type | 上报类型 | screenwidth | 屏幕宽度 | screenheight | 屏幕高度 | preUrl | 上一页面 | | | errorList | 错误资源列表信息 | ->t | 资源时间 | ->n | 资源类型 | ->msg | 错误信息 | ->method | 资源请求方式 | ->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 | 请求方式 | ->name | 请求资源路径 | ->nextHopProtocol | http 协议版本 | ->type | 请求资源类型 | explain | -------------- | ----------------------------------------------------------- | | | | | | 可用来做 UV 统计，和用户行为漏斗分析 | 话的第一次渲染 | 可以用来做首屏渲染性能统计分类 | | 1:页面级性能上报 2:页面 ajax 性能上报 3：页面内错误信息上报 | | | | | | | | | | | | | | resource，js，ajax，fetch,other | | | | GET，POST | | | | | | | | | | | | | 数据(单位均为毫秒) | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | GET,POST | | | | | | script，img，fetchrequest，xmlhttprequest，other |

A complete report of the report looks like this.

{
    "time": 1619682920703,
    "addData": {
        "name": "user1",
        "some": {
            "name": "user1",
            "age": 20
        }
    },
    "markUser": "wNRaXjibz61619180908779",
    "markUv": "nrpjdA3iPK1619628527056",
    "type": 1,
    "url": "http://127.0.0.1:7001/admin",
    "preUrl": "http://127.0.0.1:7001/web/setting",
    "errorList": [
        {
            "t": 1619680212359,
            "n": "js",
            "msg": "ReferenceError: setStorage is not defined\n    at xt.apps_config (http://127.0.0.1:7001/admin:422:17)\n    at xt.n [as apps_config] (http://127.0.0.1:7001/public/lib/vue/2.5.0/vue.min.js:6:1224)\n    at click (eval at _i (http://127.0.0.1:7001/public/lib/vue/2.5.0/vue.min.js:6:51457), <anonymous>:3:3198)\n    at HTMLButtonElement.t (http://127.0.0.1:7001/public/lib/vue/2.5.0/vue.min.js:6:6720)",
            "data": {
                "resourceUrl": "http://127.0.0.1:7001/admin",
                "line": 422,
                "col": 17
            },
            "method": "GET"
        }
    ],
    "performance": {
        "dnst": 0,
        "tcpt": 1,
        "wit": 14,
        "domt": 342,
        "lodt": 454,
        "radt": 1,
        "rdit": 0,
        "uodt": 0,
        "reqt": 11,
        "andt": 112
    },
    "resourceList": [
        {
            "name": "http://127.0.0.1:7001/public/lib/bootstrap/3.3.7/css/bootstrap.min.css",
            "method": "GET",
            "type": "link",
            "duration": "71.51",
            "decodedBodySize": 121200,
            "nextHopProtocol": ""
        },
        {
            "name": "http://127.0.0.1:7001/public/lib/jquery/3.3.0/jquery.min.js",
            "method": "GET",
            "type": "script",
            "duration": "72.58",
            "decodedBodySize": 86927,
            "nextHopProtocol": ""
        },
        {
            "name": "http://127.0.0.1:7001/public/font/JTUSjIg1_i6t8kCHKm459WlhzQ.woff",
            "method": "GET",
            "type": "css",
            "duration": "35.06",
            "decodedBodySize": 22804,
            "nextHopProtocol": ""
        },
        {
            "name": "http://127.0.0.1:7001/api/v1/system/getSysForUserId?token=yWARbQt1619170123423&_=1619682920282",
            "method": "GET",
            "type": "xmlhttprequest",
            "duration": "43.23",
            "decodedBodySize": 1058,
            "nextHopProtocol": "http/1.1"
        },
        {
            "name": "http://127.0.0.1:7001/public/img/loading.gif",
            "method": "GET",
            "type": "css",
            "duration": "6.27",
            "decodedBodySize": 1787,
            "nextHopProtocol": ""
        },
        {
            "name": "http://at.alicdn.com/t/font_865153_7somvh3yiok.woff2",
            "method": "GET",
            "type": "css",
            "duration": "16.41",
            "decodedBodySize": 5600,
            "nextHopProtocol": ""
        },
        {
            "name": "http://127.0.0.1:7001/public/img/favicon.ico",
            "method": "GET",
            "type": "other",
            "duration": "7.02",
            "decodedBodySize": 4286,
            "nextHopProtocol": "http/1.1"
        }
    ],
    "isFristIn": false,
    "screenwidth": 948,
    "screenheight": 984,
    "appId": "4ymy5hG1618294717123"
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

mk-report

mk-report 是一款前端页面性能、ajax/fetch、错误信息和资源性能上报 SDK，资源小巧，性能强悍

SDK NPM 地址

SDK

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

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

npm 引入方式和使用

webpack 使用

none SDK 使用方法

单页面程序上报处理

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

参数说明

对外方法：

使用 Vue

使用 React

Runing

Return parameter description

A complete report of the report looks like this.