README.md · whf605319646/log.js

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

[开源地址戳这里](https://gitee.com/clark-fl/log.js) 这是开源地址欢迎大家来提交 issues，我会在第一时间进行回复.

## 什么是 **`log.js`**

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

## 一个简单的使用栗子

```jsx
<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秒 之内的 日志.

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

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

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

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

## API

### log.init

```jsx
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

```jsx
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` `接口上报`
- **数据结构自定义以及接口统一参数注入**

whf605319646/log.js

简介

发行版

贡献者

近期动态

whf605319646/log.js .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

whf605319646/log.js