log.js v1.0 版本发布啦,在大家的帮助下,第一个版本终于面世了,欢迎大家提出建议或者意见,我都会尽快给出回复。当然大家能够 star 一下那是更好了 哈哈
开源地址戳这里 这是开源地址欢迎大家来提交 issues,我会在第一时间进行回复。
什么是 log.js
log.js 是一个前端监控插件,您只需要一行代码就可以对您的 web应用 进行
性能错误终端信息等 监控
一个简单的使用栗子
<head>
<meta charset="UTF-8">
<title>示例</title>
<script src="./log.min.js"></script>
</head>
<body>
<script>
log.init();
</script>
</body>
//React / Vue 工程下
npm i logjs.npm
import log from 'logjs.npm';
log.init();
作为一个 web开发者,我深知阅读 api文档 的痛苦,所以我选择将 log.js 设计成 开箱即用 的模式,仅需要调用 log.init 即可启动他
日志信息将去往哪里
log.js 本身并不会私自进行上报,仅在您配置了上报相关的配置后,他会以 web应用 无感知的方式进行日志的上报,同时,他也提供了日志本地存储的能力.
日志将怎么存储
日志默认采用 5秒 捕获一次的方式进行 存储与上报,在一个频次下 会捕获 上一个 5秒 之内的 日志.
API
log.init
log.init();//默认模式启动
log.init({
id: 'log-id',//为终端携带特殊标识,会携带在上报报文中
path: '<https://test.do>',//上报地址,默认 POST JSON 形式进行上报
logType: ['click', 'error', 'request'],//捕捉日志类型,默认捕捉所有类型日志
requestingBefore: (params, terminalInfo) => do something; //调用请求接口前,为接口调用设置统一参数, params - 接口参数,terminalInfo - 终端信息,默认使用 params 作为参数
reportingBefore: (params) => do something; //报文上报前,为上报报文调整数据结构 默认使用 params
})
log.durationLog
log.durationLog((terminalInfo)=>{
do something;
}, 5000)
//为某一时刻创建时间监听,每隔 第二个参数(单位 毫秒)调用 第一个参数
更新日志
V1.1.0 - 功能规划
- 存储模式支持
indexDB - 上报时机调整为
空闲模式上报,减少对业务系统的性能影响
V1.0.0 - 功能(已实现)
- 捕获能力:
JS执行错误fetch/xhr 接口调用页面点击fetch/xhr 接口调用异常终端信息 - 日志存储方式:
localStroagesessionStorage接口上报