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

pf-web-monitor

v1.0.16

Published

监控SDK,一款自研的前端监控SDK,可用来收集并上报:代码报错、性能数据、用户行为、加载资源、个性化指标等数据

Downloads

8

Readme

功能

  • [√] ✈️ 错误捕获:代码报错、资源加载报错、接口请求报错
  • [√] ✈️ 性能数据:FP、FCP、LCP、CLS、TTFB、FID
  • [√] ✈️ 用户行为:页面点击、路由跳转、接口调用、资源加载
  • [√] ✈️ 个性化指标:Long Task、Memory 页面内存、首屏加载时间
  • [√] ✈️ 白屏检测:检测页面打开后是否一直白屏
  • [√] 🚀 手动上报错误
  • [√] 🚀 支持多种配置:自定义 hook 与选项
  • [√] 🚀 支持的 Web 框架:vue2、vue3、React

安装

$ npm i -S pf-web-monitor

Vue

import webMonitor from 'pf-web-monitor';

Vue.use(webMonitor, {
  host: 'http://localhost:8083/reportData', // 上报的地址
  apikey: 'project1', // 项目唯一的id
  userId: '89757', // 用户id
  silentRecordScreen: true, // 开启录屏
  silentWhiteScreen: true, // 开启白屏检测
  skeletonProject: true, // 项目是否有骨架屏
  whiteBoxElements: ['html', 'body', '#app', '#root'] // 白屏检测的容器列表
});

React

import webMonitor from 'pf-web-monitor';

webMonitor.init({
  host: 'http://localhost:8083/reportData',
  apikey: 'project1',
  userId: '89757'
});

配置项

| Name | Type | Default | Description | | :------------------------: | ---------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | host | string | "" | (必传项) 上报接口的地址,post 方法 | | apikey | string | "" | (必传项) 每个项目对应一个 apikey,唯一标识 | | userId | string | "" | 用户 id | | disabled | boolean | false | 默认是开启状态,为 true 时,会将 sdk 禁用 | | useImgUpload | boolean | false | 为 true 时,使用图片打点上报的方式,参数通过 data=encodeURIComponent(reportData) 拼接到 url 上,默认为 false | | throttleDelayTime | number | 0 | 默认会收集click到的标签,该参数可以设置按钮点击节流时间 | | overTime | number | 10 | 设置接口超时时长,默认 10s | | maxBreadcrumbs | number | 20 | 用户行为存放的最大容量,超过 20 条,最早的一条记录会被覆盖掉 | | recordScreentime | number | 10 | 单次录屏时长,silentRecordScreen 设为 true, 开启录屏该设置才有效 | | silentXhr | boolean | false | 默认会监控 xhr,为 true 时,将不再监控 | | silentFetch | boolean | false | 默认会监控 fetch,为 true 时,将不再监控 | | silentClick | boolean | false | 默认会监听 click 事件,当用户点击的标签不是 body 时就会被放入 breadcrumb,为 true,将不在监听 | | silentHistory | boolean | false | 默认会监控 popstate、pushState、replaceState,为 true 时,将不再监控 | | silentError | boolean | false | 默认会监控 error,为 true 时,将不在监控 | | silentUnhandledrejection | boolean | false | 默认会监控 unhandledrejection,为 true 时,将不在监控 | | silentHashchange | boolean | false | 默认会监控 hashchange,为 true 时,将不在监控 | | silentPerformance | boolean | false | 默认会上报性能指标,为 true 时,将不在监控 | | silentRecordScreen | boolean | false | 注意:默认不会开启录屏,为 true 时,开启录屏 | | silentWhiteScreen | boolean | false | 注意:默认不会开启白屏检测,为 true 时,开启检测 | | skeletonProject | boolean | false | 有骨架屏的项目建议设为 true,提高白屏检测准确性 | | whiteBoxElements | array | ['html', 'body', '#app', '#root'] | 白屏检测的容器列表,只有 silentWhiteScreen 为 true 时,才生效 | | filterXhrUrlRegExp | regExp | null | 默认为空,所有的接口请求都会被监听,不为空时,filterXhrUrlRegExp.test(xhr.url)为 true 时过滤指定的接口 | | beforePushBreadcrumb | function | null | (自定义 hook) 添加到行为列表前的 hook,有值时,所有的用户行为都要经过该 hook 处理,若返回 false,该行为不会添加到列表中 | | beforeDataReport | function | null | (自定义 hook) 数据上报前的 hook,有值时,所有的上报数据都要经过该 hook 处理,若返回 false,该条数据不会上报 |

白屏检测功能说明

该功能用来检测页面打开后,是否一直处于白屏状态,通过 silentWhiteScreen 设为 true 来开启

白屏检测功能使用:关键点采样对比 + 白屏修正机制,来确保白屏功能的正确性

对于有骨架屏的项目,如果页面一直显示骨架屏,也算是白屏的一种,有骨架屏的项目建议 skeletonProject 设为 true,提高白屏检测准确性

自定义 hook 示例

beforePushBreadcrumb

// 添加用户行为
push(data) {
  if (typeof this.beforePushBreadcrumb === 'function') {
    /**
      * 执行用户自定义的hook,若返回false,则这条数据不添加到列表中
      * @param { object } this 当前用户行为的实例
      * @param { object } data 要添加到用户行为列表的数据
      */
    let result = this.beforePushBreadcrumb(this, data);
    if (!result) return;
    this.immediatePush(result);
    return;
  }
  this.immediatePush(data);
}

beforeDataReport

// 上报数据前的hook
async beforePost(data) {
  let transportData = this.getTransportData(data);
  /**
  * 执行用户自定义的hook,若返回false,则这条数据不会进行上报
  * @param { object } transportData 当前要上报的数据
  */
  if (typeof this.beforeDataReport === 'function') {
    transportData = this.beforeDataReport(transportData);
    if (!transportData) return false;
  }
  return transportData;
}

手动上报错误示例

import webSee from 'web-monitor';

webSee.log({
  type: 'custom',
  message: '手动报错信息',
  error: new Error('报错'),
});