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 🙏

© 2026 – Pkg Stats / Ryan Hefner

cct-logger

v1.0.0

Published

logger前端日志收集器

Readme

cct-logger 前端日志收集器

该项目通过error事件与console输出方法拦截收集日志信息及输出信息,
所有的消息记录通过队列异步处理,并且对消息的长度可以限制并截取,
重复的报错信息将会被记录,但日志消息不会重复收集,
即使发生了循环或定时不停的出现日志也会处理,
日志消息队列异步执行,当长时间消息队列未清空处理时将强制执行一次清空处理,
同时也可以配置收集什么类型的日志信息,
日志消息将通过onMessage与onQueue两个回调将消息传递出去,
本项目负不负责消息的上传,只将处理结果通过回调函数返回。

安装

    // npm
    npm install --save cct-logger 
    // cnpm
    cnpm install --save cct-logger
    // yarn
    yarn add cct-logger

使用示例

import logger from '../src/index.js';
// 以下是所有可配置的默认参数,仅onMessage onQueue默认为null
logger.config({
  log: false, // 是否记录console.log输出
  warn: false, // 是否记录console.warn输出
  info: false, // 是否记录console.info输出
  error: true, // 是否记录console.error
  onerror: true, // 是否记录error事件的error信息
  maxDelay: 50, // 等待日志执行的最长时间,防止长时间有日志记录而无法执行日志队列
  delay: 50, // 日志队列延迟执行的时间,日志队列为了性能采用异步调用,当同时发生大量日志消息时将通过延迟处理
  maxLength: 1024, // 异常消息转json字符串后的最大长度
  maxRepeat: 10, // 重复的日志最大次数,当超过最大重复次数时会记录一条异常并标识为repeat
  maxQueue: 10, // 日志队列的最大长度,当超过最大长度限制时会强制清空并执行当前队列
  onMessage: message => {
    console.log('异常消息', message);
  },
  onQueue: list => {
    console.log('异常列表', list);
  }
});

注意事项

  1. 默认只开启了console.log与error事件的记录
  2. 如果开房了console.log的记录,那么在回调函数中不要再调用console.log方法否则将导致循环调用,其它方法也一样
  3. 所有的日志都将添加到队列中处理,但队列不是实时处理的,而是异步以提升性能,delay的时间即是异步的延迟时间,对于高频触发的日志,比如循环产生的日志或连续产生的日志,为了减少相同的日志冗余,不会将相同的日志添加到队列,但当重复的日志次数大于或等于maxRepeat时,会再发一次错误日志并配置repeat为true
  4. 如果连续性的日志输出导致一直在记录,因此当长时间没有队列被执行(一直在产生新的日志时),将会强制执行队列并清空当前队列,可以通过maxDelay设置最大队列等待执行时间,万一发生循环或定时不停的产生日志也能保证日志队列及时执行
  5. 当url发生变化时也将会监听url变化并记录最新的url信息

日志消息的数据示例

以下是error事件收集的日志数据结构

{
  "type": "onerror",
  "message": "Uncaught ReferenceError: abc is not defined",
  "filename": "http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js",
  "lineno": 12099,
  "colno": 13,
  "stack": "ReferenceError: abc is not defined\n    at Module../test/main.js (http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:12099:13)\n    at __webpack_require__ (http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:770:30)\n    at fn (http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:130:20)\n    at Object.0 (http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:12253:18)\n    at __webpack_require__ (http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:770:30)\n    at http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:908:37\n    at http://192.168.3.8:8080/js/app.88aa1f2e5583fe21f99c.js:911:10",
  "url": "http://192.168.3.8:8080/",
  "hash": "/",
  "href": "http://192.168.3.8:8080/#/",
  "repeat": false,
  "timestamp": 1584248050383,
  "bigMessage": false
}```
以下是通过console输出收集的日志数据结构
```json
{
  "type": "error",
  "message": "[\"custom error\"]",
  "url": "http://192.168.3.8:8080/",
  "hash": "/",
  "href": "http://192.168.3.8:8080/#/",
  "repeat": false,
  "timestamp": 1584248745545,
  "bigMessage": false
}