npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

performance-report

v1.1.3

Published

A sound web performance data reporting plug-in.performance data.errors.Resource performance data.ajax.Vue and React can also use it.

Downloads

26

Readme

Sound and complete performance, error and resource reporting data.

performance-report It can help you complete the following functions:

  • report time
  • Current page URL
  • The last page URL
  • Current browser version information
  • Page performance data information
  • Current page error information
  • Current page all resource performance data .for example:ajax,css,img
  • Don't worry about blocking pages.The size of the compressed resource is less than 6KB.Async Report.

Chinese document

Complete front end performance monitoring system

https://github.com/wangweianger/web-performance-monitoring-system

new Performance monitoring system.

https://github.com/wangweianger/egg-mongoose-performance-system

Chinese document

https://blog.seosiwei.com/detail/30

npm address:

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

Browser usage

  • 1、download dist/performance-report.min.js
  • 2、The use of the script tag to the head of the HTML
  • 3、Using performance function to monitor and report data
<html>
<head>
  <meta charset="UTF-8">
  <title>performance test</title>
  <script src="../dist/performance-report.min.js"></script>
  <script>
    Performance({
        domain:'http://some.com/api', //Your API address
    })
  </script>
</head>

Webpack usage

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

import Performance from 'performance-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',
}),

Options

Performance({
    domain:'http://some.com/api', 
    outtime:500,
    isPage:true,
    isAjax:true,
    isResource:true,
    isError:true,
    add:{
      appId:'123456'
    },
    filterUrl:['http://localhost:35729/livereload.js?snipver=1']
},(data)=>{
  fetch('http://some.com/api',{
    type:'POST',
    credentials: 'include',
    headers: {'Content-Type': 'application/json'},
    type:'report-data',
    body:JSON.stringify(data)
  }).then((data)=>{})
})
  • At the same time, domain and function parameters are introduced, and function has higher priority.
  • domain :Report API interface
  • outtime :Reporting delay time to ensure asynchronous data loading (default:1000ms)
  • isPage :Whether to report page performance data (default:true)
  • isAjax : Whether to report ajax data (default:true)
  • isResource :Whether to report page resource performance data (default:true)
  • isError :Whether or not to report page error data (default:true)
  • filterUrl :A request that does not need to be reported
  • add : add option data
  • fn :Custom reporting function

Method

1、addError : Reporting custom error information. like vue,react,try{}catch.you can use it. for example:

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
})

2、addData : Custom data at the time of reporting for example:

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 'performance-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
//Top reference
import Performance from 'performance-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/wangweianger/performance-report.git
npm install

//Development
npm run dev

//product
npm run build

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

Return parameter description

| parameter name | describe | explain | | --- | --- | --- | | appVerfion | Current browser information | | | page | now page | | | preUrl | previous page | | | | | | | errorList | err list | | | ->t | now time | | | ->n | resource type | resource,js,ajax,fetch,other | | ->msg | error msg | | | ->method | resource request method | GET,POST | | ->data->resourceUrl | Request resource path | | | ->data->col | js error col | | | ->data->line | js error line | | | ->data->status | ajax error state | | | ->data->text | ajax error msg | | | | | | | performance | page resource performance data | | | ->dnst | DNS parsing time | | | ->tcpt | TCP set up time | | | ->wit | White screen time | | | ->domt | DOM rendering completion time | | | ->lodt | Page onload time | | | ->radt | Page preparation time | | | ->rdit | Page redirection time | | | ->uodt | unload time | | | ->reqt | request time consuming | | | ->andt | Page parsing DOM time consuming | | | | | | | resoruceList | Page resource performance data | | | ->decodedBodySize | body size | | | ->duration | Time consuming | | | ->method | Request method | GET,POST | | ->name | Request resource path | | | ->nextHopProtocol | HTTP protocol version | | | ->type | Request resource type | script,img,fetchrequest,xmlhttprequest,other |

A complete report of the report looks like this.

{
  "time": 1524136760783, 
  "page": "http://localhost:8080/test/", 
  "preUrl": "", 
  "appId":"123456",
  "markPage": "W3xtZaXDWQHDaank2ZeR31539600822860",
  "markUser": "W3xtZaXDWQHDaank2ZeR31539600820000",
  "appVersion": "5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36", 
  "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/performance-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
    }
  }
}