1.0.0 • Published 4 years ago

cct-logger v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

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
}