當前位置：首頁 > 科技 > 軟件

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

來源：責編：時間：2024-06-06 17:41:47 141觀看

導讀簡介sunshine-track 應用于前端監控，基于行為上報，實現了用戶行為、錯誤監控、頁面跳轉、頁面白屏檢測、頁面性能檢測等上報功能。適用于 Vue、React、Angular 等框架本項目源碼：https://github.com/sanxin-lin/sunsh

簡介

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 哦~

本文鏈接：http://www.tebozhan.com/showinfo-26-92466-0.html為了全面監控用戶行為，我寫了個超級前端工具庫！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：關于 Python 數據分析的 15 個 NumPy 應用

下一篇：動態鏈接庫的實現原理是什么？

標簽：

熱門焦點

MIX Fold3包裝盒泄露新機本月登場

小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
Redmi Buds 4開箱簡評：才199還有降噪可以無腦入

在上個月舉辦的Redmi Note11T Pro系列新機發布會上，除了兩款手機新品之外，Redmi還帶來了兩款TWS真無線藍牙耳機產品，Redmi Buds 4和Redmi Buds 4 Pro，此前我們在Redmi Note11T
一條抖音4億人圍觀 ! 這家MCN比無憂傳媒還野

作者：Hiu 來源：互聯網品牌官01 擦邊少女空降熱搜，幕后推手曝光被網友譽為“純欲天花板”的女網紅井川里予，近期因為一組哥特風照片登上熱搜，引發了一場互聯網世界關于
國行版三星Galaxy Z Fold5/Z Flip5發布售價7499元起

2023年8月3日，三星電子舉行Galaxy新品中國發布會，正式在國內推出了新一代折疊屏智能手機三星Galaxy Z Fold5與Galaxy Z Flip5，以及三星Galaxy Tab S9
OPPO K11評測：旗艦級IMX890加持 2000元檔最強影像手機

【Techweb評測】中端機型用戶群體巨大，占了中國目前手機市場的大頭，一直以來都是各手機品牌的“必爭之地”，其中OPPO K系列機型一直以來都以高品質、
OPPO Reno10 Pro英雄聯盟定制禮盒公布：薩勒芬妮同款配色夢幻十足

5月24日，OPPO推出了全新的OPPO Reno 10系列，包含OPPO Reno10、OPPO Reno10 Pro和OPPO Reno10 Pro+三款新機，全系標配了超光影長焦鏡頭，是迄今為止拍照
英特爾Xe-HP項目終止，將專注Xe-HPC/HPG系列顯卡

據10 月 31 日消息報道，英特爾高級副總裁兼加速計算系統和圖形事業部總經理表示，Xe-HP“ Arctic Sound” 系列服務器 GPU 已經應用于 oneAPI devcloud 云服
最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

2022年1月份在國際消費電子展(CES2022)上首次亮相的Alienware新品——Alienware X14現在已經可以購買了，這款筆記本電腦被譽為世界上最薄的 14 英寸游戲筆
蘋果MacBook Pro 2021測試：仍不支持平滑滾動

據10月30日9to5 Mac 消息報道，蘋果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后獲得了不錯的評價，亮點包括行業領先的性能，令人印象深刻的電池續航，精美豐

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

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

簡介

功能

上報數據格式

安裝