1背景一站式客服工作台集成在线、热线、工单三大核心应用，支持自营客服和BPO客服处理大量每天的对话信息，工作台的稳定性很重要。自接入前端监控以来，我们坚持每两周跟进工作台和客服几个核心应用的在线稳定性，重点关注页面访问、JS错误率、资源加载异常、API接口成功率、自定义业务模块指标的五个监控模块都做了细致的数据分析，通过实时告警发现了许多问题并解决了潜在问题，也通过数据分析改善了客服工作场所的运行环境。本文主要讲解我们是如何通过监控稳定性数据的分析来提升应用系统的稳定性的。2监控原理客服一站式工作台接入监控后，经过多方调研，最终采用Arms监控方案，并基于Arms监控方案进行二次开发。整体监控实现如下图所示：Arms提供了SDK，功能比较完善。为了满足一些定制化的数据上报需求，控制应用数据权限，控制上报成本，基于alife-logger接入客服域进行二次封装，使得功能更加可控。云平台进行数据初始化，生成定制化报表。3监控实践3.1页面PV&UV监控场景PV即页面浏览量，通常是衡量一个网站甚至一个模块使用情况的主要指标。UV是独立访客数，是指有多少用户访问过某个网站，统计依据是用户的登录状态。页面的PV和UV在很大程度上反映了应用各页面功能的使用情况，能够为产品功能优化和相关业务决策提供良好的数据支持。我们对接入客服域监控的应用进行了多次迭代的PV、UV数据分析，起到了很好的推动和决策作用，主要有以下几个方面：新功能上线效果分析：通过分析页面业务功能模块的PV相关数据，可以分析出对应新功能的使用情况。如果发现部分功能的获客率偏低，可与业务沟通确认是功能设计问题还是功能上线问题，迅速调整运营策略；线下无用模块：通过页面使用情况分析，接入系统同产品确认运行后，线上客服管理系统、工单管理系统中9个页面已下线，降低维护成本页面；支持技术改造优先策略：在技术栈迁移过程中，可以先迁移流量比较大的页面。通常，访问量大的页面对应的需求迭代频率更高。通过对页面流量进行排序并按优先级迁移，提高整体投资的ROI；帮助系统体验优化：通过分析较高PV页面的用户访问链接，将取消订单、创建补偿订单等需要高频操作但需要打开其他页面的功能集成到客服聊天页面的座席助手模块中以提高客户服务效率。工作效率。3.2JS错误率监控脚本错误主要有两大类：语法错误和运行时错误。简单来说，浏览器在一些特殊场景下会报JS异常，甚至会造成系统卡顿、页面不可用等极端情况，极大地降低用户体验。因此，我们通过监控系统对核心系统关键环节、关键指标的异常数据进行分析，并设置监控告警。当达到设定的阈值时，将发送飞书或短信警报。错误内容专项整改，效果如下：提高系统稳定性：共处理41个JS脚本异常，发现流程异常业务场景进行专项整改，大大提高了稳定性系统。发现隐藏问题：通过监控发现JS错误数量增加，排查发现数量还在增加。联系了实时触发报错的远程客服，发现对接的第三方SDK出新版本了。特殊情况会出现报错，应及时同步相应的报错。三位同学进行批改，有效避免外部依赖造成的隐患。3.3API请求优化监控提供应用中各个API的调用状态，包括调用次数、调用成功率、返回信息、调用成功或失败的平均耗时等数据。通过分析指定时间段内应用内所有API请求数据，我们可以挖掘出以下与业务代码实现和接口稳定性相关的问题：调用频率，但实际报表数据没有使用，与业务沟通后发现是历史遗留逻辑，目前无用，故下架。减少不必要的接口调用，释放更多的浏览器请求资源。减少冗余调用：治理接口有5个高频调用。通过分析，发现一些非核心功能有大量的接口调用。代码走查，这部分接口是一个对实时性要求不高的枚举列表的接口，可以通过前端缓存的方法减少接口调用次数，从而提高用户切换会话的效率减轻服务器的调用压力。优化的技术方案：客服一站式工作台，长链和短链调用相结合。在日常监控分析中，我们发现部分短链接口存在大量调用。经过代码走查和调用链接分析，发现由于业务功能需要，只要客服切换会话，就会拉取当前会话的最后5条消息，并发起短链接请求，导致切换session时有卡顿感，而且由于链接短，容易出现并发量大，频繁切换session后会出现跨线程。因此，在与后台沟通后，将原技术方案中的短链调用改为长链消息推送，大大减少了接口调用和超时消息，提升了用户体验和系统稳定性。3.4静态资源加载异常优化静态资源加载分为页面中的图片、CSS、JS等Assets资源加载失败。目前，客服BPO工作场所有安全管控，因此会有运营或其他应用上传的静态资源链接、图片等资源。一站式工作台的业务拓展，陆续支持了其他租户的客户来线。业务上线后，我们通过监控发现资源错误的数量增加了。经过排查，我们确认由于产品图片等资源都是配置的CDN地址，需要BPO职场开通网络白名单客服才能看到指定的图片资源。通过监控快速定位到相应的工作场所，并同步相应工作场所的IT负责人进行处理。运行配置错误地址更正：通过监控数据分析发现，报错的静态资源地址较多，包括飞书内网地址和猪剑迁移遗留资源。很麻烦。确认是操作迁移过程中的疏漏造成的，联系相应的操作同学进行专项处理，及时降低问题的影响。3.5页面加载性能优化页面性能对用户体验至关重要。每次重构提升页面性能，单靠工程师开发的设备测试数据是没有说服力的，需要大量的真实数据进行验证；例如，客服工作场所普遍反映商品详情页打开速度慢，影响客服的工作效率，体验很差。为了弄清楚具体的加载慢点，我们可以在页面加载页面的过程中埋下以下时间节点：e_product_finish[总耗时ms]：打开商品详情页，直到所有资源（包括图片）加载完成andrequests))Time-consuminge_product_loadImg[Time-consumingtoloadimagesinms]:从接口请求返回所有图片耗时e_product_loadAndfetch[Requesttime-consuminginms]:在产品上加载静态资源需要时间详情页&&在线数据分析三天后发起请求，大部分时间花在加载图片上。分析耗时较长的商品详情的上下行，发现此类商品的图片大多为500kb+甚至1MB的图片。单品最多的时候，产品轮播有近52张图片，加上产品详情图、产品穿搭效果图等，单品详情页第一次需要加载80+张图片，惨不忍睹对于浏览器。因此，我们与产品商量后，在产品详情页加载缩略图替代高清大图，同时减少首次加载的图片数量（第一次只加载5张图片，以及其余图片资源在点击查看更多后加载）等一系列优化策略，大大提升了商品详情页的页面体验。如下图，我们在12月19日上线优化后，图片资源加载的平均耗时趋势有明显的下降趋势。4、监控的有效性在接入监控的半年多时间里，八达通一站式工作台的稳定性有了很大的提升。通过治理和告警，改善各工作场所的运行环境，大大减少了在线TS问题。反馈并避免潜在的在线问题。4.1线上TS问题减少自接入监控以来，通过双周稳定性周会治理，前端TS问题数量不断减少，双十一、双十二促销期间也持续稳定在下方5.##4.2潜在问题发现通过监控告警至少发现5个潜在问题，并通过告警信息及时解决潜在问题风险，避免线上问题的发生。这里举一个很典型的接口超时告警的例子：获取用户标签信息接口超时告警通过监控告警，发现一个用户在1分钟内多次调用用户标签信息接口失败，显然是有问题的。与网关和后台对接后，发现主要原因是：一站式工作台中的在线和离线会话列表有用户标签显示。当用户刷新浏览器时，会同时调用在线和离线会话。离线用户信息，如果不及时关闭离线用户，将会导致更多的超时短链请求。该接口虽然是非核心链接接口，但是大量的短链调用是一个潜在的风险。与产品商量后，删除来电列表用户标签，取消接口请求。4.3提升客服工作台运行环境的稳定性我花了更多时间定位问题，最后发现是浏览器版本太低。因此，针对这种情况，我们定期总结浏览器版本的使用情况，告知业务，让业务推动各职场浏览器版本的升级和统一。从监测数据来看，有火狐浏览器、搜狗浏览器、QQ浏览器和安卓手机浏览器。这些浏览器基本上都存在一些兼容性问题，因为一站式工作台的技术升级需要比较长的时间。业务模块重构了很多浏览器的新特性，所以对非chrome浏览器存在兼容性问题，这也是为什么一些职场客服反馈工单明细打不开，订单明细打开异常等原因。数据汇总低版本chrome浏览器：经过多次推进，浏览器版本问题反馈数量大大减少，大大减少了浏览器版本排查的研发时间。4.4核心性能指标的监控目前我们除了上面商品详情页的监控指标外，我们还监控工单详情页和订单详情页的渲染时间，以及接收和发送消耗的时间消息。当超过一定阈值时，上报告警信息。目前工单详情和订单详情页面已经进行了多次重构。整体渲染时间稳定在500毫秒左右，秒开即可。详情可以看近一周的渲染趋势：近7天工单详情页渲染趋势：近7天工单详情页渲染趋势：我们也重构了时间——消耗消息收发的核心环节，目前没有反馈消息收发造成的延迟。对于接收消息的报警，我们只会在超过700毫秒的时候报警，因为大部分消息都是在100毫秒内接收和发送的，客服是毫无察觉的。5小结客服系统接入监控已经半年多了。监控是我们系统发布上线的保证。同时，监控数据也可以帮助我们看到系统中的很多问题，为我们系统的稳定性提升和系统体验优化做出了很大的贡献。好消息是，我们自主研发的监控平台也在逐步建设和完善中。目前前端平台、稳定性监控平台和效率工程联合开发的前端监控产品第一版已经完成。我们相信，随着自研监控能力的不断提升，在前端监控方面能够取得更好的效果。
