当前位置: 首页 > Web前端 > HTML

京东如何做好前端系统的可观察性

时间:2023-03-29 12:11:35 HTML

作者:京东科技王亚森前言本文旨在描述从0到1我们团队在系统化过程中积累的一套解决方案可观察性,而且结果这么大,我不敢隐瞒,应该公之于众,为我们这一代建设一个美好的未来。先说说我们从中得到的好处:1.当我负责的系统宕机时,可以第一时间通知我。2.当我写的业务逻辑进入else或catch时,会通知我。3、当我做一个新的产品功能上线后,我可以监控用户的访问状态4,再也不用担心早上还没到公司就接到同事的电话,说那个应用昨晚上线会回滚5,新功能上线后发现有问题,可以第一时间在线切换老版本功能运行6,不管有没有问题,我可以还原用户操作轨迹发现问题7、老板说我们好久没出过生产事故了,下面的内容比较干,请大家提前准备好茶一起喝更好1.介绍什么是系统可观测性?可观察性是一种系统属性,例如功能或可测试性。通过对系统的运行状态和系统承载的业务状态进行采集和分析,以易于理解的形式展现出来,以便我们对系统的运行状态做出合理的判断。我们要观察什么?通用部分:从硬件运维(cpu、meomery、disk)和软件应用的可访问性和应用性能进行监控。业务部分:从页面的正常初始化、业务交互性、交互过程的完整性进行监控。我们使用组内现有的工具来说明如何做,工具实现的技术手段不在本文的责任范围内。2.观察指标系统指标服务器运行状态cpu占用率内存占用率nginx启停状态应用指标白屏、白屏资源加载错误导致系统错误请求400、500脚本错误导致阻塞交互首屏渲染时间页面加载完毕界面耗时业务指标耗时以信贷产品为例,整个产品的黄金流程分为三个部分:信贷接入、贷款融资、还款。一般业务异常(999999)接口请求网络超时接口请求错误未知错误(未处理的异常代码)访问跳转实名失败补充信息提交失败(从用户点击提交按钮开始,直到最后提交成功)查询地址失败获取合同列表获取合同列表失败获取合同预览失败60秒内无法打开访问结果页面,正常跳转到首页资质审核页面停留5分钟以上还款失败还款计划试算失败还款失败3.如何观察以下所有观察工具均基于京东内部工具,结合现有工具提供观察方案。系统指标观察方法通过jdos3.0的智能监控系统brolly监控并告警系统的CPU占用率、内存占用率、硬盘占用率http://brolly.jdos.jd.com/app/nginx状态和服务器状态监控告警通过仁http://jen。jd.com/alarmConfig应用相关指标观察方法前端应用我们选用技术内部的sgm作为应用内场景上报工具。sgm的介绍和接入指南参考:sgm接入指南1、白屏报警是由于白屏的概念是指用户从开始进入页面到显示页面所经历的黑屏时间页面上的第一个字符或图片内容。如果由于系统错误导致无法显示内容,一直黑屏,则sgm收集到的白屏时间为0,所以sgm无法监测到白屏故障。因为当屏幕空白时,页面#app的内容是空的,此时页面已经完全加载完毕,所以可以通过监听页面加载事件来判断页面是否空白#app中的内容,然后匹配sgm自定义监控告警。从而实现白屏故障的有效监控。window.addEventListener('load',()=>{if(document.querySelector('#app').children.length<1){window.__sgm__.custom({type:'error',code:'systemwhitescreen'})}})2.资源告警详见:sgm接入指南3.API告警详见:sgm接入指南4.js错误告警,通过sgm-web监控页面所有脚本错误关键字,常见的js错误类型有SyntaxError语法错误TypeError类型错误ReferenceError引用错误RangeError范围错误URIErrorurl解析错误InternalError内部错误5、性能告警详见:sgm接入指南业务指标观察方法自定义监控告警自定义告警是监控的最佳手段业务指标、页面提交失败、函数进入catch逻辑等都可以通过自定义监控设置告警。下面例子中出现Error的代码,说明已经进入了catch逻辑,需要引起我们的注意。您可以通过设置呼叫音量的阈值来配置警报。详见:sgm接入指南注一,埋点上报userinfo接口需要包含的信息返回的用户信息,保证能获取到用户ID,查询相关日志或当前对应的输出用户轨迹报错接口,进入自定义报埋点上下文信息确认报错场景b,其中页面路由跳转失败的场景可以通过timer方法报错,页面销毁时清空定时器,c、sgm上报用户识别逻辑4、阈值优化1、通过本地模拟错误报警判断点的有效性,确保所有点都能正常上报2、验证阈值设置的合理性。先把所有阈值调到最小,然后查看告警状态。如果有告警,分析告警信息的合理性。如果是每次都需要关注的生产问题,那么这里需要设置为最低的阈值。如果是个别问题或者不需要特别关注的问题,然后逐渐增加阈值到合适的频率3。Api监控前端不需要特别关注。可以设置一个20%的错误率批量报警值即资源监控是根据页面静态资源的个数,包括css、js、img的总和作为监控值。当img标签有动态src时,第一次渲染页面时会有当前页面url的资源报错。使用v-if避免误报5.自定义监控业务中的自定义报错遵循第2条的原则逐步优化6.应用监控告警阈值配置的原则:由于60秒错误计数(),对于一个周期,连续多少次()周期就会触发报警规则,所以我们需要计算应用的日均pv和对应指标的量级,来设置一个合理的阈值。以一个日均PV为10000的应用为例,每60s的PV约为7,每个PV的资源数约为20,接口调用次数约为3,所以每秒总计140个资源请求和21个接口调用。以20%的错误率报告为标准,设置相应的阈值。以上数值可根据业务线流量确定。5、当告警信息达到1条时,在邮箱(必填)告警方式中选择email,在邮箱中配置告警邮件规则。由于告警邮件可能有很多告警信息包括后台告警,还有一些非紧急告警邮件,可以通过邮件标题来区分。通常,标题会包含应用程序名称。您可以通过过滤应用名称来过滤前端应用。另外,可以根据标题中的【SGM-WEB】过滤前端相关告警信息。H5_RESOURCE资源错误标题关键字H5\_CUSTOM\_CODE自定义监控关键字H5\_JS\_ERROR脚本错误关键字2、东东(必填)东东报警通道会比邮件提醒更及时,被看到的及时性会更高3.外呼(可选)是时效性最强的报警方式。对于一些关键场景,批次错误可以确定是生产问题。需要增加外呼方式,及时到达信息。六、生产切割监控您可以使用自定义监控配合系统的切割功能进行监控。如果我要推出一个新的主要功能,我需要在生产环境中通过裁剪来逐步替换旧版本的功能。上线后我们如何监控新旧功能?我们需要有两个功能,一个是切片功能,一个是监控功能。伸缩是业务系统实现的功能。大致流程是这样的:我们在新旧版本的分支进程中使用自定义埋点来监控可用的有多少用户去了新进程,有多少老用户去了旧进程,然后使用sgm查看两个进程的用户轨迹,判断用户是否完成了新进程中的所有操作,或者用户卡在了哪一步,这样就可以判断新上线的功能是否有问题以及问题所在。通过查看监控数据,我们可以判断切割是否成功,是否需要及时回滚,或者修复上线,缩小影响范围。