簡(jiǎn)介

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

本項(xiàng)目源碼：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果覺(jué)得喜歡的話，可以點(diǎn)個(gè) star 哦~

功能

sunshine-track具備以下功能：

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

上報(bào)數(shù)據(jù)格式

安裝

圖片

使用

圖片

全局點(diǎn)擊監(jiān)聽(tīng)

可以通過(guò)配置globalClickListeners來(lái)對(duì)于某些DOM節(jié)點(diǎn)進(jìn)行點(diǎn)擊監(jiān)聽(tīng)上報(bào)

圖片

配置上報(bào)閾值

上報(bào)分為幾種：

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

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

圖片

配置緩存方式

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

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

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

打印上報(bào)數(shù)據(jù)

可以通過(guò)配置 log ，開(kāi)啟打印上報(bào)數(shù)據(jù)。

圖片

靈活上報(bào)請(qǐng)求數(shù)據(jù)

請(qǐng)求也是一種行為，也是需要上報(bào)的，或許我們有這個(gè)需求。

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

圖片

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

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

圖片

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

圖片

如果你不想用這個(gè)庫(kù)自帶的上報(bào)功能，想要自己上報(bào)，可以配置report中的customReport。

圖片

手動(dòng)上報(bào)

手動(dòng)上報(bào)分為三種：

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

圖片

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

圖片

配置參數(shù)

本項(xiàng)目源碼：https://github.com/sanxin-lin/sunshine-track。各位兄弟姐妹如果覺(jué)得喜歡的話，可以點(diǎn)個(gè) star 哦~