一种Web应用的前端的实时监控方法及系统与流程

一种web应用的前端的实时监控方法及系统
技术领域
1.本发明涉及一种web应用的前端的监控方法。


背景技术：

2.web应用(web app，也称web应用程序，web application)是在网页浏览器中运行的应用软件。一种常见的web应用采用客户端-服务器架构，其中的客户端就是网页浏览器。web应用在客户端的部分称为前端，web应用在服务器端的部分称为后端。web应用的前端部署在用户的电子设备上，涉及的电子设备的种类很多——手机、平板电脑、计算机等，运行环境较为复杂，因此web应用的前端运行数据较难收集，难以得到有效的监控。


技术实现要素：

3.本发明所要解决的技术问题是针对web应用，设计出一套全面监控其前端运行情况的方法。所述前端运行情况包括网页浏览器的性能、与服务器的交互情况、是否存在运行错误，必要时还可以对用户操作行为进行还原。
4.为解决上述技术问题，本发明提出了一种web应用的前端的实时监控方法，包括如下步骤。步骤s1：在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的应用程序接口api收集与该网页有关的三类数据——性能数据、请求数据、错误数据。步骤s2：该代码利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据。步骤s3：web应用的后端服务器接收到前端上报的与该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警。步骤s4：web应用的后端服务器将经过预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。
5.进一步地，所述步骤s1中，所述性能数据是指能够反映该网页加载性能的数据，是该代码通过浏览器可供调用的接口performance.timing和performance.getentries获取到的；所述性能数据分为两组：一组为基于该网页打开后各阶段加载时间节点的相对时间数据，另一组为该网页加载各个阶段区间段计时。
6.优选地，所述步骤s1中，该代码注入网页浏览器且启动后，会持续监听网页上所有节点、子节点的变化并记录下来，通过计算网页中所有已变化的节点、子节点的数量和层级，当达到该代码预设的临界值时，该网页的变化趋于平稳，该代码认为该网页主体内容渲染完成，将此时间点作为首屏时间。
7.优选地，所述步骤s1中，该代码为部分节点、子节点指定一个特殊标记位，只有携带该特殊标记位的节点及其子节点的变化才会计入统计；该参数还为部分节点、子节点指定一个反向标记位，凡是携带该反向标记位的所有节点、子节点变化均予以忽略。
8.进一步地，所述步骤s1中，所述请求数据是指与数据请求、响应有关的数据，是该代码通过代理的方式对网页浏览器原生的请求接口进行重新封装，将从该网页发起的数据请求url、参数、响应时间、响应状态、响应值、正常响应数据的错误码进行拦截和记录得到
的。
9.进一步地，所述步骤s1中，所述错误数据是指与该网页执行异常、错误有关的数据，是该代码通过window.onerror和unhandledrejection事件捕获的网页执行异常和错误、以及用户触发异常或错误的操作行为。
10.优选地，所述步骤s2中，在支持requestidlecallback的网页浏览器中，该代码利用网页浏览器任务空闲的时间批量上报与该网页有关的数据；在不支持requestidlecallback的网页浏览器中，该代码按照预设的时间间隔定时批量上报与该网页有关的数据。
11.进一步地，所述步骤s3中，所述预处理流程基于nodejs和redis实现，包括：(1)对数据进行初步的清洗，对同一ip地址、设备指纹的请求进行频次限制；(2)对web应用的前端上报的时间和服务器时间进行对比矫正和重新排序。
12.进一步地，所述步骤s3中，所述实时报警的间隔控制方式为如下任意一种。第一种是首次触发报警后立刻报警，之后在设定时间内多次触发不会报警，直到该设定时间段结束；此后从头开始。第二种是首次触发报警后立刻报警，之后在设定时间内如果触发次数小于设定值不会报警，在设定时间内如果触发次数超过该设定值，则无论是否在设定时间内均再次报警。
13.本发明还提出了一种web应用的前端的实时监控系统，包括数据收集单元、数据上报单元、数据预处理单元、数据存储和分析单元。所述数据收集单元用来在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的api收集与该网页有关的三类数据——性能数据、请求数据、错误数据。所述数据上报单元用来利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据。所述数据预处理单元用来在收到该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警。所述数据存储和分析单元用来将预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。
14.本发明取得的技术效果是：能帮助开发者实时了解web应用的前端运行情况，并针对特定的事件及时发出警报；能够为开发者提供web应用的前端运行时的有效数据，对异常和错误问题进行快速定位。
附图说明
15.图1是本发明提出的web应用的前端的实时监控方法的流程示意图。
16.图2是本发明提出的web应用的前端的实时监控系统的流程示意图。
17.图中附图标记说明：1为数据收集单元、2为数据上报单元、3为数据预处理单元、4为数据存储和分析单元。
具体实施方式
18.请参阅图1，本发明提出的web应用的前端的实时监控方法包括如下步骤。
19.步骤s1：在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的api(application programming interface，应用程序接口)收集与该网页有关的数据。所述“与该网页有关的数据”分为三类——性能数据、请求数据、错误数据。性能数
据是指能够反映该网页加载性能的数据。请求数据是指与数据请求、响应有关的数据。错误数据是指与该网页执行异常、错误有关的数据。
20.所述性能数据是该代码通过浏览器可供调用的接口performance.timing和performance.getentries获取到的。所述性能数据分为两组。一组为基于该网页打开后各阶段加载时间节点的相对时间数据，主要用于记录和统计网页白屏时间、服务器响应时间、首屏时间、节点激活时间。另一组为该网页加载各个阶段区间段计时，可提供dns解析耗时、服务器响应耗时、资源加载耗时。这两组数据能够反映传统服务端渲染的页面加载性能。该代码同时提供了一个配置选项，用来设置需要收集哪些性能数据，根据业务场景和框架特性过滤掉不重要的性能数据，以避免性能和网络资源的占用和浪费。
21.由于现代web应用的前端应用框架的更新，使用vue、react、angular等前端单页应用框架开发的网站逐渐成为主流。在使用这类框架时，由于网页上的信息和元素都是动态生成的，通过网页浏览器原生接口获取到的数据无法正确反应网页真实的加载速度，例如白屏时间和首屏时间，这就需要通过特定的代码计算以适配此类场景。
22.优选地，该代码注入网页浏览器且启动后，会持续监听(mutationobserver)网页上所有节点、子节点的变化并记录下来，通过计算网页中所有已变化的节点、子节点的数量和层级，当达到该代码预设的临界值时，该网页的变化趋于平稳，可以视为该网页主体内容渲染完成，将此时间点作为首屏时间，从而更符合真实用户体验。由此该代码提供了一种全新计算页面首屏时间的算法，以适配现代web应用特性。
23.优选地，为了进一步提高数据的准确性，消除页面无关元素变化导致首屏时间计算不准确，该代码提供了一个自定义的配置参数用以进一步修正首屏时间的准确性。该参数为部分节点、子节点指定一个特殊标记位，只有携带该特殊标记位的节点及其子节点的变化才会计入统计。该参数还为部分节点、子节点指定一个反向标记位，凡是携带该反向标记位的所有节点、子节点变化均予以忽略。特殊标记位与反向标记位的结合可以解决因为动画或者轮播场景下首屏时间计算异常的问题，使得计算的结果更具准确性和通用性。
24.所述请求数据是该代码通过代理(proxy)的方式对网页浏览器原生的请求接口进行重新封装，将从该网页发起的数据请求url、参数、响应时间、响应状态、响应值、正常响应数据的错误码进行拦截和记录。web应用的后端系统将通过上报的数据监控请求的成功率和响应时长，从而体现网站的页面稳定性。传统上通过判断http请求状态码区分请求是否成功，对于正常响应数据(即请求状态码为200)不收集。但是即便是正常响应数据，如果响应的数据结构不符合预期也会造成网站的异常，因此该代码对正常响应数据也自动识别其中的ret、errno等常规标识字段，提取错误码。所提取的错误码后续可用于分析请求网页请求成功率和错误码分布情况，从而可以进一步划分不同的业务错误场景，在分析错误的时候提供更多的信息。该代码同时允许用户自定义错误码提取规则，以适配不同的web应用。
25.所述错误数据是该代码通过window.onerror和unhandledrejection事件捕获的网页执行异常和错误、以及用户触发异常或错误的操作行为。在该网页加载后，该代码会第一时间启动并对页面行为进行监控，用户在页面上进行的鼠标滚动、屏幕触碰等操作，页面跳转行为都会被记录到内存中。在捕获到错误信息后，该代码同时上报用户触发错误的操作行为。后续可通过对用户触发异常或错误的操作行为路径复现异常和错误场景，能够更快定位到异常和错误来源。
26.步骤s2：该代码在收集到与该网页有关的数据后，并不会立刻进行上报，而是利用网页浏览器任务空闲的时间进行批量上报，此技术依赖网页浏览器的requestidlecallback实现。在不支持requestidlecallback的网页浏览器中，该代码按照预设的时间间隔定时批量上报与该网页有关的数据。这样能够避免造成网站正常流程的阻塞。进行批量上报的同时会对数据进行压缩以保证上传的性能，同一次上报的数据中所有通用的信息仅会保留一份，例如用户身份标识、设备指纹，同一页面url下的所有数据也会被打包成一份以共用同一份页面信息。
27.步骤s3：web应用的后端服务器接收到前端上报的与该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警。所述预处理流程基于nodejs和redis实现，包括如下内容。(1)对数据进行初步的清洗，保证最终进入数据库的数据的准确性。例如对数据结构进行校验，同时对同一ip地址、设备指纹的请求进行一定的频次限制。(2)由于数据是批量上报的，为了保证数据顺序与真实触发的顺序一致，需要对web应用的前端上报的时间和服务器时间进行对比矫正和重新排序。
28.在预处理阶段，还对第一类严重事件进行同步的实时报警，该代码允许自行配置哪些事件属于第一类严重事件。实时报警的间隔控制方式有两种：第一种是首次发生第一类严重事件后立刻报警，之后在设定时间内多次触发不会报警，直到该设定时间段结束。此后从头开始。第二种是首次发生第一类严重事件后立刻报警，之后在设定时间内如果触发次数小于设定值不会报警，在设定时间内如果触发次数超过该设定值，则说明错误较为严重，此时无论是否在设定时间内均再次报警。这两种实时报警的间隔控制方式在“尽量减少报警次数”和“尽可能将严重事件提醒工作人员”之间取得了较好的平衡。
29.步骤s4：经过预处理之后的与该网页有关的数据，被保存到数据库中，后续可供数据分析统计。保存在数据库中的数据如发现第二类严重事件，则进行异步的非实时报警，例如通过微信、短信、邮件等方式通知工作人员。该代码允许自行配置哪些事件属于第二类严重事件。
30.现有的web应用通常只在前端运行数据进入数据库后，才对前端运行数据进行处理，并判断是否报警，属于异步任务分析触发的报警机制，报警一般在小时级甚至需要t+1天。本发明在步骤s3中增加了对web应用的前端运行数据的预处理，其中包含判断是否需要实时报警，数据预处理阶段如果触发报警，距离步骤s1的数据收集的时间是在秒级，通常在1秒-10秒之间，因此称为同步和实时的报警。这也表明步骤s2的数据上报距离步骤s1的数据收集的时间更短。这种预处理+实时报警方案的响应更及时，对数据更敏感，在预防严重事故有着非常重要的作用。
31.请参阅图2，本发明提出的web应用的前端的实时监控系统包括数据收集单元1、数据上报单元2、数据预处理单元3、数据存储和分析单元4。图2所示系统对应于图1所示方法。
32.所述数据收集单元1用来在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的api收集与该网页有关的三类数据——性能数据、请求数据、错误数据。
33.所述数据上报单元2用来在该代码在收集到与该网页有关的数据后，利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据。
34.所述数据预处理单元3用来在收到该网页有关的数据后，先进行预处理，并在发现
有需要同步报警的事件时实时报警。
35.所述数据存储和分析单元4用来将预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。
36.与现有技术相比，本发明提出的web应用的前端的实时监控方法及系统具有如下有益效果。
37.第一，本发明在数据保存到数据库之前，先对数据进行预处理，并在发现有需要同步报警的事件时实时报警。在数据保存到数据库之后，是常规的数据处理分析，并在发现有需要报警的事件时异步报警。因此本发明实际上具有两次数据处理过程，具有两个报警触发机制，其中新增的实时报警方案的响应更及时。
38.第二，本发明收集性能数据时，将性能数据分为两组，在后续的数据分析阶段起到不同作用。基于网页打开后加载时间节点的相对时间数据，在进行后续分析时用于计算平均值、p90值等统计值，通常用于分析网页加载的平均性能表现。如果要对网站存在的性能瓶颈进行进一步的分析(尤其是在性能尾部用户的加载情况)，以及当特定用户反馈出现加载问题时，需要对各个加载阶段的具体耗时进行分析，例如在分析用户白屏时间过长的问题时，可能是因为网络原因造成的dns解析时间长、文档加载时间长，也有可能是因为服务器故障导致的服务器无法应答。区间段时长的数据上报可用于分析造成此类具体问题的具体原因，为提供针对性的解决方案提供数据支撑。
39.第三，本发明在收集性能数据时，对首屏时间的计算提供了更精确的计算方法。
40.第四，本发明在收集请求数据时，对正常响应数据也进行错误码的提取和收集，为后续统计请求错误率时提供进一步分析业务错误的方法。
41.第五，本发明在收集错误数据时，包含用户触发错误的操作行为，这样就能够在后续根据用户触发错误的操作行为复原错误场景，能够更快定位到错误来源。
42.以上仅为本发明的优选实施例，并不用于限定本发明。对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种web应用的前端的实时监控方法，其特征是，包括如下步骤；步骤s1：在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的应用程序接口api收集与该网页有关的三类数据——性能数据、请求数据、错误数据；步骤s2：该代码利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据；步骤s3：web应用的后端服务器接收到前端上报的与该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警；步骤s4：web应用的后端服务器将经过预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。2.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s1中，所述性能数据是指能够反映该网页加载性能的数据，是该代码通过浏览器可供调用的接口performance.timing和performance.getentries获取到的；所述性能数据分为两组：一组为基于该网页打开后各阶段加载时间节点的相对时间数据，另一组为该网页加载各个阶段区间段计时。3.根据权利要求2所述的web应用的前端的实时监控方法，其特征是，所述步骤s1中，该代码注入网页浏览器且启动后，会持续监听网页上所有节点、子节点的变化并记录下来，通过计算网页中所有已变化的节点、子节点的数量和层级，当达到该代码预设的临界值时，该网页的变化趋于平稳，该代码认为该网页主体内容渲染完成，将此时间点作为首屏时间。4.根据权利要求3所述的web应用的前端的实时监控方法，其特征是，所述步骤s1中，该代码为部分节点、子节点指定一个特殊标记位，只有携带该特殊标记位的节点及其子节点的变化才会计入统计；该参数还为部分节点、子节点指定一个反向标记位，凡是携带该反向标记位的所有节点、子节点变化均予以忽略。5.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s1中，所述请求数据是指与数据请求、响应有关的数据，是该代码通过代理的方式对网页浏览器原生的请求接口进行重新封装，将从该网页发起的数据请求url、参数、响应时间、响应状态、响应值、正常响应数据的错误码进行拦截和记录得到的。6.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s1中，所述错误数据是指与该网页执行异常、错误有关的数据，是该代码通过window.onerror和unhandledrejection事件捕获的网页执行异常和错误、以及用户触发异常或错误的操作行为。7.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s2中，在支持requestidlecallback的网页浏览器中，该代码利用网页浏览器任务空闲的时间批量上报与该网页有关的数据；在不支持requestidlecallback的网页浏览器中，该代码按照预设的时间间隔定时批量上报与该网页有关的数据。8.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s3中，所述预处理流程基于nodejs和redis实现，包括：(1)对数据进行初步的清洗，对同一ip地址、设备指纹的请求进行频次限制；(2)对web应用的前端上报的时间和服务器时间进行对比矫正和重新排序。9.根据权利要求1所述的web应用的前端的实时监控方法，其特征是，所述步骤s3中，所
述实时报警的间隔控制方式为如下任意一种；第一种是首次触发报警后立刻报警，之后在设定时间内多次触发不会报警，直到该设定时间段结束；此后从头开始；第二种是首次触发报警后立刻报警，之后在设定时间内如果触发次数小于设定值不会报警，在设定时间内如果触发次数超过该设定值，则无论是否在设定时间内均再次报警。10.一种web应用的前端的实时监控系统，其特征是，包括数据收集单元、数据上报单元、数据预处理单元、数据存储和分析单元；所述数据收集单元用来在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的api收集与该网页有关的三类数据——性能数据、请求数据、错误数据；所述数据上报单元用来利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据；所述数据预处理单元用来在收到该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警；所述数据存储和分析单元用来将预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。

技术总结
本发明公开了一种Web应用的前端的实时监控方法，包括如下步骤。步骤S1：在网页里嵌入一段代码，当有网页浏览器加载该网页时，该代码通过该网页浏览器的应用程序接口API收集与该网页有关的三类数据——性能数据、请求数据、错误数据。步骤S2：该代码利用网页浏览器任务空闲时间、或定时批量上报与该网页有关的数据。步骤S3：Web应用的后端服务器接收到前端上报的与该网页有关的数据后，先进行预处理，并在发现有需要同步报警的事件时实时报警。步骤S4：Web应用的后端服务器将经过预处理之后的与该网页有关的数据保存到数据库中，并在发现有需要异步报警的事件时非实时报警。本发明能针对特定的事件及时发出警报。针对特定的事件及时发出警报。针对特定的事件及时发出警报。


技术研发人员：苏志豪 王腾 刘炜华 张平
受保护的技术使用者：上海生腾数据科技有限公司 上海临冠数据科技有限公司 上海盈五蓄数据科技有限公司
技术研发日：2023.06.28
技术公布日：2023/9/7