后台监控是提升故障处理能力、保障服务质量必不可少的环节。需要负责及时报告错误，收集有效信息，提供故障排除依据。及时报错：线上出现问题后，会通过运营或产品反馈给开发者。转移过程可能需要几分钟甚至几十分钟。这段时间可能会直接给公司造成经济损失。如果有监控系统，当线上出现问题时，监控系统可以第一时间报警，并通知开发商，开发商可以第一时间修复线上，将企业的损失降到最低。收集有效信息：尤其是移动时代，在定位问题时，需要大量的用户信息（如用户手机版本、网络情况、操作流程等）。如果没有监测数据，往往只能靠猜测，或者来回找产品运营有问题甚至有问题的用户进行沟通定位，会花费很多时间。如果监控系统记录了设备信息、出错时的场景信息、用户的操作过程，我们可以根据这些信息直接定位问题，在最短的时间内完成故障修复，降低问题的影响。提供故障排除依据：监控前端SDK上报的错误信息等记录信息的最终目的是作为我们故障排除的依据，为我们的服务保障提供坚实的基础。监控分类综上所述，我们的监控平台强调实时性和全面性。为保证实时性，出现错误时尽量上报，并能实时显示在监控面板上，并有及时的告警机制。全面性是指采集的信息全面，包括用户信息、环境信息、错误信息等。因此，监控平台包括记录式监控和抓包式监控。基于记录的监控页面访问记录：用户访问了哪些页面。资源加载记录：页面加载了哪些资源。用户行为记录：用户在页面做了哪些操作，目前我们只记录用户的点击行为。接口调用相关记录：页面调用了哪些接口。抓取DNS劫持监控：页面是否被劫持。资源加载错误：哪些资源加载失败，为了捕获跨域JavaScript错误，需要在对应的资源标签中添加crossorigin属性。页面错误：页面呈现期间发生的错误。内部逻辑错误：具体用户操作出现的错误，通过用户行为定位。接口错误：调用接口失败。场景还原方式当抓包式监控捕获到错误时，我们根据错误信息定位用户，然后通过记录式监控还原错误发生的场景，从而重现问题并定位解决及时。我们称这个过程为场景还原法。该监控平台通过采集监控数据，采用场景还原的方式解决问题。它将按时间顺序显示支撑系统处理的所有记录和错误。通过场景还原列表，我们可以还原指定用户浏览页面过程中发生的所有事件及其顺序，从而判断问题发生的时间和环境。假设如下场景：PM：BD反馈用户无法滑出购物车！路：什么？我会尽力！我这里可以看到PM：商家反馈，店里有的用户可以，有的用户不能我去监控平台查一下PM：xxxRD在监控面板上使用场景还原功能调出用户的所有信息记录。发现用户是从菜品详情页进入购物车的，普通用户不是从这个入口进入的。定位到菜品详情页跳转到购物车的部分有问题，立马修复。在用户可能有多个操作的场景下，场景还原方法可以为特定用户还原完整的操作路径和页面上发生的所有事情，帮助重现问题。另外，一些非重复出现的问题往往是由于机型或环境不同造成的，也可以通过场景还原时再现问题发生的环境来判断。本文主要介绍下单终端技术群监控平台HUNT前端SDK的实践经验。还有很多地方需要改进。欢迎大家帮助我们改进。总体设计如图所示。我们的监控平台HUNT分为三个部分：前端SDK、Web层支撑系统和监控面板。监控前端SDK：收集用户端错误及相关信息，上报给监控Web层支持系统：处理上报的监控信息监控面板：提供实时查看上报信息的面板，方便使用监控数据前端SDK运行在前端页面，采集监控数据上报给支撑系统，作为监控面板查询的数据源。就前端SDK而言，可以分为三个部分：数据模块、数据处理模块、报表模块。数据模块包括各个具体的监控数据模块和环境数据模块：数据模块的各个监控模块：获取需要上报的具体内容信息（EventData或ErrorData）DNS劫持检测资源完整性检查资源加载错误API监控全局错误用户交互自定义报表环境模块：获取环境数据数据处理模块：将环境数据和各内容数据处理成接口对应的格式，返回标准格式数据。上报模块：从环境模块中获取环境数据，根据不同的监控类型，连同内容数据分发给相应的数据处理模块。获取标准数据后，发送给Node层。上报模块首先检查本地缓存数据，将本地数据和新生成的数据一起上报。如果报告失败，它将存储在LocalStorage中。详细设计SDK采用单例模式，包括各个监控模块、环境模块和上报模块。每个具体的监控模块获取一个上报模块的实例进行上报，上报模块内部保证同一时刻只会有一个上报请求。事件的监听在捕获阶段进行，防止事件冒泡被阻塞而遗漏信息。环境模块环境模块收集以下环境信息：项目配置信息、Web环境数据、JsBridge环境数据。其他如UA、ISP等Web层可以获取的信息由Web层获取。该模块公开了init和getEnv方法。init接收用户配置的环境参数getEnv更新页面的URL，然后返回当前env对象freeze的副本。上报模块采用单请求上报方式。每个用户在同一时间只会有一个报告请求，每次都会上传当前记录的监控信息。列表一起上报，成功后再继续上报。上报结束前的新上报记录保存在Localstorage中。收到成功信息后，删除上报数据，继续上报。不成功的记录保存在本地存储中。这里要注意控制LocalStorage存储的上限。当前没有数据上报时触发上报，尝试上报当前所有的Localstorage数据和新增数据。如果上报记录过多，则分段发送。如果所有报告发送完毕或报告失败，则报告结束。每个特定的监控模块DNS劫持HTTPS页面。页面资源被劫持后，无法获取页面资源。如果劫持者没有利润，劫持动机就会降低。如果还是被劫持，前端资源还没有到达本地，无法完成上报，只能从网络层进行监控。由于美团点评平台已经全面砍掉了HTTPS，所以该模块不在本次监控系统中。不过我们团队之前也做过HTTP域下的劫持检测。检测思路是请求Node层指定域名下的示例HTML或JavaScript资源，比较返回结果是否符合预期。资源完整性检查资源完整性检查模块的任务是记录页面加载了哪些资源并上报。我们在排查问题的时候，可以查看当前页面有哪些资源加载成功，加载顺序，排除某些资源没有加载或者加载顺序不对导致的错误。资源加载完整性校验的上报时机分为四类。每次将监听开始到触发上报之间所有记录的加载资源一起上报，以减少上报请求次数：delay(5seconds)afterwindow.onload,stopmonitorafterwindow.onload,stopmonitoringafterwindow.onload:开始监听onhashchange,一定延时（5秒）后触发上报，上报后停止监听在内存中维护一个已加载资源的数组，删除上报的资源每次报告后记录。资源加载错误监听Window上的错误事件代理，过滤Window本身的错误。根据标签类型判断资源类型，src或href为资源地址。为了捕获跨域的JavaScript错误，需要在相应的资源标签中添加crossorigin属性。API错误监控也是通过在XMLHttpRequest中添加hook来实现的。打开时记录接口URL，发送后根据状态判断，接口调用失败时上报。XMLHttpRequest.prototype.open=functionopen(method,url,bool){monitor.originXHR.open.apply(this,[method,url,bool]);//getsomething...//this.ajaxUrl=url;}XMLHttpRequest.prototype.send=functionsend(_data){constself=this;this.addEventListener('readystatechange',()=>{if(self.readyState===4){if(self.status!==200&&self.status!==304&&this.ajaxUrl!==REPORT_URL){//filterurls//reporterrorinfo//...//monitor.reporter.report(dataTypes.API_ERROR,error);}}},false);monitor.originXHR.send。应用（这个，[_data]）；}；过滤掉SDK本身的上报地址（防止上报失败导致循环上报）和其他一些需要忽略的接口地址。注意接口访问URL可能是相对路径，建议填写协议和域名。全局错误监听监听Window上的错误事件，过滤事件代理的错误。用户交互监控监听Window上捕获阶段的点击事件，记录点击相关的数据。在业务代码中，可以在比较关注的元素上添加数据属性。每次点击都会报告被点击元素的指定属性、附加信息和DOMPath，以帮助定位元素。记录用户交互信息，可以明确该场景出现问题时用户的具体操作路径。结合环境数据、资源加载记录、错误数据，整个问题场景一目了然。接入方式SDK的接入方式分为以下两种：1.先加载SDK。优点：可以记录页面加载前的情况，加载的资源，发生的错误。缺点：影响页面加载速度，直接在头部复制，对业务访问不友好。2、后加载SDK的优点：对页面性能无影响。缺点：只能监控加载成功的页面，但我们需要关心页面加载失败的场景。为了满足功能需求，目前的监控平台v1是通过直接在监控页面头部引入压缩SDK代码，业务代码初始化和配置项目名称等方式引入的，这一步可以通过借助webpack插件，降低业务群接入的复杂度。后续改进方向考虑采用：核心基础库+加载器/插件的方式，将必须先加载的SDK代码导入头部，其余代码在页面加载完成后异步添加.结语HUNT系统上线后，全面覆盖了下单终端群活跃的Web项目，并进行了多维度的监控数据上报。下一步工作的重点是有效地分析和利用收集到的数据。目前现有的监控工具大多只关注抓拍监控部分，缺少录音监控。相应地，记录式监控所支持的场景还原功能也不可能实现。这种类型的监控系统只能检测错误，而不能帮助他们定位错误。接入监控系统后，不仅可以在监控面板上实时看到各种错误信息，还可以根据错误的上下文，包括页面加载的过程，用户进行了哪些操作，哪些API已访问等，按时间顺序排列即可完成场景还原。结合发生错误的环境数据，重现问题和定位问题变得非常容易。在收到故障反馈后，对于一些偶发问题或者用户操作复杂的问题，可以直接通过监控面板了解情况，节省了大量的沟通成本，我们的故障反馈速度和能力也得到了很大的提升。以上就是我们终端团队监控平台前端SDK部分的实践分享。欢迎大家批评指正。希望您能提出好的建议，帮助我们改进。我们会不断优化，继续与您探讨。耐心阅读到这里的读者，谢谢十二万分！原文链接：https://tech.meituan.com/hunt-sdk-practice.html转载请微信联系公众号获得授权】点此查看作者更多好文
