本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
简介
sunshine-track 应用于前端监控， 基于 行为上报，实现了 用户行为、错误监控、页面跳转、页面白屏检测、页面性能检测等上报功能。适用于 Vue、React、Angular 等框架
本项目源码：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果觉得喜欢的话，可以点个 star 哦~
功能
sunshine-track具备以下功能：
✅ 用户行为上报：包括
点击、跳转页面、跳转页面记录数组、请求等✅ 用户手动上报：提供
Vue 自定义指令以及add、report函数，实现用户手动上报✅ 自定义上报：提供
格式化上报数据、自定义上报函数、自定义决定上不上报等配置项，更灵活地上报数据✅ 请求数据上报：提供
检测请求返回、过滤请求等配置项，让用户决定上报哪些请求数据✅ 上报方式：提供
上报方式配置项，用户可选择img、http、beacon三种方式，http方式又支持xhr、fetch两种，且支持自定义headers✅ 上报数据缓存：可配置
本地缓存、浏览器本地缓存、IndexedDB三种方式✅ 上报数据阈值：可配置上报数据
阈值，达到阈值后进行上报操作✅ 全局点击上报：可通过配置
选择器、元素文本，对全局 DOM 节点进行点击上报✅ 页面的性能检测，包括
白屏、FP、FCP、LCP、CLS、TTFB、FID等
上报数据格式
| 选项 | 描述 | 类型 |
|---|---|---|
uuid | 上报数据的 id | string |
type | 上报数据的类型 | string |
data | 上报数据 | any |
time | 上报时间 | number |
status | 上报状态 | string |
domain | 当前域名 | string |
href | 当前网页路径 | string |
userAgent | 当前 user-agent | string |
deviceInfo | 设备的相关信息 | object |
安装
使用
全局点击监听
可以通过配置globalClickListeners来对于某些 DOM 节点进行点击监听上报
配置上报阈值
上报分为几种：
用户行为上报：点击、跳转页面、请求，这些上报数据会缓存着，当达到阈值时再进行上报
错误上报：请求报错、代码报错、异步错误，这些是立即上报
页面性能上报：白屏、FP、FCP、LCP、CLS、TTFB、FID，这些是立即上报
用户行为上报的阈值默认是 10，支持自定义 maxEvents
配置缓存方式
如果你想要避免用户重新打开网页之后，造成上报数据的丢失，那么你可以配置缓存方式，通过配置cacheType：
normal：默认，本地缓存
storage：浏览器 localStorage 本地缓存
db：浏览器 IndexedDB 本地缓存
app.use(Track, { ...options, cacheType: 'storage' // 配置缓存方式})打印上报数据
可以通过配置 log ，开启打印上报数据
灵活上报请求数据
请求也是一种行为，也是需要上报的，或许我们有这个需求
过滤：某些请求我们并不想上报
自定义校验请求响应数据：每个项目的响应规则可能都不同，我们想自己判断哪些响应是成功，哪些是失败
格式化上报数据、自定义决定上不上报、自定义上报
如果你想在数据上报之前，格式化上报数据的话，可以配置report中的format
如果你想要自己决定某次上报的时候，进行取消，可以配置report中的isReport
如果你不想用这个库自带的上报功能，想要自己上报，可以配置report中的customReport
手动上报
手动上报分为三种：
手动添加上报数据：添加到缓存中，等到达到阈值再上报
手动执行数据上报：立即上报
自定义指令上报：如果你是 Vue 项目，支持指令上报
如果你是 Vue 项目，可以使用指令v-track进行上报
配置参数
| 选项 | 描述 | 类型 |
|---|---|---|
projectKey | 项目 key | string |
userId | 用户 id | string |
report.url | 上报 url | string |
report.reportType | 上报方式 | img、http、beacon |
report.headers | 上报自定义请求头，http 上报模式生效 | object |
report.format | 上报数据格式化 | function |
report.customReport | 自定义上报 | function |
report.isReport | 自定义决定上不上报 | function |
cacheType | 数据缓存方式 | normal、storage、db |
globalClickListeners | 上报状态 | array |
log | 当前域名 | boolean |
maxEvents | 上报阈值 | number |
historyUrlsNum | 需要记录的 url 跳转数组 | number |
checkHttpStatus | 判断响应数据 | function |
filterHttpUrl | 过滤上报请求数据 | function |
switchs.xhr | 是否开启 xhr 请求上报 | boolean |
switchs.fetch | 是否开启 fetch 请求上报 | boolean |
switchs.error | 是否开启错误上报 | boolean |
switchs.whitescreen | 是否开启白屏检测上报 | boolean |
switchs.hashchange | 是否开启 hash 变化请求上报 | boolean |
switchs.history | 是否开启 history 变化上报 | boolean |
switchs.performance | 是否开启页面性能上报 | boolean |
本项目源码：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果觉得喜欢的话，可以点个 star 哦~
结语
我是林三心
一个待过小型 toG 型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
一个偏前端的全干工程师；
一个不正经的掘金作者；
逗比的 B 站 up 主；
不帅的小红书博主；
喜欢打铁的篮球菜鸟；
喜欢历史的乏味少年；
喜欢 rap 的五音不全弱鸡如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球 rap，可以来俺的摸鱼学习群哈哈，点这个，有 7000 多名前端小伙伴在等着一起学习哦 -->