logjs.npm

v1.2.1

Published

2 years ago

The front-end log can be easily obtained with only one line of code

Downloads

0High
0Medium
0Low

fanliang

log web probe pv uv js html react vue

v1.1.0发布啦! 在上次 v1.0.0 发布之后，我收到了很多关于优化和完善的建议，在这里感谢大家的关注和建议，v1.1.0 为大家带来了 新的终端信息捕获 以及 indexDB存储模式支持

开源地址戳这里这是开源地址欢迎大家来提交 issues，我会在第一时间进行回复.

什么是 `log.js`

log.js 是一个前端监控插件，您只需要一行代码就可以对您的 web应用进行 性能 错误 终端信息 等监控

一个简单的使用栗子

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <script src="./log.min.v.1.1.7.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秒之内的日志.

我可以自己定义我的数据结构吗

当然可以！为了满足不同场景下不同字段的需求，我在 日志上报前(reportingBefore) 以及 接口调用前(requestingBefore) 提供了 before类的 API，方便开发者进行数据结构的调整以及公共参数的注入.

我如何快速找到我想要的本地日志

目前这项功能正在规划中，预计在 v1.2.0 版本中会提供本地的日志快速查询功能，方便开发者快速定位日志.

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)

//为某一时刻创建时间监听，每隔 第二个参数（单位 毫秒）调用 第一个参数

可获取终端信息

key - 描述 - 枚举值

resolving_power - 屏幕分辨率 - xx*xx

operating_system - 终端系统 - Mac / iPhone / Unix / Android / Linux / Win2000 / WinXP / Win2003 / WinVista / Win7 / Win8 / Win8.1 / Win10 / other

is_mobile_terminal - 是否为移动端 - true / false

browser_core - 浏览器内核 - IE / Opera / WebKit / Firfox / weixin / qq / other

referrer - 上一跳链接地址 - string / -

ip - 终端IP - string / -

city - 终端城市名称 - string / -

更新日志

V1.2.0 规划

[ ] 本地日志快速查询功能，帮助开发者快速定位错误日志
[ ] web应用构建时常捕获，以及构建中异常文件信息抓取
[ ] 日志上报方式调整
[ ] websocket 错误信息捕获
[ ] 页面错误率，PV / UV 统计
[ ] 常用端支持情况测试发布

V1.1.0 (2021/09/30)

indexDB 日志存储模式支持(优先采用 indexDB 方式进行本地日志存储，localStroage 等减少使用场景，避免冲击业务系统使用)
referer 页面停留时间 信息捕获
代码架构调整拆分基础捕获能力与高级捕获能力

V1.0.0 (2021/09/26)

捕获能力: JS执行错误 fetch/xhr 接口调用 页面点击 fetch/xhr 接口调用异常 终端信息
日志存储方式: localStroage sessionStorage 接口上报
数据结构自定义以及接口统一参数注入