本文根據(jù)神策數(shù)據(jù)資深前端研發(fā)工程師王朋在神策「大數(shù)據(jù)技術(shù)系列直播課」第二季“前端專題”第四講的直播整理。

本次分享主要分為三大部分：前端異常監(jiān)控概述，異常監(jiān)控的背景意義，以及做一個(gè)前端異常監(jiān)控的核心問(wèn)題；然后針對(duì)?Sentry?監(jiān)控平臺(tái)，詳細(xì)闡述其功能與系統(tǒng)架構(gòu)；最后通過(guò)案例的接入，體驗(yàn)前端異常監(jiān)控的實(shí)踐與落地。希望本次直播分享能夠給大家提供一些思路上的啟發(fā)。以下為正文。

點(diǎn)擊文末“閱讀原文”可免費(fèi)下載演講 PPT。

一、前端異常監(jiān)控概述

1. 異常監(jiān)控的背景

神策數(shù)據(jù)是一家大數(shù)據(jù)分析和營(yíng)銷科技服務(wù)提供商，主要做 ToB 業(yè)務(wù)，工程師所處理的大部分線上問(wèn)題都來(lái)自于工單。目前，在該場(chǎng)景中存在著許多痛點(diǎn)，比如兼容性問(wèn)題很難排查，接口報(bào)錯(cuò)難復(fù)現(xiàn)，問(wèn)題發(fā)現(xiàn)不及時(shí)、客戶反饋又比較緊急等，這是在解決客戶問(wèn)題的過(guò)程中經(jīng)常出現(xiàn)并且令人頭疼的問(wèn)題。

2. 異常監(jiān)控的意義

伴隨著互聯(lián)網(wǎng)科技的迅速發(fā)展，前端技術(shù)的使用場(chǎng)景越來(lái)越復(fù)雜，各種小程序、H5、APP、Web、瀏覽器型號(hào)、手機(jī)機(jī)型，以及用戶網(wǎng)絡(luò)速度的差異，都可能對(duì)我們的業(yè)務(wù)帶來(lái)影響。在諸多因素的影響下，要想保證業(yè)務(wù)的穩(wěn)定性、用戶體驗(yàn)一致性，只有通過(guò)前端監(jiān)控才能多維度的進(jìn)行全面覆蓋。

3. 異常監(jiān)控的階段

前端監(jiān)控一般包括行為監(jiān)控、異常監(jiān)控、性能監(jiān)控，這里我們主要討論異常監(jiān)控。大多數(shù)情況下，一個(gè)完整的異常監(jiān)控大致可以分為下面四個(gè)階段：

（1）異常采集

我們要做到高效、準(zhǔn)確、全面的捕獲異常，上報(bào)信息盡可能的自動(dòng)化，避免不必要的代碼入侵。要在采集內(nèi)容的全面性和性能之間做取舍，但要確保當(dāng)異常出現(xiàn)的時(shí)候，能夠根據(jù)異常的具體信息來(lái)定位問(wèn)題。對(duì)于采集的內(nèi)容，我總結(jié)了下面四個(gè)方面。

（2）數(shù)據(jù)存儲(chǔ)

當(dāng)異常信息上報(bào)到后端服務(wù)中的時(shí)候，后端需要按照一定的規(guī)則，對(duì)數(shù)據(jù)進(jìn)行清洗、過(guò)濾和存儲(chǔ)，更重要的一點(diǎn)是要考慮到服務(wù)的高可用。?

（3）統(tǒng)計(jì)與分析

能夠根據(jù)上報(bào)的異常數(shù)據(jù)得出深層次的多維度信息，可以通過(guò)預(yù)先設(shè)置的指標(biāo)條件對(duì)異常信息進(jìn)行自動(dòng)化的計(jì)算分析，當(dāng)超過(guò)一定閾值時(shí)能夠自動(dòng)觸發(fā)告警。另外，通過(guò)系統(tǒng)提供的可視化面板，用戶可以手動(dòng)分析，方便發(fā)現(xiàn)和定位問(wèn)題。

（4）報(bào)告與告警

可以設(shè)置具體的告警規(guī)則、渠道、級(jí)別，告警的渠道可多樣化，如郵件、短信、微信、電話等。對(duì)于異常統(tǒng)計(jì)信息的推送，可以做到日?qǐng)?bào)、周報(bào)、月報(bào)、年報(bào)的自動(dòng)生成并推送給相關(guān)的群組。

二、Sentry 監(jiān)控平臺(tái)簡(jiǎn)介

1. Sentry 是什么

中文翻譯過(guò)來(lái)是哨兵的意思，官網(wǎng)給的解釋是：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 是一個(gè)實(shí)時(shí)的事件記錄和匯集的平臺(tái)，它專注于錯(cuò)誤監(jiān)控以及能夠自動(dòng)的提取所需的事件進(jìn)行處理，而不需要用戶麻煩的反饋。

2. 為什么選擇 Sentry

（1）Sentry 是近兩年非?；鸬谋O(jiān)控系統(tǒng)，與其它競(jìng)品相比，可以看到其下載量是穩(wěn)步上升的。

（2）引入 SDK 的包體積非常小，打包后只有 20k。

（3）100% 開源，性能卓越，易于擴(kuò)展并進(jìn)行二次開發(fā)。

（4）支持 SaaS 版和私有化部署。

（5）支持多個(gè)第三方集成，如 GitLab、GitHub、jira、WebHook 等。

3. Sentry 功能架構(gòu)

下面是 Sentry 的整體功能架構(gòu)圖，包括異常詳情、異常管理、性能監(jiān)測(cè)、以及可擴(kuò)展能力。在服務(wù)部署方面，它支持 SaaS 版和私有化部署，私有化部署能夠有效、全面保證數(shù)據(jù)的安全。除此之外，Sentry 還具有性能監(jiān)控的能力，它包括自動(dòng)監(jiān)測(cè)和手動(dòng)監(jiān)測(cè)，并對(duì)性能監(jiān)測(cè)的結(jié)果進(jìn)行可視化的展示。

4. Sentry 核心架構(gòu)

下圖為 Sentry 的核心架構(gòu)圖，它也是整個(gè) Sentry 存儲(chǔ)和讀取事件的一個(gè)流程，是一個(gè)讀寫一致性模型，保證了數(shù)據(jù)讀寫更強(qiáng)的一致性。

Sentry 從客戶端接收事件后，會(huì)執(zhí)行一系列的異步處理，在事件保存到 ClickHouse 之前，會(huì)將事件插入到 Kafka 主題中，消費(fèi)者從該主題中讀取并以批量插入的方式寫入 ClickHouse。事件存儲(chǔ)到 ClickHouse 后， Sunba Event Consumer 會(huì)進(jìn)行廣告，通過(guò)另外一個(gè) Kafka 主題（commit log topic）來(lái)傳遞。同步消費(fèi)者會(huì)同時(shí)讀取事件主題和提交的日志主題，同步消費(fèi)者會(huì)在內(nèi)部運(yùn)行狀態(tài)機(jī)，該狀態(tài)機(jī)會(huì)跟蹤提交日志的最大偏移，只要有新的事件提交就會(huì)消費(fèi)，經(jīng)協(xié)調(diào)處理，執(zhí)行后處理任務(wù)，這就是 Sentry 的核心架構(gòu)，也是一個(gè)讀寫一致性模型。

三、Sentry 監(jiān)控實(shí)戰(zhàn)

1. 私有化部署

Sentry 支持私有化部署，可以使用 Docker-compose、K8S 的方式部署在自己的服務(wù)器上。為了保證服務(wù)的高可用，當(dāng)訪問(wèn)量激增的時(shí)候不至于被流量壓垮，我們采用了 K8S 集群化的部署方式。

采用的是一主多從的 K8S 集群部署模式，通過(guò) Helm 對(duì) Sentry 進(jìn)行部署，整體集群架構(gòu)如下圖所示。

2. 項(xiàng)目接入

官網(wǎng)提供了多種語(yǔ)言的 SDK 接入方式，按照文檔說(shuō)明就能夠順利的接入，具體的接入步驟這里不做贅述，整個(gè)的接入流程可參見(jiàn)下圖。

如上圖所示，首先會(huì)將前端打包好的資源（JS/CSS/Images/Font）上傳到 CDN。當(dāng)異常發(fā)生時(shí)，接入 SDK 的客戶端會(huì)自動(dòng)的將異常信息上報(bào)到 Sentry 服務(wù)，Sentry 服務(wù)會(huì)對(duì)數(shù)據(jù)進(jìn)行清洗，并將異常信息實(shí)時(shí)的展現(xiàn)在后臺(tái)管理系統(tǒng)上，開發(fā)就可以可視化的查看異常的詳細(xì)信息。另外，你可以將自己代碼的 sourceMap 上傳到 Sentry 服務(wù)，這樣開發(fā)就可以定位到異常的源碼位置。

隨著 Web 應(yīng)用朝著富客戶端方向的發(fā)展，前端代碼的復(fù)用性、可用性、一致性會(huì)越來(lái)越重要，因此搭建一套高可用的前端異常監(jiān)控系統(tǒng)必要性愈發(fā)凸顯。

???

【更多內(nèi)容】

• 神策數(shù)據(jù)王磊：如何用 JS 實(shí)現(xiàn)頁(yè)面錄制與回放

• 神策數(shù)據(jù)陳寧：前端國(guó)際化技術(shù)需求及模型實(shí)現(xiàn)

• 啊！你的服務(wù)又掛了？
  

▼?點(diǎn)擊“閱讀原文”，免費(fèi)下載演講 PPT

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的直播回顾丨神策数据王朋：如何搭建一套高可用的前端异常监控系统？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。