一款輕量好用的頁面錯誤監控平臺—— FrontJS

蒲公英開發者服務平臺發表於2018-01-03

先放連結:www.frontjs.com/

FrontJS 最早是用於蒲公英旗下專案管理平臺 Tracup 中的一個效能工具,也就是我們一個月前推出的 frontend-tracker,釋出後在一些社群內也有一些良好的反應。

當我們嘗試在蒲公英上使用這款工具的時候也出現了一些問題,比如,蒲公英每天能產生千萬級別的訪問資訊,這使得原有的統計分析效能變得不是很理想,這對於一款統計分析為主的產品來說是致命的。

我們及時調整了從於資料單元到分析單元的結構和程式碼,在不增長機器數量的情況下解決了這個問題。

現在,一款簡單的效能工具也變成了一個效能監控平臺,我們有信心面對更大的資料量,於是我們把這個平臺開放出來,讓每個 Web 開發者能夠從中獲益。

於是我們邀請大家,特別是 Web 開發者來使用這款產品,為我們提出寶貴的優化意見。

FrontJS 的核心功能

示例截圖

FrontJS 是面向產品部門,運營部門,以及開發部門工作人員的網站效能及異常資訊收集工具。

產品和運營部門可以通過頁面分析功能來了解使用者訪問量、使用偏好、頁面停留時間和使用者流向等資訊,從而對產品進行調整和優化。

開發部門可以通過頁面統計獲取使用者平均的頁面統計資訊做出 DOM 樹渲染時間是否達標,DNS 解析時間是否達標,伺服器響應時間是否達標等判斷。

FrontJS 為開發人員提供了包含錯誤收集、頁面流向、效能分析、資源及請求監控等使用者體驗改進所需的資訊,最主要的功能當然還是 JS 錯誤監控:我們會收集精細到 console.log 級別的任何 Javascript 異常資訊並提供 stack trace 資訊,同時我們還對每個 XHR 計時幫助開發者判斷某個 Endpoint 是否需要優化。

FrontJS 的技術特點

一款輕量好用的頁面錯誤監控平臺—— FrontJS

  • 圖形介面配置,自動生成整合程式碼,即加即用
  • JS 異常監控,包含 console 中的 log / warn / error 的收集
  • 提供 API,可以對上報行為進行定製化的調整
  • 具有包裝後的 try - catch,可以產生自定義錯誤資訊
  • 資源監控,收集載入失敗的資源以及跨域資源的 URI
  • XHR 監控,收集 XHR 耗時、錯誤、超時、跨域等資訊
  • 堆疊追蹤技術,精確獲取更多異常上下文資訊,方便查詢錯誤位置,在每個瀏覽器中都可以使用完整的堆疊追蹤
  • 自定義信任域,可以對跨域資訊做出靈活調整有助於監控頁面是否發生 XSS 或被植入病毒
  • 頁面效能監控,包含 DNS 時間, DOM 渲染時間等資訊,可以組合計算出首屏時間以及白屏時間
  • 事件流,可以瞭解異常發生時的上下文環境,幫助測試部門快速復現錯誤
  • 近實時的分析結果

未來我們希望通過藉助人工智慧等一些手段讓這款產品變得更加智慧,能夠主動發現被監控站點的體驗問題並自動的為使用者提供高質量的解決方案。

最後再次邀請大家使用FrontJS,並提出寶貴的意見~

www.frontjs.com/

相關文章