10-08 12:45 阅读 181

log.js - 只使用一行代码即可轻松获取前端日志

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 接口调用异常 终端信息
日志存储方式: localStroage sessionStorage 接口上报

作者：CLARK
链接：https://juejin.cn/post/7012115807693963295