通用前端监控采集脚本
https://github.com/saijs/sai.js
概述
整體上，前端監控包含很多方面，例如包括：
- JavaScript 異常監控
- 敏感信息監控
- DOM 合法性檢查
- 靜態資源監控
- 網站監控等
為了更好的擴展性，和結構上的簡單清晰，前端監控核心模塊提供了基礎的數據交換接口。 上層的監控模塊負責各自獨立的監控邏輯，并通過這個接口傳輸監控數據。
大致結構如下圖：
從上圖看，前端監控(Sai 模塊)提供了核心的?log()?接口， 和?on(),?off()?事件機制，其中?log()?接口提供了可擴展的數據傳輸方案，?on(),?off()?事件機制提供了簡單易用的擴展能力。
JSniffer 模塊提供了全局的 JavaScript 異常監控支持，并擴展了?error()?方法。 為開發者監控主動捕獲的異常做支持。
JSniffer 同時還擴展了?lost()?方法，在外部模塊或資源加載失敗時調用?lost()?方法，監控到 JavaScript 異常時，附加這些缺失的資源信息，輔助異常分析。
JavaScript 異常是前端監控中最重要、最常用的信息，同時為了簡化 API，所以將 這兩個接口擴展附加在 Sai 模塊上。
其他的 DOMLint, SENS 等第三方獨立的監控模塊，都直接調用?Sai.log()?接口 傳輸數據。
安裝
前端監控腳本拆分為兩個部分：
-
seer.js
小巧的先行腳本建議內聯（也可以外聯）在頁面頭部，在所有腳本和外部資源之前。 用于收集全局的異常，并為后續業務準備好可用的 API。
-
sai.js
后置監控模塊（這是一個 CMD 模塊）可以通過異步方式加載在頁面底部， 用于處理監控日志的發送和其他擴展支持。
使用說明
一般情況下，JavaScript 異常監控前置腳本已經自動收集了頁面上拋出的異常， 但也有部分場景，業務邏輯中 catch 捕獲住了拋出 JavaScript 異常，避免影響后續 的業務邏輯，但同時希望監控到這個異常場景，可以主動調用?Sai.error()?接口：
try{throw new Error("msg"); }catch(ex){ Sai.error(ex); }API
Sai.error(Error error)
JavaScript 異常監控的接口，可以用于主動監控被捕獲的 JavaScript 異常。
Sai.log(Object seed [, String profile])
前端監控的通用頻次監控接口。通過這個發送監控數據，并配合對應的日志處理和數據分析， 可以完成多種監控需求。
- seed: 詳情數據，可以是簡單的字符串，或者?key: value?鍵值對對象。
- profile: 日志類型，默認為?log。
Sai.on(String eventName, Function handler)
監控到特定類型的數據時，會觸發的特定事件。內置支持的事件類型包括：
- *: 發送所有類型的數據都會觸發。
- jserror: 發送 JavaScript 異常數據前觸發。
- log: 發送自定義 log 監控數據會觸發。
- 其他任意的自定義類型類似。
Sai.off(String eventName [, Function handler])
取消通過 on 綁定的事件。
Sai.lost(String uri)
頁面加載特定資源失敗時，可以調用這個方法。 缺失的資源對于異常分析有較大幫助。
范例：
<script src="sea.js" οnerrοr="window.Sai && Sai.lost && Sai.lost(this.src)"></script> <script> // seajs 2.1 開始支持，但 error 事件仍有缺陷，seajs 2.2 的 error 事件較適合本場景。 seajs.on("error", function(module){ window.Sai && Sai.lost && Sai.lost(module.uri); }); </script>轉載于:https://www.cnblogs.com/davidwang456/articles/9167999.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的通用前端监控采集脚本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用HMTL5 API监控前端性能
- 下一篇： 构建可靠的前端异常监控服务-采集篇