為了全面監控使用者行為，我寫了個超級前端工具庫！

2024-06-06碼農

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

簡介

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`