一种前端错误定位方法和装置与流程

本发明涉及服务器前端领域，更具体地，特别是指一种前端错误定位方法和装置。

背景技术：

服务器用户在日常管理服务器时，通过web(网页端)管理系统对bmc(基板管理控制器)进行控制。但是服务器一旦上线之后，线上用户在页面上的很多操作对我们都是不透明的。

现有技术在定位bmcweb线上问题时，最怕遇到无法复现的页面问题。主要导致问题难定位的原因是：无法在客户的机器上进行断点定位、浏览器日志分析、抓包来分析问题，只能通过用户描述作为判断依据。

由于前端页面的复杂性，很多情况下不仅仅是与程序相关，还与客户端的机器配置、系统、浏览器相关，有时无法通过用户对问题、操作、出错页面的描述定位出真正的出错信息。有些错误是因为页面经过复杂的跳转、回退导致，测试人员也很难复现这个问题，只能知道他在最后的停留页面发生了错误,这样很难定位web页面的问题。还有接口异常的情况，很多功能都是前后台配合完成的，但是由于页面上会对超时时间作限制，因此虽然后台的数据是正常返回，但是由于前后台配合的时间是超出超时时间的，因此无法定位是前台问题、后台问题还是网络问题等。

因此开发人员定位问题时，也只能凭空猜想或者排除定位，这样很难定位出实际问题，最终的解决方式可能是清除页面缓存、重启设备等，缺乏针对性，导致错误定位效率和效果差，难以复现，影响客户体验。

针对现有技术中定位缺乏针对性，导致错误定位效率和效果差的问题，目前尚无有效的解决方案。

技术实现要素：

有鉴于此，本发明实施例的目的在于提出一种前端错误定位方法和装置，能够精确掌握用户行为以针对性的执行错误定位和复现，提高工作效率和客户体验。

基于上述目的，本发明实施例的第一方面提供了一种前端错误定位方法，包括执行以下步骤：

持续采集前端页面的用户轨迹数据；

根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；

使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据，以获得有效行为数据；

基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；

在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误。

在一些实施方式中，文档对象模型包括多个节点元素，并且每个节点元素均各自具有节点对象信息；用户操作事件包括事件源、指向一个或多个节点元素的事件对象、事件监听器、和根据回调机制触发的事件操作；

方法还包括：响应于触发事件操作而将前端页面中的事件对象从静态转换为动态。

在一些实施方式中，将用户轨迹数据分类并封装为多种不同的用户行为数据包括：

以多个节点元素的节点对象信息和对事件对象触发的事件操作为依据，将用户轨迹数据分为运行环境、用户操作行为、请求响应信息、报错信息四类，并分别封装为运行环境数据、用户操作行为数据、请求响应信息数据、报错信息数据。

在一些实施方式中，记载有效信息特征的白名单包括以下至少之一：特定操作、有效用户、有效地址；记载无效信息特征的黑名单包括以下至少之一：特定操作、无效用户、无效地址。

在一些实施方式中，方法还包括：反向代理服务器每经过预定时间就清理访问日志、或响应于存储或访问访问日志所占用的资源过高而清理访问日志。

本发明实施例的第二方面提供了一种前端错误定位装置，包括：

处理器；和

存储器，存储有处理器可运行的程序代码，程序代码在被运行时执行以下步骤：

持续采集前端页面的用户轨迹数据；

根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；

使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据，以获得有效行为数据；

基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；

在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误。

在一些实施方式中，文档对象模型包括多个节点元素，并且每个节点元素均各自具有节点对象信息；用户操作事件包括事件源、指向一个或多个节点元素的事件对象、事件监听器、和根据回调机制触发的事件操作；

步骤还包括：响应于触发事件操作而将前端页面中的事件对象从静态转换为动态。

在一些实施方式中，将用户轨迹数据分类并封装为多种不同的用户行为数据包括：以多个节点元素的节点对象信息和对事件对象触发的事件操作为依据，将用户轨迹数据分为运行环境、用户操作行为、请求响应信息、报错信息四类，并分别封装为运行环境数据、用户操作行为数据、请求响应信息数据、报错信息数据。

在一些实施方式中，记载有效信息特征的白名单包括以下至少之一：特定操作、有效用户、有效地址；记载无效信息特征的黑名单包括以下至少之一：特定操作、无效用户、无效地址。

在一些实施方式中，步骤还包括：反向代理服务器每经过预定时间就清理访问日志、或响应于存储或访问访问日志所占用的资源过高而清理访问日志。

本发明具有以下有益技术效果：本发明实施例提供的前端错误定位方法和装置，通过持续采集前端页面的用户轨迹数据；根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据以获得有效行为数据；基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误的技术方案，能够精确掌握用户行为以针对性的执行错误定位和复现，提高工作效率和客户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明提供的前端错误定位方法的流程示意图；

图2为本发明提供的前端错误定位方法的详细流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。

需要说明的是，本发明实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本发明实施例的限定，后续实施例对此不再一一说明。

基于上述目的，本发明实施例的第一个方面，提出了一种能够精确掌握用户行为以针对性的执行错误定位和复现的方法的一个实施例。图1示出的是本发明提供的前端错误定位方法的流程示意图。

所述的前端错误定位方法，如图1所示，包括执行以下步骤：

步骤s101：持续采集前端页面的用户轨迹数据；

步骤s103：根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；

步骤s105：使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据，以获得有效行为数据；

步骤s107：基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；

步骤s109：在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误。

本发明通过获取线上用户轨迹数据，通过白名单过滤、数据清洗等，对有效数据进行上报，方便开发人员快速根据轨迹进行现场还原，定位出系统问题。

本发明对需要获取的用户轨迹数据进行整合分类，基于树形结构和事件驱动模型对定位问题需要获取的用户行为数据进行分析，将用户行为数据分封装成运行环境对象、用户操作行为对象、请求响应信息对象、报错信息对象；对获取的用户轨迹数据进行清洗，由于获取的数据中存在许多垃圾数据，通过白名单信息及黑名单信息对数据进行过滤，从而再进行上报；由于用户行为的数据量很大，并发量比较高。因此考虑到nginx优异的性能，使用nginx日志对进行记录，除此之外其接入和维护成本也较低，使数据性能压力得到缓解。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关硬件来完成，的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，的存储介质可为磁碟、光盘、只读存储记忆体(rom)或随机存储记忆体(ram)等。计算机程序的实施例，可以达到与之对应的前述任意方法实施例相同或者相类似的效果。

在一些实施方式中，文档对象模型包括多个节点元素，并且每个节点元素均各自具有节点对象信息；用户操作事件包括事件源、指向一个或多个节点元素的事件对象、事件监听器、和根据回调机制触发的事件操作。方法还包括：响应于触发事件操作而将前端页面中的事件对象从静态转换为动态。

在一些实施方式中，将用户轨迹数据分类并封装为多种不同的用户行为数据包括：以多个节点元素的节点对象信息和对事件对象触发的事件操作为依据，将用户轨迹数据分为运行环境、用户操作行为、请求响应信息、报错信息四类，并分别封装为运行环境数据、用户操作行为数据、请求响应信息数据、报错信息数据。

在一些实施方式中，记载有效信息特征的白名单包括以下至少之一：特定操作、有效用户、有效地址；记载无效信息特征的黑名单包括以下至少之一：特定操作、无效用户、无效地址。

在一些实施方式中，方法还包括：反向代理服务器每经过预定时间就清理访问日志、或响应于存储或访问访问日志所占用的资源过高而清理访问日志。

根据本发明实施例公开的方法还可以被实现为由cpu执行的计算机程序，该计算机程序可以存储在计算机可读存储介质中。在该计算机程序被cpu执行时，执行本发明实施例公开的方法中限定的上述功能。上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储介质实现。

还原bmcweb系统线上用户的轨迹行为，可以两个方面进行考虑：动态信息和静态信息。由于接触到的gui(图形介面)程序，基本上都基于两个原则，树形结构和事件驱动模型。

树形结构：前端页面一般是通过文档及文档中的元素实现，文档即是一个典型的具有层次结构的树形结构，包含兄弟节点元素、节点元素、父节点元素。对于树形结构中的每一个节点，都存在相关的属性记录节点的相关信息，包含类型、名字、值。可以通过文档的方法及节点的相关属性获取出节点对象。

事件驱动模型：当外部事件发生时通过回调机制来触发相应的操作，该模式主要由事件源，事件对象，以及事件监听器三元素构成。关于“事件”这种抽象，最直观的是在于图形界面应用里，如常见的点击、拖动事件。而页面基本是通过这种模型实现相关操作。

通过分析前端页面的运作模式，可以对整体进行把控，确定页面测试的来源及目标。页面问题定位时，需要记录问题发生过程中，页面中某些节点(或某些元素)的信息及这个过程中的触发的事件，从而确认出相关场景，并对其进行分析，进行问题定位。

静态信息是指通过节点渲染的页面及元素等。动态信息是指当用户做了某个操作，触发了某个事件时，绑定该时间的回调函数就会开始执行。静态和动态是基于目前页面的两种表现形式。

静态页面：开发人员通过基于页面的树形结构设定好，放好相关的元素及标签。不管是谁在任何时候看到的页面内容都是一样的，一成不变。

动态页面：内容一般都是依靠服务器端的程序来生成的，不同人、不同时候访问页面，显示的内容都可能不同。这就用到了上面描述的页面驱动程序的概念，通过前端与后台的交互，获取后台数据，并对前端页面进行渲染。

基于上述考虑，因此在前端发生问题时，需要记录问题发生过程中的页面场景。由于页面基本上是静态及动态构成，因此记录时需要记录每个场景下：页面的静态元素及树形信息、用户动态的操作及请求信息、用户操作后后台的响应信息。除此之外，页面中还存在一些报错信息，这些也是定位问题的关键因素。

因此将信息封装为四类：运行环境(基础)类、用户操作行为类、请求响应信息类、报错信息类。

上报数据：采集到上述数据之后，首先根据白名单(指定操作、有效用户、有效url)进行过滤，根据清理策略定时清理垃圾数据，根据上报策略进行上报。

白名单：白名单中主要包含有效的用户数据、有效的url数据、有效的操作数据等。考虑到性能问题，不可能所有的操作都会被记录下来，因此只有符合白名单规则的有效数据才被传送后台，其余垃圾数据将被舍弃。

清理策略：指定时间内对数据进行备份及清理，以防对服务器造成不必要的压力。

数据查询及展示：对上报的数据进行查询及展示，方便开发人员解决线上问题。

下面根据如图2所示的具体实施例进一步阐述本发明的具体实施方式。

首先获取用户行为信息：

运行环境(基础)类包括：客户端的系统、客户端类型、客户端系统、客户端浏览器版本、账号类型、用户名、密码，通过javascript记录页面的运行环境，保存基础信息。

用户操作行为类包括：用户访问页面的唯一uuid号、页面访问次数、页面上级入口、页面操作(按钮点击、滑动、页面滚动、资源加载及一些必要组件的xpath信息等)。

请求响应信息类包括：请求类型、请求参数、请求的数据、请求链接、响应数据、http状态码、请求发起时间点、请求响应时间点。

报错信息类包括：错误码、错误描述、错误类型、出错文件、出错时间、出错行列位置、出错时间戳。

将这四类信息进行处理，重写window.onerror、document的onclick方法、console.error方法、window.onunhandledrejection方法等，将获取的信息封装成运行环境对象、用户操作行为对象、请求响应信息对象、报错信息对象。

本发明通过useragent及platform的属性及方法，获取到客户端中页面的运行环境；通过js错误对象javascripterrorinfo，保存页面中产生的js错误。其中，setcommonproperty用以设置所有日志对象的通用属性；获取静态dom属性：通过事件代理，在document上监听事件回调，在回调中通过.path获取当前dom的路径；并通attributes取到当前dom上的所有属性，从而获取用户的部分轨迹数据。

然后上报用户行为：

线上用户在页面上每作一次操作并进行上报，这无疑是给自己造成性能压力，而且存在很多垃圾数据，可能会导致数据污染，因此需要先对数据进行清洗，通过白名单机制对数据进行过滤及数据清洗。

初始化后先查询当前数据是否在白名单中，是的话则进行上报。如果遇到js报错，属于紧急情况，则直接上报。

最后执行后台数据处理、数据查询及展示：

由于在线用户行为的数据量很大，并发量比较高。因此使用nginx的crontab每五分钟定期处理一次access.log。采集到的数据，定时在后台进行轮询，推送至前台页面展示，展示具体的定位信息，支持页面url、用户查询，进一步聚焦检索结果。

从上述实施例可以看出，本发明实施例提供的前端错误定位方法，通过持续采集前端页面的用户轨迹数据；根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据以获得有效行为数据；基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误的技术方案，能够精确掌握用户行为以针对性的执行错误定位和复现，提高工作效率和客户体验。

需要特别指出的是，上述前端错误定位方法的各个实施例中的各个步骤均可以相互交叉、替换、增加、删减，因此，这些合理的排列组合变换之于前端错误定位方法也应当属于本发明的保护范围，并且不应将本发明的保护范围局限在所述实施例之上。

基于上述目的，本发明实施例的第二个方面，提出了一种能够精确掌握用户行为以针对性的执行错误定位和复现的装置的一个实施例。前端错误定位装置包括：

处理器；和

存储器，存储有处理器可运行的程序代码，程序代码在被运行时执行以下步骤：

持续采集前端页面的用户轨迹数据；

根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；

使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据以获得有效行为数据；

基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；

在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误。

在一些实施方式中，文档对象模型包括多个节点元素，并且每个节点元素均各自具有节点对象信息；用户操作事件包括事件源、指向一个或多个节点元素的事件对象、事件监听器、和根据回调机制触发的事件操作。步骤还包括：响应于触发事件操作而将前端页面中的事件对象从静态转换为动态。

在一些实施方式中，将用户轨迹数据分类并封装为多种不同的用户行为数据包括：以多个节点元素的节点对象信息和对事件对象触发的事件操作为依据，将用户轨迹数据分为运行环境、用户操作行为、请求响应信息、报错信息四类，并分别封装为运行环境数据、用户操作行为数据、请求响应信息数据、报错信息数据。

在一些实施方式中，记载有效信息特征的白名单包括以下至少之一：特定操作、有效用户、有效地址；记载无效信息特征的黑名单包括以下至少之一：特定操作、无效用户、无效地址。

在一些实施方式中，步骤还包括：反向代理服务器每经过预定时间就清理访问日志、或响应于存储或访问访问日志所占用的资源过高而清理访问日志。

从上述实施例可以看出，本发明实施例提供的前端错误定位装置，通过持续采集前端页面的用户轨迹数据；根据前端页面的文档对象模型和与文档对象模型相关的用户操作事件将用户轨迹数据分类并封装为多种不同的用户行为数据；使用记载有效信息特征的白名单和/或记载无效信息特征的黑名单来过滤和清洗用户行为数据以获得有效行为数据；基于预先指定的上报策略将有效行为数据上报到反向代理服务器的访问日志；在后端获取访问日志，解析并展示访问日志中的有效行为数据以定位和复现前端发生的错误的技术方案，能够精确掌握用户行为以针对性的执行错误定位和复现，提高工作效率和客户体验。

需要特别指出的是，上述前端错误定位装置的实施例采用了所述前端错误定位方法的实施例来具体说明各模块的工作过程，本领域技术人员能够很容易想到，将这些模块应用到所述前端错误定位方法的其他实施例中。当然，由于所述前端错误定位方法实施例中的各个步骤均可以相互交叉、替换、增加、删减，因此，这些合理的排列组合变换之于所述前端错误定位装置也应当属于本发明的保护范围，并且不应将本发明的保护范围局限在所述实施例之上。

以上是本发明公开的示例性实施例，但是应当注意，在不背离权利要求限定的本发明实施例公开的范围的前提下，可以进行多种改变和修改。根据这里描述的公开实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明实施例公开的元素可以以个体形式描述或要求，但除非明确限制为单数，也可以理解为多个。

应当理解的是，在本文中使用的，除非上下文清楚地支持例外情况，单数形式“一个”旨在也包括复数形式。还应当理解的是，在本文中使用的“和/或”是指包括一个或者一个以上相关联地列出的项目的任意和所有可能组合。上述本发明实施例公开实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上所述的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。