CN113868005A - 网页异常的监控方法和装置 - Google Patents

Abstract

本申请提出了一种网页异常的监控方法和装置，其中方法包括：网页渲染完成后，获取所述网页中的DOM元素；为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元素执行的操作；采集在所述网页出现异常前的预设时间内的所述事件监听所监听到的操作信息；将所述操作信息与所述网页出现异常时的异常发生位置打包发送给服务端，以使所述服务端根据所述异常发生位置对所述网页出现的异常进行定位并配合所述操作信息重现网页出现异常前所述用户对所述DOM元素执行的操作。能够提供异常位置信息以及异常发生前用户的操作步骤给网页维护者，使其能够更直观和快速准确地推断问题来源，无需重复尝试各种异常发生的可能性，具有提高网页维护实时性和准确性的有益效果。

Description

网页异常的监控方法和装置

技术领域

本申请涉及计算机技术领域，特别是涉及一种网页异常的监控方法和装置。

背景技术

浏览器是一种显示网络信息资源和网页应用、并且可以与用户进行交互的 一种软件。在网页应用开发中HTML(HyperText Markup Language，超文本标记 语言)以及JavaScript语言是其中主要应用的技术。浏览器可以通过从服务器 获取HTML文档并进行解析渲染，并通过JavaScript与用户进行交互。

在频繁的交互以及大量的数据获取过程中，往往会出现网页异常导致用户 无法加载完整的网页。此时就需要采集网页异常信息并发送给网页维护者进行 维护。现有技术中通过对网页的异常位置进行监控，例如在对网页监控时监测 到网页中的脚本发生异常时记录下异常位置信息。在网页应用日渐庞杂的背景 下，用户与应用的交互也变得复杂，只是记录异常位置往往不能给网页维护者 提供直观而准确的信息，网页维护者需要进行必要的场景重现，而如果因网页 维护者的操作流程与用户的不一致或者两者的运行环境不同而导致异常无法重 现时，就会影响到问题解决的效率。

综上，针对现有的网页异常监控方法仅能记录脚本发生异常时的异常位置 信息，从而导致网页维护者无法快速定位到网页存在的问题造成的网页维护实 时性和准确性较低的问题，目前尚未得到有效解决方式。

发明内容

本申请实施例提供了一种网页异常的监控方法和装置，针对现有的网页异 常监控方法仅能记录脚本发生异常时的异常位置信息，从而导致网页维护者无 法快速定位到网页存在的问题造成的网页维护实时性和准确性较低的问题，能 够提供异常位置信息以及异常发生前用户的操作步骤给网页维护者，使其能够 更直观和快速准确地推断问题来源，无需重复尝试各种异常发生的可能性，具 有提高网页维护实时性和准确性的有益效果。

第一方面，本申请实施例提供了一种网页异常的监控方法，所述方法包括： 网页渲染完成后，获取所述网页中的DOM元素；为每一所述DOM元素绑定对应 的事件监听以监听用户对所述DOM元素执行的操作；采集在所述网页出现异常 前预设时间内所述事件监听所监听到的操作信息；将所述操作信息与所述网页 出现异常时的异常发生位置发送给服务端，以使所述服务端对所述网页出现的 异常进行定位并配合所述操作信息重现网页出现异常前预设时间内所述用户对 所述DOM元素执行的操作。

在其中一些实施例中，所述DOM元素包括与所述用户进行交互的DOM事件， 其中所述DOM事件按类型包括鼠标事件、键盘事件、窗口事件、表单事件的至 少一种；“所述获取网页中的DOM元素”包括：遍历所述DOM元素中与所述用 户进行交互的所述DOM事件。

在其中一些实施例中，“为每一所述DOM元素绑定对应的事件监听以监听 用户对所述DOM元素执行的操作”包括：根据所述DOM事件的类型分别为每一 类型的所述DOM事件绑定至少一所述监听事件，针对所述用户对所述DOM元素 执行的一类执行操作进行监听。

在其中一些实施例中，所述操作信息包括用户操作流程；采集所述操作信 息包括：获取所述预设时间内所述事件监听所监听到的所述用户对所述DOM元 素执行的每一所述操作步骤以及对应的时间点，通过所述时间点对所述预设时 间内的所有所述操作步骤进行排序，得到所述用户操作流程。

在其中一些实施例中，所述操作步骤根据对采集到的每一所述时间点对应 的所述DOM事件、元素名称、事件标签进行解析得到。

在其中一些实施例中，所述操作信息还包括根据所述用户操作流程生成的 可视化流程图。

在其中一些实施例中，所述异常发生位置包括当前页面网址信息、异常报 错信息、程序调用栈信息。

在其中一些实施例中，所述操作信息被存放于在浏览器中创建的本地存储 空间里，当所述网页被关闭时所述本地存储空间中的所述操作信息自动清除。

第二方面，本申请实施例提供了一种网页异常的监控装置，包括：获取模 块，用于网页渲染完成后，获取所述网页中的DOM元素；处理模块，用于为每 一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元素执行的操作； 监听模块，用于采集在所述网页出现异常前预设时间内所述事件监听所监听到 的操作信息；发送模块，用于将所述操作信息与所述网页出现异常时的异常发 生位置发送给服务端，以使所述服务端对所述网页出现的异常进行定位并配合

第三方面，本申请实施例提供了一种电子装置，包括存储器和处理器，所 述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执 行第一方面任一项所述的网页异常的监控方法。

第四方面，本申请实施例提供了一种计算机程序产品，包括软件代码部分， 当所述计算机程序产品在计算机上被运行时，所述代码软件部分用于执行根据 第一方面任一项所述的网页异常的监控方法。

第五方面，本申请实施例提供了一种可读存储介质，所述可读存储介质中 存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码， 所述过程包括根据第一方面任一项所述的网页异常的监控方法。

本申请实施例的主要贡献和创新点如下：

本申请实施例通过对能够与用户产生交互的DOM元素进行监控，在用户与 网页进行交互时，触发监听事件收集信息并存储与会话存储中，当网页出现异 常，采集出现异常时的异常发生未知以及出现时间点前一段时间内的用户操作 信息，将二者打包发送给服务器，以便于更直观地获取异常有关信息。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请 的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分， 本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限 定。在附图中：

图1是根据本申请实施例的网页异常的监控方法的流程图；

图2是根据本申请实施例的对网络资源网络的API管理系统的架构图；

图3是根据本申请实施例的网页异常监控装置的客户端装置示意图；

图4是根据本申请实施例的网页异常监控装置的服务端装置示意图；

图5是根据本申请实施例的网页异常监控方法的监控流程图；

图6是根据本申请实施例的异常监控步骤图效果示例图；

图7是根据本申请实施例的网页异常的监控装置的结构框图；

图8是根据本申请实施例的电子装置的硬件结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描 述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。 以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例 相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本 说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序 来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本 说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实 施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在 其他实施例中也可能被合并为单个步骤进行描述。

实施例一

本申请实施例提供了一种网页异常的监控方法，参考图1，所述方法包括：

步骤S101、网页渲染完成后，获取所述网页中的DOM元素。

本方案目的在于对渲染完成后的网页在用户的频繁交互以及大量数据获取 时发生的网页异常发送给网页维护者，使其能够快速定位异常问题所在，从而 尽快解决问题，因此本步骤中是在网页渲染完成之后，即DOM元素以及修饰DOM 元素样式的CSS都已加载完毕之后对网页异常的检测。

在本步骤中，DOM元素是指对象标识，例如表单、按钮等，可以通过调用查 询DOM元素的方法获取到网页中的DOM元素，例如，调用查询表单的方法获取 到所有表单元素、调用查询按钮的方法获取到所有按钮元素或者调用查询DOM 所有元素。

步骤S102、为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM 元素执行的操作。

在本步骤中，对获取的DOM元素添加一个或多个事件监听，从而收集用户 对DOM元素的操作信息。具体地，通过调用输入事件监听方法为DOM元素添加 输入事件监听，当用户与网页发生“用户输入”的交互动作时，事件监听可以 监听到用户对DOM元素执行的“用户输入”这一行为。

步骤S103、采集在所述网页出现异常前预设时间内所述事件监听所监听到 的操作信息。

在本步骤中，为DOM元素添加事件监听后，事件监听持续对DOM元素进行 监听，例如第一时刻执行了点击按钮操作，第二时刻执行了表单输入操作，第 三时刻执行了缩放网页操作，第四时刻执行了按下键盘按键操作，本步骤只在 网页出现异常时才获取前一段预设时间内产生的操作信息，例如预设时间为两 分钟，那么当网页出现异常，自动采集异常时间点的前两分钟内用户对DOM元 素执行的操作信息，例如操作信息为：第三时刻执行了缩放网页操作，第四时 刻执行了按下键盘按键操作。通过这种只采集异常时间点前的操作信息的方式 在发送数据给服务器的时候数据量更小，后续网页维护者对接收到的信息进行 分析时也就更为方便。此外，在本实施例中还给出了另一种采集操作信息的方 式，即通过采集网页出现异常前的预设数量的步骤以及每一步骤对应的时间点 组合成操作信息，例如，当网页出现异常，自动采集异常时间点的前五步用户 对DOM元素执行的操作信息以及每一步操作信息对应的时间点。通过这种方式 同样也能达到发送给服务器的数据量更小的效果。

步骤S104、将所述操作信息与所述网页出现异常时的异常发生位置发送给 服务端，以使所述服务端对所述网页出现的异常进行定位并配合所述操作信息 重现网页出现异常前预设时间内所述用户对所述DOM元素执行的操作。

在本步骤中，获取网页异常时间点的异常发生位置，用以告诉服务端出现 网页异常的具体位置信息，并且将网页异常时间点前的用户与浏览器发生的交 互信息也打包发送给服务端，服务端根据该交互信息进行处理能够得到异常发 生前用户的操作步骤。

本实施例带来的技术优势在于，网页维护者获取服务端中的操作信息即可 知道异常发生前的场景，并且这种场景复现对于网页维护者来说是更为直观的 用户操作流程。网页维护者不会因为无法得知和网页使用者在网页异常前进行 的操作流程而造成异常无法重现以及无法排查出问题来源。对于网页维护来说， 更直观地清楚问题发生前的交互信息能够帮助更快速推断出问题来源，避免重 复性地尝试异常发生的可能性，因此大大节约了排查问题的时间，也让问题的 解决变得有针对性以及准确性，因此网页维护效率也大大提高。

在其中一些实施例中，所述DOM元素包括与所述用户进行交互的DOM事件， 其中所述DOM事件按类型包括鼠标事件、键盘事件、窗口事件、表单事件的至 少一种；“所述获取网页中的DOM元素”包括：遍历所述DOM元素中与所述用 户进行交互的所述DOM事件。

本实施例的区别之处在于，只根据页面需求有针对性地选择一些与用户产 生交互的DOM元素进行监听，例如在本实施例中，不去采集用户对标题、文字 段落、表格等在网页中作用为用于查看的DOM元素，只根据页面需求选择一些 与与用户进行交互的DOM事件。通过有选择地监听DOM元素中的某些可交互DOM 事件的方式能够减少线程运行时消耗的CPU/GPU资源。

在其中一些实施例中，“为每一所述DOM元素绑定对应的事件监听以监听 用户对所述DOM元素执行的操作”包括：根据所述DOM事件的类型分别为每一 类型的所述DOM事件绑定至少一所述监听事件，针对所述用户对所述DOM元素 执行的一类执行操作进行监听。

具体而言，可交互的DOM事件按类型可以分为鼠标事件、键盘事件、窗口 事件、表单事件，相应地，鼠标事件对应的有点击操作，键盘事件对应的有键 盘打字操作，窗口事件对应的有滚动文档或窗口、框架缩放操作，表单事件对 应的有输入操作。分别对上述每个操作绑定一个或者多个监听事件进行操作信 息的收集。需要说明的是，每个DOM事件可以有多个元素名称，在绑定监听事 件时可以针对每个元素名称对应的事件来一一绑定监听事件。以表单事件为例， 表单的元素名称包括输入(input)、选取(select)、radio(单选框)、checkbox (多选框)，如表1-1所示，每个表单元素名称都对应有事件名称，比如输入(input)对应了输入操作、更新操作(元素的值发生改变时，触发的change 事件)、自动获取焦点操作(定焦到表单中的指定元素上)、失去焦点操作(当 用户在其他地方点击时失去焦点)，即，可以对表单元素中的输入(input)元 素对应的输入操作、更新操作、自动获取焦点操作、失去焦点操作各绑定一个 监听事件来监听用户对这个输入(input)表单元素的执行信息。此外，当一个 表单元素名称对应多个事件名称时，也可以只对与用户产生交互的事件名称进 行监听。

表1-1

表单元素名称	事件名称
		input	input、change、focus、blur
select	change
		radio	change
checkbox	change

在其中一些实施例中，所述操作信息包括用户操作流程；采集所述操作信 息包括：获取所述预设时间内所述事件监听所监听到的所述用户对所述DOM元 素执行的每一所述操作步骤以及对应的时间点，通过所述时间点对所述预设时 间内的所有所述操作步骤进行排序，得到所述用户操作流程。

具体地，监听到每一操作步骤时还需记录该操作步骤所对应的时间，当网 页出现异常时，根据异常时间点和预设时间确定需采集的操作步骤的时间起点， 通过每个操作步骤对应的时间点来判断该操作步骤是否在时间起点与异常时间 点之间，若是，则获取该操作步骤以及对应的时间点，将获取得到的所有操作 步骤按照时间顺序排序，得到能够反映用户操作顺序的用户操作流程。

本实施例的区别之处在于，现有技术通常只采集异常发生位置，并且通过 用户自行填写的问卷来收集发生网页异常的可能影响因素。这种方式在实际网 页维护中存在许多问题，例如，一部分用户并不会填写收集报错信息的问卷， 所以网页维护者只能根据在异常发生位置中出现过的历史问题不断推演以期场 景再现用户的操作信息，但是往往会因为操作流程和用户的不一致或者网页维 护者与用户的运行环境不同而导致异常无法重现，导致异常问题无法被排查出 来，因而就得不到解决。此外，即使用户填写了问卷，但由于用户在与浏览器 交互过程中并不会预先想到网页会出现异常，因此用户填写的操作信息不一定 准确以及完整，那么对于网页维护者来说同样无法非常准确地推断出问题来源。而本实施例提出的方案能够通过监听与用户产生交互的DOM元素的方式自动获 取用户操作步骤，并根据操作步骤生成用户操作流程并反馈给服务端。当网页 维护者从服务端获取到用户操作流程后，可以非常直观地看到异常发生前用户 的操作行为，那么就能够更快速地推断问题来源，无需重复尝试各种异常发生 的可能性，节约了解决问题的时间，提高了网页维护效率。

在其中一些实施例中，所述操作步骤根据对采集到的每一所述时间点对应 的所述DOM事件、元素名称、事件标签进行解析得到。

具体而言，事件监听对每个DOM事件监听得到的是元素名称，例如上述介 绍过的表单元素名称input；其次是DOM事件，例如对元旦元素名称input作输 入操作；另外还有事件标签，例如输入的是输入框；以及监听到的时间，例如 2021.01.01 12:34:56。服务端对获取到的这些数据进行解析，得到更为直观的 操作步骤，例如在2021.01.01 12:34:56对表单中的输入框执行了输入事件。 操作步骤相比于监听到的DOM事件、元素名称、事件标签能够更加精简已经更 为直观地反映操作信息，以便于后续网页维护者的查看。

在其中一些实施例中，所述操作信息还包括根据所述用户操作流程生成的 可视化流程图。

在本实施例中对用户操作流程进行可视化展示，例如以图片的方式发送给 网页维护者，当然也可以以表格或者图表的形式展示，再次不做累赘说明。

在其中一些实施例中，所述异常发生位置包括当前页面网址信息、异常报 错信息、程序调用栈信息。

在本步骤中，当前页面网址信息指的是url地址，例如通过“/index.html” 提示发生异常的页面地址，异常报错信息指的是网页错误具体指的是什么，例 如“Cannot readproperty'id'of undefined”指的是网页出现异常的原因 是无法读取未定义的id。程序调用栈信息被包括在浏览器提供的错误对象中， 通过该信息可以知道当出错函数被谁调用时发生了错误，从而推断错误发生原 因。通过异常发生位置能够知道对错误进行定位，配合生成的操作信息能够更 直观知道产生错误的原因，从而对异常进行处理。

在其中一些实施例中，所述操作信息被存放于在浏览器中创建的本地存储 空间里，当所述网页被关闭时所述本地存储空间中的所述操作信息自动清除。

在本实施例中，浏览器中创建本地存储空间，例如选择会话存储(sessionstorage)或者本地存储(local storage)，以会话存储为例，网页关闭后会 自动释放存储空间，用会话存储存放事件监听的数据，当发生异常时，打包操 作信息发送给服务端，会话存储存放的数据在网页关闭后自动清除，不占用存 储空间。

综上，本申请实施例提供了一种网页异常的监控方法，该方法通过对能够 与用户产生交互的DOM元素进行监控，在用户与网页进行交互时，触发监听事 件收集信息并存储与会话存储中，当网页出现异常，采集出现异常时的异常发 生未知以及出现时间点前一段时间内的用户操作信息，将二者打包发送给服务 器，以便于后续的异常处理，当网页关闭时，存储在会话存储中的数据自动清 除，不占用存储空间。通过本申请能够更直观地获取到发生异常时的异常信息， 以便于网页维护人员高效地处理解决问题。

下面以一个示例性的具体实例介绍本方案的网页异常的处理方法，该方法 的应用系统如图2所述，该应用系统中包括浏览器201、网页应用202、本地存 储203、网页监控客户端204、网页监控服务端205、网页监控平台206.其中， 网页监控客户端204包括收集单元301以及发送单元302，网页监控服务端205 包括接收单元401、处理单元402和发送单元403。

具体地，收集单元301通过调用document.querySelectorAll(‘button’) 方法可以找到所有按钮元素，然后遍历这些按钮元素，调用 addEventListener(‘click’,handler)为其添加点击事件监听，其中click 为事件名称，handler(具体名称可以依据实际情况而定，此处仅作为示例)为监 听回调函数方法，即当用户点击该按钮后会执行此方法，此方法会将按钮的文 字信息，如：新建表单按钮，与事件信息，包括事件名称‘click’、事件目标 对象‘button’及时间信息写入浏览器本地存储session storage中，完成操 作信息的收集。

类似地，还可以对表单元素进行收集，例如，通过调用document.querySelectorAll(‘form’)方法可以找到所有表单元素，然后遍历 这些按钮元素，不同的是，不直接对表单元素进行监听，而是对表单元素下的 具体交互元素进行监听。以input的输入框为例，通过 form.querySelectorAll(‘input’)找到所有input输入框元素，此处form即 前面所找到的form元素，然后调用addEventListener(‘input’,handler)为其添加输入事件监听，其中input为事件名称，当用户进行输入时，handler 方法会将输入框的label文字信息与事件信息，形如：

一起写入浏览器本地存储session storage中，完成表单操作信息的收集。

需要说明的是，按钮或表单中的元素可以添加一个或多个事件监听，可依 据实际情况选择。

发送单元302，通过window.addEventListener(‘error’)监听到网页发 生异常时，将收集到的数据发送至服务器进行处理。

接收单元401，客户端通过ajax(Asynchronous JavaScript and XML:异 步JavaScript和XML,简称ajax)将数据发送至本接收单元，并传递给处理单元 302处理；

处理单元402，根据从接收单元301传来的数据，生成异常信息，包括产生 异常的位置信息和用户操作步骤图；

发送单元403，将处理好的数据发送至监控平台，并发送消息通知。

根据上述应用系统，本申请提出的网页异常的处理方法如图5所示，包括 以下步骤：

步骤501：网页渲染完成后，加载网页监控装置，此时DOM元素已生成从而 可以被收集到；

步骤502：装置通过调用浏览器的document.querySelectorAll方法，查找button、form等元素，或者通过查找预设的类名标识查找交互元素，并通过window.addEventListener方法添加事件监听，如click(点击)事件；

具体地，在用户与网友进行交互时，如点击了一个新建表单按钮时，触发 监听事件，监控装置客户端收集单元根据浏览器提供的事件信息，获取到相关 内容：事件名称、DOM元素、事件目标对象标签、事件发生时间，具体数据结构 如下：

步骤503：异常发生时，监控装置客户端收集单元记录异常信息，包括：当 前页面网址信息、异常报错信息、程序调用栈信息，具体如下：

进一步地，监控装置客户端发送单元将收集单元所收集记录的数据发送至 监控装置服务端。

步骤504：监控装置服务端接收单元接收到监控装置客户端发送来的数据， 传递给监控装置服务端处理单元处理；

具体地，数据中每一个操作对应一个节点，节点的中的具体信息即对操作 的具体信息进行解析与直观阐述，将节点按照顺序连接，生成一张操作步骤图， 如图6所示。

进一步地，监控装置服务端发送单元将数据发送至监控平台，同时发送一 条消息通知，提醒网页维护者查看。

步骤505：网页维护者在接收消息提醒后，在监控平台上阅读相关信息，可 以直观地看到产生问题的步骤，快速定位异常位置，找到问题根源所在，从而 对网页进行维护。

实施例二

本申请还提出了一种网页异常的监控装置，参考图7，包括：

获取模块701，用于网页渲染完成后，获取所述网页中的DOM元素；

处理模块702，用于为每一所述DOM元素绑定对应的事件监听以监听用户对 所述DOM元素执行的操作；

监听模块703，用于采集在所述网页出现异常前预设时间内所述事件监听所 监听到的操作信息；

发送模块704，用于将所述操作信息与所述网页出现异常时的异常发生位置 发送给服务端，以使所述服务端对所述网页出现的异常进行定位并配合所述操 作信息重现网页出现异常前预设时间内所述用户对所述DOM元素执行的操作。

实施例四

本实施例还提供了一种电子装置，参考图8，包括存储器804和处理器802， 该存储器804中存储有计算机程序，该处理器802被设置为运行计算机程序以 执行上述任一项方法实施例中的步骤。

具体地，上述处理器802可以包括中央处理器(CPU)，或者特定集成电 路(ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实 施本申请实施例的一个或多个集成电路。

其中，存储器804可以包括用于数据或指令的大容量存储器804。举例来 说而非限制，存储器804可包括硬盘驱动器(HardDiskDrive，简称为HDD)、 软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光 盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个 或更多个以上这些的组合。在合适的情况下，存储器804可包括可移除或不可 移除(或固定)的介质。在合适的情况下，存储器804可在数据处理装置的内 部或外部。在特定实施例中，存储器804是非易失性(Non-Volatile)存储器。 在特定实施例中，存储器804包括只读存储器(Read-OnlyMemory，简称为ROM) 和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下， 该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemory， 简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简 称为EPROM)、电可擦除PROM (ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM)、电 可改写ROM(ElectricallyAlterableRead-OnlyMemory，简称为EAROM)或闪存 (FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以 是静态随机存取存储器(StaticRandom-AccessMemory，简称为SRAM)或动态 随机存取存储器(DynamicRandomAccessMemory，简称为DRAM)，其中，DRAM 可以是快速页模式动态随机存取存储器804 (FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数 据输出动态随机存取存储器(ExtendedDateOutDynamicRandomAccessMemory， 简称为EDODRAM)、同步动态随机存取内存 (SynchronousDynamicRandom-AccessMemory，简称SDRAM)等。

存储器804可以用来存储或者缓存需要处理和/或通信使用的各种数据文件， 以及处理器802所执行的可能的计算机程序指令。

处理器802通过读取并执行存储器804中存储的计算机程序指令，以实现 上述实施例中的任意一种网页异常的监控方法。

可选地，上述电子装置还可以包括传输设备806以及输入输出设备808， 其中，该传输设备806和上述处理器802连接，该输入输出设备808和上述处 理器802连接。

传输设备806可以用来经由一个网络接收或者发送数据。上述的网络具体 实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传 输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其 可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传 输设备806可以为射频(RadioFrequency，简称为RF)模块，其用于通过无线 方式与互联网进行通讯。

输入输出设备808用于输入或输出信息。在本实施例中，输入的信息可以 是用户执行的操作等，输出的信息可以是操作信息、异常发生位置等。

可选地，在本实施例中，上述处理器802可以被设置为通过计算机程序执 行以下步骤：

S101、网页渲染完成后，获取所述网页中的DOM元素。

S102、为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元 素执行的操作。

S103、采集在所述网页出现异常前的预设时间内的所述事件监听所监听到 的操作信息。

S104、将所述操作信息与所述网页出现异常时的异常发生位置打包发送给 服务端，以使所述服务端根据所述异常发生位置对所述网页出现的异常进行定 位并配合所述操作信息重现网页出现异常前所述用户对所述DOM元素执行的操 作。

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方 式中所描述的示例，本实施例在此不再赘述。

通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实 现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、 微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽 管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表 示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、 技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或 其他计算设备或其某种组合来实现。

本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数 据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件 的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序 产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任 务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的 一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个 软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任 何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻 辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数 据变体、CD等光学介质上。物理介质是非瞬态介质。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组 合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行 描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记 载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但 并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通 技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进， 这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为 准。

Claims (12)

1.一种网页异常的监控方法，其特征在于，包括以下步骤：

网页渲染完成后，获取所述网页中的DOM元素；

为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元素执行的操作；

采集在所述网页出现异常前预设时间内所述事件监听所监听到的操作信息；

将所述操作信息与所述网页出现异常时的异常发生位置发送给服务端，以使所述服务端对所述网页出现的异常进行定位并配合所述操作信息重现网页出现异常前预设时间内所述用户对所述DOM元素执行的操作。

2.根据权利要求1所述的网页异常的监控方法，其特征在于，所述DOM元素包括与所述用户进行交互的DOM事件，其中所述DOM事件按类型包括鼠标事件、键盘事件、窗口事件、表单事件的至少一种；

“所述获取网页中的DOM元素”包括：

遍历所述DOM元素中与所述用户进行交互的所述DOM事件。

3.根据权利要求2所述的网页异常的监控方法，其特征在于，“为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元素执行的操作”包括：

根据所述DOM事件的类型分别为每一类型的所述DOM事件绑定至少一所述监听事件，针对所述用户对所述DOM元素执行的一类执行操作进行监听。

4.根据权利要求2所述的网页异常的监控方法，其特征在于，所述操作信息包括用户操作流程；

采集所述操作信息包括：

获取所述预设时间内所述事件监听所监听到的所述用户对所述DOM元素执行的每一所述操作步骤以及对应的时间点，通过所述时间点对所述预设时间内的所有所述操作步骤进行排序，得到所述用户操作流程。

5.根据权利要求4所述的网页异常的监控方法，其特征在于，所述操作步骤根据对采集到的每一所述时间点对应的所述DOM事件、元素名称、事件标签进行解析得到。

6.根据权利要求4或5任一项所述的网页异常的监控方法，其特征在于，所述操作信息还包括根据所述用户操作流程生成的可视化流程图。

7.根据权利要求1所述的网页异常的监控方法，其特征在于，所述异常发生位置包括当前页面网址信息、异常报错信息、程序调用栈信息。

8.根据权利要求1或4任一项所述的网页异常的监控方法，其特征在于，所述操作信息被存放于在浏览器中创建的本地存储空间里，当所述网页被关闭时所述本地存储空间中的所述操作信息自动清除。

9.一种网页异常的监控装置，其特征在于，包括：

获取模块，用于网页渲染完成后，获取所述网页中的DOM元素；

处理模块，用于为每一所述DOM元素绑定对应的事件监听以监听用户对所述DOM元素执行的操作；

监听模块，用于采集在所述网页出现异常前预设时间内所述事件监听所监听到的操作信息；

发送模块，用于将所述操作信息与所述网页出现异常时的异常发生位置发送给服务端，以使所述服务端对所述网页出现的异常进行定位并配合所述操作信息重现网页出现异常前预设时间内所述用户对所述DOM元素执行的操作。

10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至8任一项所述的网页异常的监控方法。

11.一种计算机程序产品，其特征在于，包括软件代码部分，当所述计算机程序产品在计算机上被运行时，所述代码软件部分用于执行根据权利要求1至8任一项所述的网页异常的监控方法。

12.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至8任一项所述的网页异常的监控方法。

Images