CN116738091A - 页面监控方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明提供一种页面监控方法、装置、电子设备及存储介质，所述页面监控方法应用于客户端，包括以下步骤：在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据；获取多个历史页面截图和各所述历史页面截图对应的历史请求数据；获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据；基于所述差异数据进行页面预警。本发明通过对当前页面截图，获取当前页面对应的请求数据与各历史页面截图对应的历史请求数据的差异数据，然后基于差异数据进行页面预警，不仅可以检测出页面异常，解决页面的业务数据出错时的报警准确度低的问题，还可以根据将页面的异常点数据提取出来，方便后续修复页面的异常问题。

Description

页面监控方法、装置、电子设备及存储介质

技术领域

本发明属于数据处理技术领域，特别是涉及一种页面监控方法、装置、电子设备及存储介质。

背景技术

IT系统中，系统发生异常存在两种情况，一是应用服务本身异常，已经无法正常返回数据，这种情况可以通过监控服务的健康程度接口即可进行报警跟进；另外一种情况是，应用服务状态正常，接口也能正常返回信息，但可能里边部分信息已经不正确，例如客户端一行展示4个数据，也就是应该返回4项数据，而服务端只返回了3个数据，此时客户端展示的时候就会出现空白区域，俗称天窗。而现有技术往往跟进后端返回的数据进行分析，例如：

CN202010365297.7基于prometheus的接口监控方法、装置、计算机设备及存储介质：根据接口的返回值结构化存储了之后，后续在对接口返回的数据进行对比分析，若结构发生了变化，即可进行报警。

CN201710584725.3一种应用接口监控方法、装置、设备及计算机可读介质：获取步骤，用于获取应用接口的调用数据，并将所述调用数据存储在日志文件中；收集步骤，将所有的应用接口的日志文件上传至服务器；分析步骤，对收集的日志文件进行分析，并以三维图形的形式显示分析结果。本发明通过对服务本身及第三方服务之间的应用接口之间的调用进行监控，从而可以分析各应用接口之间的运行质量，进而监控服务的质量，达到细粒度监控的效果，并提出了应用接口故障定位的归一化函数值计算方法，达到快速定位故障的目的。

CN201811519474.1一种基于zabbix监控交易系统异常的方法及其系统：根据请求数据返回自定义的返回码以及说明信息，并将该返回码和说明信息写入文件；定时检测文件内的返回码和说明信息，若返回码为0，则判定交易正常；若返回码为负值，则判定交易异常，并通过zabbix检测触发器，推送异常告警信号。本发明还公开了一种基于zabbix监控交易系统异常的系统，包括数据请求模块、数据处理模块、异常判定模块和异常告警模块。本发明基于Zabbix自定义脚本的监控技术手段，通过模拟POS终端的方式，模拟银联标准签到报文，向支付系统发起模拟交易请求，实现对交易过程的监控，能更准确的定位到交易系统的异常。

由此可见，相应技术对页面的监控存在监控的颗粒度比较粗，只是监控到了特定返回字段或者数据接口是否异常，但无法精细化识别例如个数缺少的问题，而且现有技术中监控的前期准备工作较量较大，需要对数据接口进行结构化处理。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种页面监控方法、装置、电子设备及存储介质，用于解决页面的业务数据出错时的报警准确度低的问题。

为实现上述目的及其他相关目的，本发明的第一方面提供一种页面监控方法，应用于客户端，包括以下步骤：在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据；获取多个历史页面截图和各所述历史页面截图对应的历史请求数据；获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据；基于所述差异数据进行页面预警。

于所述第一方面的一实施例中，于在获取所述差异数据之后还包括：确认所述差异数据的类型；获取各所述历史页面截图对应的接口请求，并获取各所述接口请求中该类型的差异数据的比率；在所述比率小于比率阈值时，记录所述差异数据，以供基于记录的所述差异数据进行页面预警。

于所述第一方面的一实施例中，所述差异数据的类型包括接口请求差异和接口返回内容差异；所述接口返回内容差异包括缺乏的字段差异，新增的字段差异以及字段值差异。

于所述第一方面的一实施例中，所述基于所述差异数据进行页面预警包括：通过一差异点列表记录所述差异数据；循环检测所述差异点列表，并在所述差异点列表中存在差异数据时，将所述当前页面对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

于所述第一方面的一实施例中，还包括：在客户端进入页面后，向服务器请求并获取配置信息；生成请求页面数据的数据请求；其中，所述数据请求中包括请求号和请求的设备号；将所述数据请求发送至服务端，并从所述服务端接收并记录页面的请求数据。

于所述第一方面的一实施例中，，所述配置信息包括报警规则，所述页面监控方法还包括：基于所述报警规则判断当前页面的接口是否满足报警条件；在所述当前页面的接口满足报警条件时，将所述当前页面接口对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

于所述第一方面的一实施例中，所述配置信息包括页面配置信息，所述页面配置信息包括页面空白度阈值和空白颜色值；所述获取当前页面对应的请求数据包括：基于所述空白颜色值获取当前页面截图的空白度；获取多个历史页面截图的空白度，并基于多个历史页面截图的空白度获取历史页面截图的空白度均值；获取所述当前页面截图的空白度与所述历史页面截图的空白度均值之间的空白度差值；判断所述空白度差值是否达到所述页面空白度阈值，并在所述空白度差值达到所述页面空白度阈值时获取当前页面对应的请求数据。

本发明的第二方面提供一种页面监控装置，应用于客户端，包括：页面截图模块，用于在页面渲染完成后，对当前页面截图；数据获取模块，用于获取当前页面对应的请求数据；数据分析模块，用于获取多个历史页面截图和各所述历史页面截图对应的历史请求数据，获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据，并基于所述差异数据进行页面预警。

本发明的第三方面提供一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面监控方法的步骤。

本发明的第四方面提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面监控方法的步骤。

如上所述，本发明所述的页面监控方法、装置、电子设备及存储介质，具有以下有益效果：

与现有技术相比，本发明通过对当前页面截图，获取当前页面对应的请求数据与各历史页面截图对应的历史请求数据的差异数据，然后基于差异数据进行页面预警，不仅可以检测出页面异常，解决页面的业务数据出错时的报警准确度低的问题，还可以根据将页面的异常点数据提取出来，方便后续修复页面的异常问题。

附图说明

图1显示为本发明的页面监控方法于一实施例中的流程图。

图2显示为本发明的页面监控方于一实施例中客户端向服务端获取请求数据的的流程图。

图3显示为本发明的页面监控方法于一实施例中获取请求数据的具体过程流程图。

图4显示为本发明的页面监控方法于一实施例中进行页面预警的流程图。

图5显示为本发明的页面监控装置于一实施例中的结构示意图。

图6显示为本发明中客户端与服务器的交互示意图。

图7至10显示为本发明的页面监控方法实施过程中客户端与服务器的交互流程图。

图11显示为本发明的电子设备于一实施例中的结构示意图。

标号说明

1 电子设备

11 处理单元

12 存储器

121 随机存取存储器

122 高速缓存存储器

123 存储系统

124 程序/实用工具

1241 程序模块

13 总线

14 输入/输出接口

15 网络适配器

2 外部设备

3 显示器

100 页面监控装置

110 页面截图模块

120 数据获取模块

130 数据分析模块

210 服务模块

220 配置中心

230 报警模块

S100～S400 步骤

S11～S13 步骤

S111～S114 步骤

S310～S330 步骤

具体实施方式

以下通过特定的具体实施例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图示中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

本发明的页面监控方法、装置、电子设备及存储介质，在客户端运行期间，通过对当前页面截图，获取当前页面对应的请求数据与各历史页面截图对应的历史请求数据的差异数据，然后基于差异数据进行页面预警，不仅可以检测出页面异常，解决页面的业务数据出错时的报警准确度低的问题，还可以根据将页面的异常点数据提取出来，方便后续修复页面的异常问题。

如图1所示，本发明的页面监控方法包括以下步骤：

步骤S100、在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据；

步骤S200、获取多个历史页面截图和各所述历史页面截图对应的历史请求数据；

步骤S300、获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据；

步骤S400、基于所述差异数据进行页面预警。

以下对本实施例页面监控方法中的上述步骤S100至步骤S400进行具体说明。

步骤S100、在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据。

即页面渲染完成后，执行本实施例的页面监控方法的步骤S100，在页面渲染之前，本实施例中还包括客户端从服务端获取请求数据，请求数据获取之后，客户端开始渲染页面。如图2所示，客户端从服务端获取请求数据的过程包括：

步骤S11，在客户端启动进入页面后，向服务器请求并获取配置信息。

具体地，在客户端启动进入页面后，客户端对服务端的监控服务发起请求，获取配置信息，服务端的监控服务接收请求，返回配置信息。

其中，于本实施例中，所述配置信息包括页面配置信息和报警规则。

具体地，于本实施例中，所述页面配置信息包括但不限于页面空白度阈值和空白颜色值；所述报警规则包括但不限于接口对应的错误返回码，接口缺乏字段信息以及接口多余字段信息。

步骤S12，生成请求页面数据的数据请求，其中，所述数据请求中包括请求号和请求的设备号。

客户端在从服务端获取到配置信息后，客户端生成数据请求。也就是说，客户端向服务端请求页面对应的数据，发起数据请求前，给每个数据请求生成一个唯一的请求号(例如按照请求顺序自增)以及设备号(标记当前设备)。

步骤S13，将所述数据请求发送至服务端，并从所述服务端接收并记录页面的请求数据。

客户端向服务端发起数据请求获取数据，每个数据请求的参数带上请求号以及请求的设备号。服务端的数据服务接收到客户端的请求，开始组装数据，在返回数据前，记录下客户端的请求信息，包含请求号、设备号以及返回的数据内容。客户端记录请求序号对应的时间、序号、设备号、以及返回内容，然后客户端检查当前的请求都处理完，若未处理完，循环执行3)中的具体步骤，直至从所述服务端接收并获取完数据，此时客户端记录页面的请求数据。

客户端在动服务端获取请求数据之后，客户端开始渲染页面。

在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据。

具体地，于本实施例中，对当前页面截图之后，获取当前页面对应的请求数据之前，还包括：

基于所述报警规则判断当前页面的接口是否满足报警条件，在所述当前页面的接口满足报警条件时，将所述当前页面接口对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

具体地，本实施例中，所述报警规则即前述从服务端获取的配置信息中的报警规则，包括但不限于接口对应的错误返回码，接口缺乏字段信息以及接口多余字段信息。

客户端对当前页面全部接口与配置信息中返回的报警规则进行对比，确认是否返回了错误的返回码、缺乏了特定字段以及是否多余了特定字段。

具体地，判断当前页面的接口是否满足报警条件：

1)请求对应的返回码是否符合配置中心配置的异常返回码；

2)请求对应的返回内容是否缺乏了配置中心配置的特定的字段；

3)对应的请求返回内容是否多了配置中心配置的特定的字段。

若符合报警条件，客户端则将有问题的请求以及相关数据发送给服务端进行报警，含请求号、设备号、返回值，错误规则。所以本实施例中的页面监控方法不仅可以对比判断出当前页面的接口的差异，还可以将有问题的请求以及相关数据发送给服务端，以便服务端进行报警或做其它数据分析。

客户端则将有问题的请求以及相关数据发送给服务端进行报警，服务端的监控服务接收到请求，对客户端传递过来的数据进行校验，校验条件为是否为服务端返回的数据，若是推送报警信息。

其中，推送报警信息的过程例如为：按照请求设备号进行分组，再按请求号从小到大进行排序，生成一个供客户端调用以获取报警信息的调用链路，将所述调用链路推送至客户端。

接收到报警信息的用户，例如通过查询上一步请求链路以及错误请求信息，定位故障问题故障点，方便后续修复页面的异常问题。

具体地，于本实施例中，所述页面配置信息包括页面空白度阈值和空白颜色值。例如客户端根据从配置中心获取空白度阈值和空白颜色值，其中，默认纯白颜色为空白，即FFFFFF。

如图3所示，对当前页面截图之后，所述获取当前页面对应的请求数据包括：

步骤S111，基于所述空白颜色值获取当前页面截图的空白度；

步骤S112，获取多个历史页面截图的空白度，并基于多个历史页面截图的空白度获取历史页面截图的空白度均值；

步骤S113，获取所述当前页面截图的空白度与所述历史页面截图的空白度均值之间的空白度差值；

步骤S114，判断所述空白度差值是否达到所述页面空白度阈值，并在所述空白度差值达到所述页面空白度阈值时获取当前页面对应的请求数据。

于本发明的一实施例中，所述页面配置信息还可以包括：页面像素信息、页面结构信息和/或页面元素语义信息。对当前页面截图之后，所述获取当前页面对应的请求数据还可以包括：获取页面的像素比对信息、页面元素语义比对信息、页面布局比对信息、自定义比对信息中的任一种，这里不作具体的限定。

进一步，本发明可以通过统计当前页面和参考页面中每一个相同位置上像素差异，来确定当前页面与参考页面的差异。当前页面对应的请求数据可以包括获得的像素差异数据。

本发明可以通过比较当前页面的页面元素语义信息和参考页面的页面元素语义信息，来确定当前页面与参考页面的差异。当前页面对应的请求数据可以包括获得的页面元素语义差异数据。

本发明可以通过比较当前页面的页面结构信息和参考页面的页面结构信息，确定当前页面与参考页面的差异。当前页面对应的请求数据可以包括获得的页面结构信息差异数据。

具体地，页面结构信息包括页面中的页面元素的样式、位置或类型中的至少一个；通过比较当前页面的页面结构信息和参考页面的页面结构信息，确定差异检测结果的具体实施方式有多种，包括但不限于以下三种：

第一种：统计当前页面中页面元素与参考页面中至少一个样式、类型均相同的当前页面的页面元素与参考页面的页面元素的位置差异程度。

第二种：统计当前页面与参考页面中至少一个位置、类型均相同的当前页面的页面元素与参考页面的页面元素的样式差异程度。

第三种：统计当前页面与参考页面中至少一个位置、样式均相同的当前页面的页面元素与参考页面的页面元素的类型差异程度。

应理解，页面元素可以是当前页面中的任一页面元素，参考页面元素为该任一页面元素在参考页面中对应的页面元素。第一种方式和第二种方式中的当前页面元素和参考页面元素的位置相同可以是完全相同也可以是部分相同(例如，80％的位置相同)，本申请实施例不作具体的限定。

需要说明的是，所述页面可以是待测软件产品(例如网页、应用程序(application，App)等)在不同环境下的图形用户界面(graphical user interface，GUI)截图，即待检测页面可以是一个或多个GUI截图，本申请实施例不作具体的限定。其中，环境可以理解为操作系统、硬件设备、或网页浏览器以及对应网页浏览器的版本中的一种或多种所组合的环境。标准页面为待测软件产品的标准GUI截图，具体可以是预先设计的GUI截图，也可以是在用户指定环境(例如，视窗操作(windows)系统的谷歌浏览器)下该待测软件产品所显示的GUI截图。

具体地，于本实施例中，所述获取当前页面对应的请求数据的过程为：

客户端读取当前页面截图全部的像素点，并计算当前页面截图的空白度(即空白颜色的像素点占全部像素点的比值)，同时记录当前页面截图的空白度。然后客户端读取历史以往的截图信息以及截图对应的请求信息，若不存在历史数据，则本次流程结束。客户端读取历史多次截图(多个历史页面截图的数量可配置，例如30次)的空白度，并计算历史多次截图的空白度的均值。判断当前页面截图的空白度与历史多次截图的空白度的均值之间的差值是否超过了页面空白度阈值，若没有超过页面空白度阈值值，则本次流程结束，若超过了页面空白度阈值，确认当前页面截图存在差异，继续执行后续步骤，获取当前界面的差异值。

步骤S200、获取多个历史页面截图和各所述历史页面截图对应的历史请求数据。

其中，多个历史页面截图的数量可配置。

步骤S300、获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据。

客户端拉取出本次页面截图所对应的请求数据，对比上一次或前几次(多个历史页面截图)接入对应的请求数据的差异。

于本实施例中，如图4所示，于在获取所述差异数据之后还包括：

步骤S310，确认所述差异数据的类型；

于本实施例中，所述差异数据的类型包括接口请求差异和接口返回内容差异；所述接口返回内容差异包括缺乏的字段差异，新增的字段差异以及字段值差异。

即本实施例中，所述差异数据包含：

1、请求的接口差异(即多了哪些接口请求和减少了哪些接口请求)；

2、接口返回的内容差异，通过接口返回的内容分析：a)缺乏的字段；b)新增的字段；c)值不同的字段。

步骤S320，获取各所述历史页面截图对应的接口请求，并获取各所述接口请求中该类型的差异数据的比率；

步骤S330，在所述比率小于比率阈值时，记录所述差异数据，以供基于记录的所述差异数据进行页面预警。

步骤S400、基于所述差异数据进行页面预警。

于本实施例中，所述基于所述差异数据进行页面预警包括：

1)通过一差异点列表记录所述差异数据；

2)循环检测所述差异点列表，并在所述差异点列表中存在差异数据时，将所述当前页面对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

具体地，于本实施例中，客户端拉取以往的历史页面截图的全部数据，创建一个新的差异点列表，记为列表Y：

1)若差异数据为缺乏字段，在到历史截图涉及的全部请求中，找到对应的接口请求，分析其中是否相同缺乏字段的比率，也就是同样缺乏字段的请求，占该接口总的请求的个数的比率，若达到一定的阈值(可配置，例如设置定位90％)，则忽略该差异数据，若未达到，则记录到列表Y中；

2)若差异数据为多余字段，在到历史截图涉及的全部请求中，找到对应的接口请求，分析其中是否相同多余了字段的比率，也就是同样缺乏字段的请求，占该接口总的请求的个数的比率，若达到一定的阈值(可配置，例如设置定位90％)，则忽略该差异数据，若未达到，则记录到Y列表中；

3)若差异数据为字段值不同，在到历史截图涉及的全部请求中，找到对应的接口请求，分析每个请求对应该字段的值在全部请求中相同的比率，如最大的比率的值未超过阈值(可配置，例如设置定位10％)，则忽略该字段，若超过则记录到列表Y中。

客户端判断Y列表是否为空：

1)若不为空，客户端则将有问题的请求以及相关数据发送给服务端进行报警，含请求号、设备号、返回值，错误规则；

2)服务端的监控服务接收到请求，对传递过来的信息进行校验，校验条件为是否为服务端返回的数据，若是推送报警信息。

其中，推送报警信息的过程例如为：按照请求设备号进行分组，再按请求号从小到大进行排序，生成一个供客户端调用以获取报警信息的调用链路，将所述调用链路推送至客户端。

3)接收到报警信息的用户，例如通过查询上一步请求链路以及错误请求信息，定位故障问题故障点，方便后续修复页面的异常问题。

所以本实施例的页面监控方法通过对当前页面截图，获取当前页面对应的请求数据与各历史页面截图对应的历史请求数据的差异数据，然后基于差异数据进行页面预警，不仅可以检测出页面异常，解决页面的业务数据出错时的报警准确度低的问题，还可以根据将页面的异常点数据提取出来，方便后续修复页面的异常问题。

如图5所示，本实施例还提供一种页面监控装置100，应用于客户端，包括：页面截图模块110，数据获取模块120以及数据分析模块130。

于本实施例中，所述页面截图模块110用于在页面渲染完成后，对当前页面截图。所述页面截图模块110的功能是在客户端页面熏染完毕之后，对当前页面进行截图，并记录截图时间。

于本实施例中，所述数据获取模块120用于获取当前页面对应的请求数据。所述数据模块拦截客户端数据请求(请求带上客户端的设备号以及请求序号)，并记录请求发起时间，数据返回时间，返回的数据，以及数据返回后页面开始渲染的时间。

于本实施例中，所述数据分析模块130用于获取多个历史页面截图和各所述历史页面截图对应的历史请求数据，获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据，并基于所述差异数据进行页面预警。

于本实施例中，如图6所示，服务端包括部署在数据服务上的服务模块210，部署在监控服务上的配置中心220和报警模块230。

其中，所述服务模块210为客户端提供服务信息，且记录给客户端返回的数据的时间与内容，含客户端的设备号和请求序号。所述配置模块存储一部分分析阈值以及报警规则等内容，例如截图时，页面空白程度阈值存储，分析模块使用到的报警规则缺少某些字段，或者结构不一致等信息。客户端发送报警信息给到服务端，信息包含设备号、请求序号、返回内容以及报警内容等参数，报警模块230找到服务端返回的信息内容，进行确认，确认后推送报警信息给用户，例如APP的推送消息、短信、电话等。

图7至10显示为本发明的页面监控方法实施过程中客户端与服务器的交互流程图。

如图7所示，1)客户端启动，进入页面；

2)客户端分析模块对服务端的监控服务发起请求，获取配置信息。

3)服务端的监控服务里边的配置模块接收请求，返回配置信息。其中，于本实施例中，所述配置信息包括页面配置信息和报警规则。具体地，于本实施例中，所述页面配置信息包括页面空白度阈值和空白颜色值；所述报警规则包括接口对应的错误返回码，接口缺乏字段信息以及接口多余字段信息。

4)客户端的数据模块请求页面对应的数据，发起数据请求前，给每个数据请求生成一个唯一的请求号(按照请求顺序自增)以及设备号(标记当前设备)。

5)客户端的数据模块发起请求获取数据，每个请求的参数带上请求号以及设备号。

6)服务端的数据服务接收到客户端的请求，开始组装数据，在返回数据前，记录下客户端的请求信息，包含请求号、设备号以及返回的数据内容。

7)客户端的数据模块记录请求序号对应的时间、序号、设备号、以及返回内容。

8)客户端的数据模块检查当前的请求都处理完，若未处理完，循环5)-7)步骤，直至获取完数据，并记录完毕

9客户端开始渲染页面。

如图8所示，10)客户端渲染完毕，调用页面截图模块110对当前页面进行截图，并记录页面名称，记录数据请求与页面的关系。

11)客户端调用分析模块，对当前页面全部接口对配置信息中返回的报警规则进行对比，含是否返回了错误的返回码、缺乏了特定字段以及是否多余了特定字段：

具体地，判断当前页面的接口是否满足报警条件：

1)请求对应的返回码是否符合配置中心220配置的异常返回码；

2)请求对应的返回内容是否缺乏了配置中心220配置的特定的字段；

3)对应的请求返回内容是否多了配置中心220配置的特定的字段。

若符合条件，客户端的分析模块则将有问题的请求以及相关数据发送给后端进行报警，含请求号、设备号、返回值，错误规则；服务端的监控服务接收到请求，对传递过来的信息进行校验，校验条件为是否为后端返回的数据，若是推送报警信息。

其中，推送报警信息的过程例如为：按照请求设备号进行分组，再按请求号从小到大进行排序，生成一个供客户端调用以获取报警信息的调用链路，将所述调用链路推送至客户端。

接收到报警信息的用户，例如通过查询上一步请求链路以及错误请求信息，定位故障问题故障点，方便后续修复页面的异常问题。

12)若满足报警条件，客户端分析模块根据从配置中心220获取到的空白度阈值和空白颜色值(默认纯白颜色为空白，即FFFFFF)。

如图9所示，13)客户端分析模块读取截图页面全部的像素点，并计算空白度(即空白颜色的像素点占全部像素点的比值)，记录当前截图的空白度。

14)客户端分析模块读取历史以往的截图信息以及截图对应的请求信息：若不存在历史数据，则本次流程结束。

15)客户端分析模块读取以往历史近30次(阈值可配置，不够则使用全部)截图的空白度，并计算以往空白度的均值，判断本次截图与均值之间的差值是否超过了阈值：若没有超过阈值，则本次流程结束。

16)客户端分析模块拉取出本次截图所对应的请求信息，对比上一次接入对应的请求数据差异，包含：1、请求的接口差异(即多了哪些接口请求和减少了哪些接口请求)；2、接口返回的内容差异，通过内容差异来分析：a)缺乏的字段；b)新增的字段；c)值不同的字段。

如图10所示，17)客户端分析模块拉取以往的截图的全部数据，创建一个新的列表Y，循环上一步的接口返回值差异点：

a)若差异点为缺乏字段，在到历史截图涉及的全部请求中，找到对应的接口请求，分析其中是否相同缺乏字段的比率，也就是同样缺乏字段的请求，占该接口总的请求的个数的比率，若达到一定的阈值(可配置，本方法设置定位90％)，则忽略该差异点，若未达到，则记录到列表Y中；

b)若差异点为多余了字段，在到历史截图涉及的全部请求中，找到对应的接口请求，分析其中是否相同多余了字段的比率，也就是同样缺乏字段的请求，占该接口总的请求的个数的比率，若达到一定的阈值(可配置，本方法设置定位90％)，则忽略该差异点，若未达到，则记录到Y列表中；

c)若差异点为字段值不同，在到历史截图涉及的全部请求中，找到对应的接口请求，分析每个请求对应该字段的值在全部请求中相同的比率，如最大的比率的值未超过阈值(可配置，本方法设置定位10％)，则忽略该字段，若超过则记录到一个新的差异点列表中，记录到列表Y中。

18)客户端判断Y列表是否为空：

1)若不为空，客户端则将有问题的请求以及相关数据发送给服务端进行报警，含请求号、设备号、返回值，错误规则；

2)服务端的监控服务接收到请求，对传递过来的信息进行校验，校验条件为是否为服务端返回的数据，若是推送报警信息。

其中，推送报警信息的过程例如为：按照请求设备号进行分组，再按请求号从小到大进行排序，生成一个供客户端调用以获取报警信息的调用链路，将所述调用链路推送至客户端。

3)接收到报警信息的用户，例如通过查询上一步请求链路以及错误请求信息，定位故障问题故障点，方便后续修复页面的异常问题。

需要说明的是，页面截图模块110，数据获取模块120以及数据分析模块130的功能原理与上述页面监控方法中的步骤一一对应，故在此不再赘述。

需要说明的是，应理解以上装置的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，x模块可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上x模块的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。

例如，以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个数字信号处理器(Digital Signal Processor，简称DSP)，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(Central Processing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(System-On-a-Chip，简称SOC)的形式实现。

需要说明的是，本发明的页面监控装置100可以实现本发明的页面监控方法，但本发明的页面监控方法的实现装置包括但不限于本实施例列举的页面监控装置100的结构，凡是根据本发明的原理所做的现有技术的结构变形和替换，都包括在本发明的保护范围内。

本发明的计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现下述的页面监控方法。所述存储介质包括：只读存储器(Read-Only Memory，ROM)、随机访问存储器(Random Access Memory，RAM)、磁碟、U盘、存储卡或者光盘等各种可以存储程序代码的介质。

可以采用一个或多个存储介质的任意组合。存储介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机盘、硬盘、RAM、ROM、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

下面将参照根据本发明实施例的方法、装置(系统)和计算机程序产品的流程图和/或框图描述本发明。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机程序指令实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些计算机程序指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。

也可以把这些计算机程序指令存储在计算机可读介质中，这些指令使得计算机、其它可编程数据处理装置、或其他设备以特定方式工作，从而，存储在计算机可读介质中的指令就产生出包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的指令的制造品(article of manufacture)。

也可以把计算机程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机或其它可编程装置上执行的指令提供实现流程图和/或框图中的一个或多个方框中规定的功能/动作的过程。

本发明的电子设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序。

优选地，所述存储器包括：ROM、RAM、磁碟、U盘、存储卡或者光盘等各种可以存储程序代码的介质。

所述处理器与所述存储器相连，用于执行所述存储器存储的计算机程序，以使所述电子设备执行上述页面监控方法的步骤。

优选地，所述处理器可以是通用处理器，包括中央处理器(Central ProcessingUnit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

图11示出了适于用来实现本发明实施方式的示例性电子设备1的框图。

图11显示的电子设备1仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图11所示，电子设备1以通用计算设备的形式表现。电子设备1的组件可以包括但不限于：一个或者多个处理器或者处理单元11，存储器12，连接不同系统组件(包括存储器12和处理单元11)的总线13。

总线13表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，简称ISA)总线，微通道体系结构(Micro Channel Architecture，简称MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，简称VESA)局域总线以及外围组件互连(Peripheral Component Interconnect，简称PCI)总线。

电子设备1典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备1访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器12可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)121和/或高速缓存存储器122。电子设备1可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统123可以用于读写不可移动的、非易失性磁介质(图1未显示，通常称为“硬盘驱动器”)。尽管图1中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线13相连。存储器12可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块1241的程序/实用工具124，可以存储在例如存储器12中，这样的程序模块1241包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块1241通常执行本发明所描述的实施例中的功能和/或方法。

电子设备1也可以与一个或多个外部设备2(例如键盘、指向设备、显示器3等)通信，还可与一个或者多个使得用户能与该电子设备1交互的设备通信，和/或与使得该电子设备1能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口14进行。并且，电子设备1还可以通过网络适配器15与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图1所示，网络适配器15通过总线13与电子设备1的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

综上所述，本发明通过对当前页面截图，获取当前页面对应的请求数据与各历史页面截图对应的历史请求数据的差异数据，然后基于差异数据进行页面预警，不仅可以检测出页面异常，解决页面的业务数据出错时的报警准确度低的问题，还可以根据将页面的异常点数据提取出来，方便后续修复页面的异常问题。所以，本发明有效克服了现有技术中的种种缺点而具高度产业利用价值。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。

Claims (10)

1.一种页面监控方法，应用于客户端，其特征在于，包括以下步骤：

在页面渲染完成后，对当前页面截图，并获取当前页面对应的请求数据；

获取多个历史页面截图和各所述历史页面截图对应的历史请求数据；

获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据；

基于所述差异数据进行页面预警。

2.根据权利要求1所述的页面监控方法，其特征在于，在获取所述差异数据之后还包括：

确认所述差异数据的类型；

获取各所述历史页面截图对应的接口请求，并获取各所述接口请求中该类型的差异数据的比率；

在所述比率小于比率阈值时，记录所述差异数据，以供基于记录的所述差异数据进行页面预警。

3.根据权利要求2所述的页面监控方法，其特征在于，所述差异数据的类型包括接口请求差异和接口返回内容差异；所述接口返回内容差异包括缺乏的字段差异，新增的字段差异以及字段值差异。

4.根据权利要求2或3所述的页面监控方法，其特征在于，所述基于所述差异数据进行页面预警包括：

通过一差异点列表记录所述差异数据；

循环检测所述差异点列表，并在所述差异点列表中存在差异数据时，将所述当前页面对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

5.根据权利要求1所述的页面监控方法，其特征在于，还包括：

在客户端进入页面后，向服务器请求并获取配置信息；

生成请求页面数据的数据请求；其中，所述数据请求中包括请求号和请求的设备号；

将所述数据请求发送至服务端，并从所述服务端接收并记录页面的请求数据。

6.根据权利要求5所述的页面监控方法，其特征在于，所述配置信息包括报警规则，所述页面监控方法还包括：

基于所述报警规则判断当前页面的接口是否满足报警条件；

在所述当前页面的接口满足报警条件时，将所述当前页面接口对应的请求数据发送至服务端，由所述服务端对页面进行预警推送；其中，所述请求数据包括请求号、请求的设备号、返回值以及错误规则。

7.根据权利要求5所述的页面监控方法，其特征在于，所述配置信息包括页面配置信息，所述页面配置信息包括页面空白度阈值和空白颜色值；所述获取当前页面对应的请求数据包括：

基于所述空白颜色值获取当前页面截图的空白度；

获取多个历史页面截图的空白度，并基于多个历史页面截图的空白度获取历史页面截图的空白度均值；

获取所述当前页面截图的空白度与所述历史页面截图的空白度均值之间的空白度差值；

判断所述空白度差值是否达到所述页面空白度阈值，并在所述空白度差值达到所述页面空白度阈值时获取当前页面对应的请求数据。

8.一种页面监控装置，应用于客户端，其特征在于，包括：

页面截图模块，用于在页面渲染完成后，对当前页面截图；

数据获取模块，用于获取当前页面对应的请求数据；

数据分析模块，用于获取多个历史页面截图和各所述历史页面截图对应的历史请求数据，获取所述当前页面对应的请求数据与各所述历史页面截图对应的历史请求数据的差异数据，并基于所述差异数据进行页面预警。

9.一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的页面监控方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的页面监控方法的步骤。