如何搭建一套高可用的前端异常监控系统？

本次分享主要分为三大部分：前端异常监控概述，异常监控的背景意义，以及做一个前端异常监控的核心问题；然后针对 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 应用朝着富客户端方向的发展，前端代码的复用性、可用性、一致性会越来越重要，因此搭建一套高可用的前端异常监控系统必要性愈发凸显。

• 一文了解用户标签画像，从洞察到突破

• 以余额宝为例，谈谈如何构建数据指标体系？

• 用Excel制作一个漂亮的分类散点图