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

kmkf-monitor

v0.8.9

Published

监控 日志上报

Downloads

516

Readme

usage

  yarn add kmkf-monitor
  或者 通过cdn 方式引入  https://unpkg.com/kmkf-monitor/dist/umd/kmkf-monitor.min.js

  import Monitor from 'kmkf-monitor';

  Monitor.init(
  {
    appId: '', // 应用ID
    appName: '', // 应用名称
  },
  {
    url: '', // 上报地址
    frequency: 3000, // 默认当3s钟无新日志上报时,我们进行日志上报
    open: true, // 是否开启上报功能, 有些场景和环境可能不需要上报
    sendError: true, // 是否上报 js error
    sendRequest: true, //  是否上报request请求
    sendPerf: false, // 是否上报页面性能
    blackUrlList: [], // 黑名单列表 - 针对加载资源和接口错误上报控制
  }
);

options

options为当前上报日志时的一些常用信息,appId/appName为固定字段; 该字段可以根据 Monitor.setOptions({ buyerNick: '买家昵称', buyerOpenUid: '买家🆔', shopId: '店铺ID' }) 来设置一些我们当前环境信息;一旦设置之后,所有上报的日志都会添加上这些信息

config

config为日志上报功能配置项

  • url 上报地址
  • frequency 上报频率
  • open 是否开启上报功能 有些在测试环境下可能不需要开启上报功能
  • sendError 上报错误 包括js允许时异常、资源加载异常、console.error 这些都会上报
  • sendRequest 上报请求错误异常
  • sendPerf 开启性能检测
  • startBehavior 开启行为上报
    • 目前只有点击行为上报 并且dom节点上面必须有data-spm-click时才会进行上报,只有当存在data-spm-click这个点位信息时,才会认为其是有意义的点位
    • 并且最好在页面初始化时自动设置a点位和b点位到options中,这样可以通过a、b点位快速查找,目前只能针对Html原生标签上绑定才会获取到,针对ReactElement这些组件外层可能获取不到
  • blackUrlList 上报黑名单 针对一些内嵌的方式接入,会上报很多其他网站的日志信息到ES中,这里加个上报黑名单;上报黑名单只会针对资源加载和接口调用有效;一般配置域名既可以 例如:['im.kwaixiaodian.com'] 不希望快手的接口上报

API

  • setOptions({})

    • 配置options
  • automaticReport({})

  • 手动上报日志

  • sendClick({spmClick: 'd01111', spmParam: '携带参数' })

  • auto('b1234')

埋点约定

a 表示站点 b 表示页面 c 表示区块 d 表示点击dom点

错误类型

主类型:error 子类型:resource-load-error/js-runtime-error/console-error