淺聊前端埋點
埋點分類
埋點是一種收集資料的方式，通過上報收集的資料，來進行運營分析，監控頁面效能或異常。
通常分為程式碼埋點、視覺化埋點和無埋點（也有叫全埋點）幾類。
無埋點是自動採集事件進行資料上報， 例如百度統計、GrowingIO 等，實際上這個所謂的“無埋點”，只是相對於程式碼埋點少了加程式碼採集操作，相對於視覺化埋點少了圈選操作，視覺化埋點也屬於無埋點的一種，是指接入三方的 sdk 之後，sdk 會統計一些常見通用資料，例如頁面 PV/UV 等，視覺化埋點例如 GrowingIO 可以圈選元素，統計元素的點選資料。
上報哪些資料
通常來說產品運營想要了解使用者行為資料，所以會統計一些使用者行為相關的資料，如頁面瀏覽 PV/UV、 元素點選 PV/UV、元素曝光 PV/UV 、頁面停留時長、曝光時長等資料。這些資料大部分都可以通過無埋點和視覺化埋點來進行統計，無需過度侵入的程式碼開發即可實現。
uv可以用裝置唯一標識來過濾。頁面曝光也容易獲取一些，在頁面載入完成的時候進行上報，頁面停留時長可以再進入時記錄一下時間，離開記錄時間，時間差就是頁面的停留時長。但是頁面元素的曝光就比較麻煩了，元素在視窗內曝光上報，需要檢測元素何時在視窗中展示，何時離開視窗。一方面需要檢測進入和離開頁面時，元素是否在視窗，進入就在視窗需要上報，離開之前在視窗也需要上報，另一方面，頁面在滾動的時候，需要檢測元素是否進入和離開視窗。另外滾動檢測不可實時否則效能消耗過大，需要防抖節流。
檢測元素是否在視窗瀏覽器端可以用 Intersection observer 或者 getBoundingClientRect
技術可能想要檢視頁面的效能資料，收集錯誤資訊資料等，window.performance 效能表現資料等，這些引數傳遞和收集則需要用到程式碼埋點，即使也用第三方自定義事件收集也需要在程式碼裡新增收集資料，除了用三方 sdk 上報資料之外，有些公司可能有自己的大資料平臺或者為了資料安全，需要上報到自己的介面，這個時候就需要自研 sdk。
至於錯誤資料，如果不想自己程式碼裡上報，可以接一些開源庫例如 sentry，如果想自己研發和上報也可以借鑑 sentry 的做法，監聽錯誤事件，在錯誤事件裡上報錯誤資訊。
-
資源載入錯誤；可利用 addEventListener('error', callback, true)採集
-
js 執行錯誤；可利用 window.onerror 採集
-
promise 錯誤；可利用 addEventListener('unhandledrejection', callback)採集
資料上報方式
如果是有些自定義需求三方 sdk 無法滿足，則需要前端在程式碼裡進行埋點上報，那麼如何進行資料的上報，業界也有很多解決方案。
-
http 介面請求，可能遇到的問題，一般收集資料的域名和當前應用的域名不一致，介面上報會跨域，需要處理跨域，頁面銷燬後如何還能夠將未上傳的埋點資料成功上報。
-
img 標籤傳送請求，這種方式不存在跨域問題，這種使用方式也存在缺陷。首先對於 src 中的 URL 內容是有大小限制的，太大的資料量不適用。其次，在頁面解除安裝的時候，若存在資料未傳送的情況，會先將對應的資料傳送完，再執行頁面解除安裝。可能對於使用者體驗有一定的損耗。
-
Navigator.sendBeacon()用於通過 HTTP POST 將少量資料非同步傳輸到 Web 伺服器。它主要用於將統計資料傳送到 Web 伺服器，同時避免了用傳統技術（如：XMLHttpRequest）傳送分析資料的一些問題，can i use大部分瀏覽器已經相容了。
實際在上報過程中會sendBeacon結合img來使用。
資料收集之後的資料分析
資料可以根據需求存到日誌庫結合資料庫，如若需要視覺化，再把這些資料通過視覺化的方式繪製各種線圖餅圖供運營使用。當然也有已經成熟的一些三方統計已經提供了這些功能，如果能滿足需求也可。