AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

爱奇艺智能前端异常监控平台的设计与实践

  • 2021-03-22
  • 本文字数:3411 字

    阅读完需:约 11 分钟

爱奇艺智能前端异常监控平台的设计与实践

背景

前端监控一般包括三方面:异常监控、性能监控(First Meaningful Paint、First Contentful Paint 等性能指标监控)及行为数据监控(PV、UV、页面停留时长等监控)。其中前端异常监控主要监控因前端代码执行异常、接口请求异常等导致页面出现异常,得不到预期结果的情况。从异常导致的问题表现方面来看,前端异常监控平台应能够帮助开发者轻松应对包括但不限于以下问题:


  • 业务日益扩张,很多重要但较低频的报错事件不会使接口成功率降低和预警,导致问题不能及时发现。

  • 对于有些报障反馈的问题,利用测试账号构造类似的数据无法复现。

  • 接口报错事件反映前端传参不对,但当前请求相关的前端代码没有逻辑问题,需要花费较多时间推测可重现场景及寻找根源。


当前业界涵盖前端异常监控的成熟方案有很多,但这些平台也有使用定制困难等不利方面:


  • 这些平台几乎都是收费的,有的跟云服务打包出售,有的单独出售。

  • 这些前端监控平台的架构都是不开源的,大多数使用者没有办法对这类前端监控平台通过二次开发得到适合当前项目的前端监控平台。

  • 这些前端监控平台大部分都不支持私有化部署,使用者无法得到监控数据做更深入的分析。

  • 这些平台的功能定制化能力比较差,即使个别定制化能力比较好的平台,若想达到期望监控的效果,需要做比较复杂的定制或者较多地侵入业务项目逻辑。


因此我们自研了爱奇艺智能前端监控平台——鹰眼(Hawkeye),目前该平台已接入了爱奇艺内容创作、分发和变现平台的大部分业务,经过几个月的使用,帮助业务及时发现了不少问题,也帮助业务负责人对各自系统的整体的运行状态有了更深入的了解,对线上项目起到了很好的保障作用。


本文将从设计和实践方面分别对该平台进行详细阐述。

前端异常监控平台介绍

鹰眼是以帮助及时发现问题、加速业务项目排障为目标的前端异常监控平台。尤其善于应对业务繁多的场景,在对相对低频而又重要的业务进行监控这一方面表现非常理想。


鹰眼主要有以下三点优势:


  • 提供事件聚合问题列表,支持业务类型隔离监控报警,支持按照异常业务码配置去监听接口请求错误,能帮助前后端开发人员更容易、更及时的发现系统问题。

  • 会记录发生错误事件之前用户的操作和接口请求,并支持通过前端生成或记录接口返回的 Trace Id 来串联前后端链路,为异常排查提供更多的线索。

  • 接入简单快捷,对代码的侵入性低。


整体架构如图 1-1,包括了采集 JSSDK, 后端采集服务,监控后台三部分。

图 1-1 鹰眼整体架构


采集 JSSDK 负责采集异常并上报,其中可采集的信息包括:JS 运行时异常(包括通过 window.addEventListener 监听 error 事件收集到的 TypeError、ReferenceError 等异常以及通过 window.addEventListener 监听 unhandlerejection 事件收集到的 promise 异常)、接口请求异常、静态资源加载异常、前端框架错误、发生异常之前的用户操作和请求。采集服务先对数据做校验清洗,之后按照一定的报警策略进行报警,同时会投递消息到监控后台。监控后台基于公司大数据平台与流式计算平台构建了实时计算引擎,对接收的异常消息进行处理,为监控管理页面、报表统计、报警平台等提供数据。


接下来会从以下四个方面去介绍鹰眼前端异常监控的设计要点,这些是达成及时发现问题、加速业务项目排障这两个主要目标的关键。

一.  事件智能聚合

如果一个平台类项目页面访问量较高、业务较为复杂,那么某一类问题收集到的事件会非常多,庞大的事件量是不利于开发人员查看和发现问题的。因此我们对事件按照错误类型、错误信息及访问页面地址等按照规则等进行分类,为同一类的事件生成一个错误 ID,并存入 Redis 中。

图 1-2 问题管理

二.  业务类型隔离监控报警,支持按照异常业务码配置去监听接口请求错误

对于接入了 10+业务类型的单页面应用,若只按照项目划分,不利于各业务负责人发现各自关注的问题。因此,我们支持建立业务类型、接口返回错误码以及报警 Topic Id 等的映射配置,之后在问题收集、监控报警、统计分析等各个过程中可根据配置进行定制化处理,如图 1-3 示意。


图 1-3 按照业务配置监控


具体说明如下:


  • 前端统一拦截 Ajax/Fetch 接口请求,根据配置传入的业务错误码去采集接口的报错信息。这样的方式对于业务项目逻辑是无侵入的。通过 window.addEventListener 的方式可以监听到网络请求的异常只能监控到 Ajax 失败的请求,但无法判断 HTTP 状态码,并且有的业务接口返回的 HTTP 状态码 CODE 是 200,业务真正的错误码在 Response Body 中返回。因此对于 Ajax 请求监控,采用重写 XMLHTTPRequest 的方式采集错误。同时为了做到低侵入式的业务隔离监控,我们采用业务错误码配置的方式来监控接口的报错情况。

  • 待办问题列表按照业务配置区分展示,帮助各个业务负责人及时对当天的项目问题进行整体把握。

  • 同一平台项目下,报警按照业务区分,不同业务的报警不会相互影响。

三.  收集错误上下文,利用 Trace Id 串联前后端链路

有些异常事件的发生并不只涉及一次用户操作或接口请求,而可能是异常发生之前的接口超时引起的或者某个特定的操作系列导致的报错。因此对于当前报错之前的用户操作或请求以及请求耗时也需要进行收集,帮助快速定位问题。


图 1-4 错误上下文


对于接口请求异常,鹰眼支持记录后端返回的 Trace Id 串联前后端的链路监控,这样能够在前端监控发现问题时,直接根据 Trace Id 查看前后端的整个链路,关联业务日志,分析异常环节,快速定位问题。


同时,鹰眼也支持前端生成 Trace Id,通过设置 HTTP 请求头实现(如图 1-5),请求头遵从公司 Rover 全链路追踪系统的数据规范。


图 1-5 前端生成 Trace Id

四.  基于公司大数据平台与流式计算平台建设监控后台

鹰眼异常监控系统构建在公司大数据平台与流式计算平台之上,后台技术架构如图 1-6 所示。

图 1-6 监控后台技术架构


数据源:前端上报的异常事件会首先进入消息队列当中,作为统一的数据源供后续存储和计算使用;同时,使用消息队列也是一种削峰的手段,避免业务高峰时期大量上报的异常事件拖垮服务。

引擎:引擎层分为存储引擎和计算引擎。


  • 存储引擎:根据数据类型与特点,选择合适的数据存储。

  • 使用 Redis 生成异常事件的错误 ID,根据项目、异常类型、异常值等维度生成唯一的错误 ID,同一类异常事件将聚合在相同错误下。

  • 使用 ES 存储异常事件中的部分字段,主要用于鹰眼监控平台中检索使用。

  • 使用 HBbase 存储异常事件的全部字段,因为上报的异常事件中包含了异常堆栈、上下文等信息,数据量较大且并不用于检索,因此选择了适合存储海量数据的 HBbase。

  • MySQL 主要存储一些配置信息,例如项目设置、报警配置等。

  • 计算引擎:主要使用流式计算引擎 Flink 对上报的异常事件进行实时的计算和聚合。

展望

目前鹰眼监控已接入了爱奇艺内容创作、分发和变现平台的大部分业务,在日常工作中大幅度辅助提升了运维效率,具体表现如下:


  • 通过查看当前的问题列表(如图 1-2)及时发现问题,先于用户报障发现问题。业务开发同学可以选择各自业务的问题查看,后端同学可以设置默认展示 Service API Error(接口报错)查看。

  • 通过 Stack Trace、用户设备环境信息、Trace Id 等快速定位问题, 通过错误上下文快速排查疑难杂症,如图 1-4,图 1-5。其中利用 Trace Id 的全链路监控可以显著提升接口报错的排查效率。

  • 通过各种维度的统计,去分析项目的运行状况。鹰眼的数据方便接入各种可视化平台统计分析,可分析项目问题发生的趋势,以及各个项目问题解决的情况。比如利用 Grafana 出色的多数据源支持和报表功能,进行数据报表的开发和展示,如图 1-7。


图 1-7 统计分析


以上所述,鹰眼已经可以很好的满足我们日常业务中的监控需求,但还有几个方向值得我们去思考,例如,在 SDK 代码体积,需求程度、开发成本等之间做权衡时,可以考虑是否需要实现以下功能:


  • 页面崩溃:页面崩溃后,正常的上报流程就无法走通了,如果需要投递页面崩溃前相关信息,可以通过 beforeunload 结合 sessionStorage,在下次打开页面时上报,如果项目使用 PWA(Progress Web Application),也可以在 SserviceWworker 实现上报。

  • 合并日志:如果用户访问量大,上报日志多,或用户反复触发同一个错误时,我们考虑是否需要将几次日志合并到一起再上报。

  • HTTP2.0:HTTP2.0 上报头部压缩,多路复用的优点,会使监控投递性能更高。


在未来我们将继续优化扩展鹰眼的能力,比如:尽快提供小程序 SDK,提供更多 WEB 框架的支持,帮助更多技术栈的开发者们及时发现问题、快速排障。同时也会尽快将开源提上日程,以便更多有需要的开发团队使用和借鉴。


本文转载自:爱奇艺技术产品团队(ID:iQIYI-TP)

原文链接:爱奇艺智能前端异常监控平台的设计与实践

2021-03-22 08:003275

评论

发布
暂无评论
发现更多内容

融云全球社交泛娱乐洞察,互联网社交换挡期的「社区产品」机遇

融云 RongCloud

社交 社区

Tiktok短视频搬运运营干货技巧

极客天地

大数据培训后找不到工作的原因有哪些?

小谷哥

The camera application scenrios on Wallys DR40X9 ipq4019/ipq4029 industrial 5g router

wallysSK

IPQ4019 ipq4029

我说用count(*)统计行数,面试官让我回去等消息...

小小怪下士

Java sql 程序员

支持向量机-线性SVM决策过程的可视化

烧灯续昼2002

Python 机器学习 算法 sklearn 11月月更

【CSPO认证】12月17-18日在线周末班 | 全国招生

ShineScrum

产品负责人 CSPO认证 CSPO

数字化安全生产平台 DPS 重磅发布

阿里巴巴云原生

阿里云 云原生 数字化

听说,清华毕业大牛分享出Redis实战视频及文档,共2.3G

小二,上酒上酒

Java redis 学习路线

前端培训程序员失业后就业方向有哪些

小谷哥

从发现问题到创造价值 数据智能如何助力商家双11高质量增长?

阿里技术

数据分析 智能数据

「案例分享」研发效能提升之第一性原理

京东科技开发者

redis flink 研发管理 研发效能 软件开发技术的第一性原理

新发现,新挑战,技术出海的机遇与挑战丨PingCAP DevCon 2022 出海专场

PingCAP

出海

终于学完阿里架构师推荐413页微服务分布式架构基础与实战笔记

小二,上酒上酒

Java 面试 分布式 微服务

解读 K8s Pod 的 13 种异常

阿里巴巴云原生

阿里云 Kubernetes 云原生

膜拜!华为18级工程师用349页构建高可用Linux服务器,其实并不难

小二,上酒上酒

Java Linux 学习 华为 运维

前端培训学习的前景怎么样

小谷哥

三面阿里,被Java面试官虐哭!现场还原真实的“被虐”场景

小二,上酒上酒

面试题 面经 大厂面试 春招

终于有阿里大牛把困扰我多年的计算机组成原理:网络通信讲明白了

小二,上酒上酒

计算机 计算机原理 TCP协议

年薪120W的架构师简历你见过吗?java程序员该如何达到?

小二,上酒上酒

学习 架构 简历规划

WOS新商业操作系统:中国头部SaaS的一次进阶

ToB行业头条

AirServer2023个人免费版本下载

茶色酒

AirServer2023

干货 | 带你了解 EMC—— 什么是 EMC?

元器件秋姐

电磁兼容 元器件电商 华秋商城 电子工程师 电子科普

2023最新FL Studio中文版64位安装包下载教程

茶色酒

FL Studio FL Studio 21

Camtasia2023全新版下载及功能介绍讲解

茶色酒

Camtasia2023

有位大牛终于把珍藏多年的算法视频给分享出来了,总共3.81G

小二,上酒上酒

算法 数据结构与算法 左程云

java培训学习有什么好的方法

小谷哥

存算一体 VS 存算分离 ,IT发展下的技术迭代

StoneDB

数据库 开源 存算分离 HTAP StoneDB

完全解析分布式存储,带你了解HDFS的块

好程序员IT教育

hdfs 分布式

前端培训机构需要注意什么?

小谷哥

荣耀MagicOS 7.0正式发布!打造以人为中心的智慧生活解决方案

荣耀开发者服务平台

手机 系统 安卓 荣耀 honor

爱奇艺智能前端异常监控平台的设计与实践_架构_爱奇艺技术产品团队_InfoQ精选文章