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

fe-monitor-report

v1.0.4

Published

前端监控上报系统,能够统计页面性能、ajax监控及页面错误,并能进行上报

Downloads

6

Readme

介绍

前端监控上报系统,能够统计页面性能、ajax监控及页面错误,并能进行上报

安装

// npm:
npm i fe-monitor-report -S
// 浏览器:
<scripe src="//www.example.com/asset/js/fe-monitor-report.js"></scripe>

使用

// npm
const Monitor = require('fe-monitor-report');
const monitor = new Monitor({
	// 上报地址
    reportUrl: 'http://localhost:8080/',
    // 监控的项目名称
    projectName: 'myProject',
    // 超时设置(包含资源请求超时、ajax超时等),单位毫秒。请求时间超过此值的请求将上报
    timeout: 3000,
    // 大小设置,单位字节B。资源大小超过此值的请求将上报,这里是300K
    maxSize: 300 * 1024,
    // 接口返回的code的字段名称
    ajaxSuccessField: '',
    // 某些公司接口http code一直返回200,而在response中提示错误。所以这里可以配置ajaxSuccessField和ajaxSuccessCode,如果response[ajaxSuccessField]不是ajaxSuccessCode配置的,这些接口将进行上报,如:
    //{
    //  "errno": 404,
    //  "errmsg": "接口不存在",
    //  "data": [],
    // }
    // 比如可设置
    // ajaxSuccessField: 'errno',
    // ajaxSuccessCode: 10000,
    ajaxSuccessCode: 0,

    // 用户自定义的其他的需要上报的数据
    customData: {},
});
monitor.init();

// 浏览器:
const monitor = new window.Monitor({
	// 接口返回的code的字段名称
    ajaxSuccessField: 'errno',
    ajaxSuccessCode: 200
});
monitor.init();

后端接口(nodejs版)

后端接口例子请参考report.js

Options

参数 | 解释 | 默认值 -|-|- reportUrl | 上报地址 | http://localhost:8080/ projectName | 监控的项目名称 | myProject timeout | 超时设置(包含请求超时、ajax超时等),单位毫秒。请求时间超过此值的请求将上报 | 3000 maxSize | 大小设置,单位字节B。资源大小超过此值的请求将上报 | 300 * 1024 ajaxSuccessField | 接口返回的code的字段名称 | '' ajaxSuccessCode | 接口返回的code的值 | 0 customData | 用户自定义的其他的需要上报的数据 | {}