簡介

sunshine-track 應(yīng)用于前端監(jiān)控， 基于 行為上報，實現(xiàn)了 用戶行為、錯誤監(jiān)控、頁面跳轉(zhuǎn)、頁面白屏檢測、頁面性能檢測等上報功能。適用于 Vue、React、Angular 等框架

本項目源碼：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果覺得喜歡的話，可以點個 star 哦~

功能

sunshine-track具備以下功能：

• ? 用戶行為上報：包括 點擊、跳轉(zhuǎn)頁面、跳轉(zhuǎn)頁面記錄數(shù)組、請求 等
• ? 用戶手動上報：提供 Vue 自定義指令 以及add、report函數(shù)，實現(xiàn)用戶手動上報
• ? 自定義上報：提供 格式化上報數(shù)據(jù)、自定義上報函數(shù)、自定義決定上不上報 等配置項，更靈活地上報數(shù)據(jù)
• ? 請求數(shù)據(jù)上報：提供 檢測請求返回、過濾請求 等配置項，讓用戶決定上報哪些請求數(shù)據(jù)
• ? 上報方式：提供 上報方式 配置項，用戶可選擇 img、http、beacon 三種方式，http方式又支持 xhr、fetch 兩種，且支持 自定義headers
• ? 上報數(shù)據(jù)緩存：可配置 本地緩存、瀏覽器本地緩存、IndexedDB 三種方式
• ? 上報數(shù)據(jù)閾值：可配置上報數(shù)據(jù) 閾值 ，達(dá)到 閾值 后進(jìn)行上報操作
• ? 全局點擊上報：可通過配置 選擇器、元素文本，對全局DOM節(jié)點進(jìn)行點擊上報
• ? 頁面的性能檢測，包括 白屏、FP、FCP、LCP、CLS、TTFB、FID 等

上報數(shù)據(jù)格式

安裝

圖片

使用

圖片

全局點擊監(jiān)聽

可以通過配置globalClickListeners來對于某些DOM節(jié)點進(jìn)行點擊監(jiān)聽上報

圖片

配置上報閾值

上報分為幾種：

• 用戶行為上報：點擊、跳轉(zhuǎn)頁面、請求，這些上報數(shù)據(jù)會緩存著，當(dāng)達(dá)到閾值時再進(jìn)行上報
• 錯誤上報：請求報錯、代碼報錯、異步錯誤，這些是立即上報
• 頁面性能上報：白屏、FP、FCP、LCP、CLS、TTFB、FID，這些是立即上報

用戶行為上報的閾值默認(rèn)是 10，支持自定義 maxEvents

圖片

配置緩存方式

如果你想要避免用戶重新打開網(wǎng)頁之后，造成上報數(shù)據(jù)的丟失，那么你可以配置緩存方式，通過配置cacheType：

• normal：默認(rèn)，本地緩存
• storage：瀏覽器 localStorage 本地緩存
• db：瀏覽器 IndexedDB 本地緩存

app.use(Track, {
  ...options,
  cacheType: 'storage' // 配置緩存方式
})

打印上報數(shù)據(jù)

可以通過配置 log ，開啟打印上報數(shù)據(jù)。

圖片

靈活上報請求數(shù)據(jù)

請求也是一種行為，也是需要上報的，或許我們有這個需求。

• 過濾：某些請求我們并不想上報。
• 自定義校驗請求響應(yīng)數(shù)據(jù)：每個項目的響應(yīng)規(guī)則可能都不同，我們想自己判斷哪些響應(yīng)是成功，哪些是失敗。

圖片

格式化上報數(shù)據(jù)、自定義決定上不上報、自定義上報

如果你想在數(shù)據(jù)上報之前，格式化上報數(shù)據(jù)的話，可以配置report中的format。

圖片

如果你想要自己決定某次上報的時候，進(jìn)行取消，可以配置report中的isReport。

圖片

如果你不想用這個庫自帶的上報功能，想要自己上報，可以配置report中的customReport。

圖片

手動上報

手動上報分為三種：

• 手動添加上報數(shù)據(jù)：添加到緩存中，等到達(dá)到閾值再上報。
• 手動執(zhí)行數(shù)據(jù)上報：立即上報。
• 自定義指令上報：如果你是 Vue 項目，支持指令上報。

圖片

如果你是 Vue 項目，可以使用指令v-track進(jìn)行上報。

圖片

配置參數(shù)

本項目源碼：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果覺得喜歡的話，可以點個 star 哦~