總結看了很多很多的文章, 瞭解了很多方法, 但選出最適合自己的那個, 是最難的.
沒想明白的點
- 頁面卡死奔潰的時候, 如何發送異常 -> 心跳包, service worker發送數據
- 跨域問題: ->
- 儘可能的Patch信息, 但入侵業務太大了
- 解決打點GIF中的最大長度問題 ->
- 分成即時數據上報, 和行爲數據上報.
- http2/頭部壓縮
- 壓縮日誌長度
- 行爲數據較大, 走ajax, (只針對特定站點解決, 跨域問題).
- 行爲數據較大, 可以使用sendBeacon.
- 點擊的監聽事件, 在error後面執行, 如何保存起來 -> 後面的數據通過行爲數據上報. 錯誤全部走即時上報
- 其他script標籤引入的sdk中報錯, 如何捕獲 -> 如果想收集其他sdk的錯誤, 需要標明
<script crossorigin> - 異常隔離 -> 區分sdk異常和業務異常
前端監控的目的
- 瞭解線上性能信息, 提升用戶體驗
- 更快的發現異常, 定位異常, 解決異常
前端監控流程
採集 -> 上傳 -> 分析 -> 展示(報警)
採集
- 環境信息
- url: 頁面 -
window.location.href - ua: 用戶信息 -
window.navigator.userAgent - token: 前端網頁
- user: 業務相關用戶
- url: 頁面 -
- 性能信息
- 網絡層面
- 頁面展示層面
- 異常信息
- 語法錯誤
- 類型錯誤
- 範圍錯誤
- 引用錯誤
- eval錯誤
- URL錯誤
- 資源加載錯誤 (只能在捕獲階段獲取到)
- 接口信息
- XMLHttpRequest方法攔截
- Fetch方法
- 行爲信息
- 點擊
- 路由
- 滾動
- 鼠標
- 鍵盤等
- 用戶自定義信息
流程
- ajax
- new Image()
- sendBeacon
分析
- 日誌上報後, 進行清洗, 獲取想要的數據, 落庫.
- 數據量大的時候, 使用就需要使用Hadoop集羣