logline 介绍
为何前端定位问题很困难
前端同学对此肯定深有体会, 代码 发出去之后,犹如脱缰的野马,运行在万千的客户终端上,等到产品和 后台 反馈问题到我们这边,很多时候定位问题只能靠猜,尤其是一些偶发诱因,因为根本不知道 用户 是如何操作的,真实环境遇到的问题通常是很多 随机 因素叠加的形成的,因此很难回放 用户 的操作来还原现场找到原因。这个时候,我们想,如果有 一个 像 后台 一样详实的可 分类 和检索的运行日志,无疑将会提供巨大的帮助。
应用场景
回放 用户 细节操作真实应用场景下, 用户 的行为可能是不可预料的,甚至 用户 自己也无法记得自己的操作,有了日志,我们有了回放 用户 操作和 代码 运行状态的能力。核心流程监控在产品的一些核心流程中,我们可以在 用户 出错的情况下主动 上传 用户 日志,以便我们可以 快速 统计 和定位 用户 遇到的问题。主动抓取 用户 的日志分析 用户 行为有时候在 用户 不配合开发人员的时候,我们可以设计一种策略,比如我们在线上发布 一个 json 文件 ,里面配置 一个 希望主动抓取日志的 用户 列表,当我们的产品在 用户 手机上被打开后,延时下载(避免影响主流程 性能 )这个json,当匹配当前 用户 时,直接主动上报该 用户 的日志。 统计 和辅助分析js 错误 我们可以记录js的报错,包含 调用 队列一起记录,直接 上传 此 错误 日志或者在累计达到 一个 阈值的时候统一 上传 。特性
零外部依赖
客户端存放(需要时再 获取 ,节省移动带宽、流量和连接数)
多维度过滤(命名空间、日志等级和关键词)
多个存储方案(Web sql 、localStorage和IndexedDB)
可清理(防止日志过多,占用 上传 带宽和占满 用户 允许的内存)
1.安装
npm install logline
2.引入脚本
Logline 支持 直接使用 script 标签 引用,也 支持 AMD 模块加载器。
// Script 标签 引入方式
<script src="./mod/logline.min.js"></script>
// AMD模块方式(如requirejs)
var Logline = require('./mod/logline.min');
// CMD引入方式(使用npm安装)
var Logline = require('logline');
// ES6引入方式(使用npm安装)
import Logline from 'logline';
3. 选择日志协议
目前一共 支持 三个协议, 三个协议都被直接挂载在Logline对象上以便一些特殊的应用场景,也更好的符合语义化:
web sql : Logline.PROTOCOL.WEB sql
indexeddb: Logline.PROTOCOL.INDEXEDDB
localstorage: Logline.PROTOCOL.LOCALSTORAGE
你可以在引入Logline之后,使用 using 主动选定 一个 期望使用的日志协议。
Logline.using(Logline.PROTOCOL.WEB sql );
网站地址 : https://stackblitz.com/edit/logline-playground?file=index.js
GitHub: https://github.com/latel/logline
网站描述: 轻量、实用和客户端级的前端日志记录工具
logline官方网站
官方网站: https://stackblitz.com/edit/logline-playground?file=index.js
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。