本文根據神策數據資深前端研發工程師王朋在神策「大數據技術系列直播課」第二季“前端專題”第四講的直播整理。
本次分享主要分爲三大部分：前端異常監控概述，異常監控的背景意義，以及做一個前端異常監控的核心問題；然後針對 Sentry 監控平臺，詳細闡述其功能與系統架構；最後通過案例的接入，體驗前端異常監控的實踐與落地。希望本次直播分享能夠給大家提供一些思路上的啓發。以下爲正文。
一、前端異常監控概述
1. 異常監控的背景
神策數據是一家大數據分析和營銷科技服務提供商，主要做 ToB 業務，工程師所處理的大部分線上問題都來自於工單。目前，在該場景中存在着許多痛點，比如兼容性問題很難排查，接口報錯難復現，問題發現不及時、客戶反饋又比較緊急等，這是在解決客戶問題的過程中經常出現並且令人頭疼的問題。
2. 異常監控的意義
伴隨着互聯網科技的迅速發展，前端技術的使用場景越來越複雜，各種小程序、H5、APP、Web、瀏覽器型號、手機機型，以及用戶網絡速度的差異，都可能對我們的業務帶來影響。在諸多因素的影響下，要想保證業務的穩定性、用戶體驗一致性，只有通過前端監控才能多維度的進行全面覆蓋。 
3. 異常監控的階段
前端監控一般包括行爲監控、異常監控、性能監控，這裏我們主要討論異常監控。大多數情況下，一個完整的異常監控大致可以分爲下面四個階段： 
（1）異常採集
我們要做到高效、準確、全面的捕獲異常，上報信息儘可能的自動化，避免不必要的代碼入侵。要在採集內容的全面性和性能之間做取捨，但要確保當異常出現的時候，能夠根據異常的具體信息來定位問題。對於採集的內容，我總結了下面四個方面。
（2）數據存儲
當異常信息上報到後端服務中的時候，後端需要按照一定的規則，對數據進行清洗、過濾和存儲，更重要的一點是要考慮到服務的高可用。
（3）統計與分析
能夠根據上報的異常數據得出深層次的多維度信息，可以通過預先設置的指標條件對異常信息進行自動化的計算分析，當超過一定閾值時能夠自動觸發告警。另外，通過系統提供的可視化面板，用戶可以手動分析，方便發現和定位問題。
（4）報告與告警
可以設置具體的告警規則、渠道、級別，告警的渠道可多樣化，如郵件、短信、微信、電話等。對於異常統計信息的推送，可以做到日報、週報、月報、年報的自動生成並推送給相關的羣組。
二、Sentry 監控平臺簡介
1. Sentry 是什麼
中文翻譯過來是哨兵的意思，官網給的解釋是：Sentry is a realtime event logging and aggregation platform. At its core it specializes in monitoring errors and extracting all the information needed to do a proper post-mortem without any of the hassle of the standard user feedback loop.
即 Sentry 是一個實時的事件記錄和彙集的平臺，它專注於錯誤監控以及能夠自動的提取所需的事件進行處理，而不需要用戶麻煩的反饋。
2. 爲什麼選擇 Sentry
（1）Sentry 是近兩年非常火的監控系統，與其它競品相比，可以看到其下載量是穩步上升的。
（2）引入 SDK 的包體積非常小，打包後只有 20k。
（3）100% 開源，性能卓越，易於擴展並進行二次開發。
（4）支持 SaaS 版和私有化部署。
（5）支持多個第三方集成，如 GitLab、GitHub、jira、WebHook 等。
3. Sentry 功能架構
下面是 Sentry 的整體功能架構圖，包括異常詳情、異常管理、性能監測、以及可擴展能力。在服務部署方面，它支持 SaaS 版和私有化部署，私有化部署能夠有效、全面保證數據的安全。除此之外，Sentry 還具有性能監控的能力，它包括自動監測和手動監測，並對性能監測的結果進行可視化的展示。
4. Sentry 核心架構
下圖爲 Sentry 的核心架構圖，它也是整個 Sentry 存儲和讀取事件的一個流程，是一個讀寫一致性模型，保證了數據讀寫更強的一致性。
Sentry 從客戶端接收事件後，會執行一系列的異步處理，在事件保存到 ClickHouse 之前，會將事件插入到 Kafka 主題中，消費者從該主題中讀取並以批量插入的方式寫入 ClickHouse。事件存儲到 ClickHouse 後， Sunba Event Consumer 會進行廣告，通過另外一個 Kafka 主題（commit log topic）來傳遞。同步消費者會同時讀取事件主題和提交的日誌主題，同步消費者會在內部運行狀態機，該狀態機會跟蹤提交日誌的最大偏移，只要有新的事件提交就會消費，經協調處理，執行後處理任務，這就是 Sentry 的核心架構，也是一個讀寫一致性模型。
三、Sentry 監控實戰
1. 私有化部署
Sentry 支持私有化部署，可以使用 Docker-compose、K8S 的方式部署在自己的服務器上。爲了保證服務的高可用，當訪問量激增的時候不至於被流量壓垮，我們採用了 K8S 集羣化的部署方式。
採用的是一主多從的 K8S 集羣部署模式，通過 Helm 對 Sentry 進行部署，整體集羣架構如下圖所示。
2. 項目接入
官網提供了多種語言的 SDK 接入方式，按照文檔說明就能夠順利的接入，具體的接入步驟這裏不做贅述，整個的接入流程可參見下圖。
如上圖所示，首先會將前端打包好的資源（JS/CSS/Images/Font）上傳到 CDN。當異常發生時，接入 SDK 的客戶端會自動的將異常信息上報到 Sentry 服務，Sentry 服務會對數據進行清洗，並將異常信息實時的展現在後臺管理系統上，開發就可以可視化的查看異常的詳細信息。另外，你可以將自己代碼的 sourceMap 上傳到 Sentry 服務，這樣開發就可以定位到異常的源碼位置。
隨着 Web 應用朝着富客戶端方向的發展，前端代碼的複用性、可用性、一致性會越來越重要，因此搭建一套高可用的前端異常監控系統必要性愈發凸顯。