一种对浏览器端真实用户体验实时监控的方法和系统

技术领域

本发明属于APM领域(APM是指应用性能管理以及监控，全称为 ApplicationPerformance Management&Monitoring)，具体涉及一种对浏览器端真实用户体验实时监控的方法和系统，主要应用于收集、分析浏览器端的真实用户行为与体验数据，帮助企业定位浏览器端的问题，为优化用户体验提供方向。

背景技术

JavaScript(简称JS)是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言均是先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标的点击或上下移、窗口移动等操作时，JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。

对于客户端来说，页面响应时间、吞吐率、js错误、ajax请求数、访问数量等信息的统计数据对一个产品的问题点定位以及用户体验分析十分重要。但是现有技术对于收集以上数据没有比较完善的解决方案，且最终收集得到的数据也不够详细不尽人意，因此，此类客户端的用户数据和性能数据的采集分析变得迫切需要。

当一个网站出现性能问题或者用户体验差投诉的问题时，通常使用的方案是修改业务逻辑，即在业务逻辑中插入监控所需问题数据信息的逻辑，或者通过高级工程师的经验进行分析判断，这通常面临的问题就是工作量大或定位不准很难排查，对出现问题时如何及时解决问题造成了很大的困扰。

综上所述，能够方便的在生产环境不断收集以上重要数据以便将问题提前预防或及时解决，成为客户端的迫切需求。

发明内容

为了解决现有技术的上述问题，一方面，本发明提供一种对浏览器端真实用户体验实时监控的方法，其利用HTML(HTML是指超文本标记语言，全称HyperText MarkupLanguage)页面可注入js的特性，通过自动或者手动的方式注入js脚本，可以实现用户代码零侵入，零修改即可自动获取页面上用户操作以及页面的性能等重要信息，借以实现对浏览器端真实用户体验的实时监控与分析。

为了达到上述目的，本发明采用的主要技术方案包括：

一种对浏览器端真实用户体验实时监控的方法，其包括如下步骤：

一种对浏览器端真实用户体验实时监控的方法，其通过注入JS脚本，在XMLHttpRequest对象内挂载监听函数，通过改变浏览器内Ajax 的工作流程，实现网页的异步更新，即在不重新加载整个网页的情况下，监听页面请求与后台数据交互的状态，增加监听功能，收集所需要监控的信息。

借助上述方案，本发明的对浏览器端真实用户体验实时监控的方法，其可以实现应用代码无修改零侵入实现web端用户的体验监控和分析：相较于传统的web端性能数据收集技术(需要在应用内相应的位置加入逻辑代码才能对数据进行收集，代码维护的力度需求较高，耗时费力，且最终收集的数据也许不尽人意)而言；本发明的web rum通过js 注入的方式可以无侵入的对页面进行整套性能指标数据的收集，收集到全套标准化的数据指标，以供用户体验和页面监控的分析，大大提高了生产效率，且降低了维护成本。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其包括如下步骤：

S1、枚举原生XMLHttpRequest对象的监听方法；

S2、重写XMLHttpRequest对象，利用挂载了步骤S1中监听方法的 XMLHttpRequest对象收集信息；

S3、对收集到的信息进行处理，得到最终的页面Ajax请求的监控结果。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其步骤S2中重写XMLHttpRequest对象的步骤包括：

S21、创建原始对象xhr；

S22、监听步骤S21创建的xhr对象的readystatechange变化，并在state每次变化后触发步骤S1中预定的监听方法；

S23、将新增了监听方法的xhr对象挂载到原生XMLHttpRequest对象上，实现XMLHttpRequest对象的重写，增加监听功能，收集信息。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其步骤S2中收集的信息包括下列中的任一种或任几种：请求url、请求类型、是否异步、请求开始的时间戳、请求数据大小、响应数据的首字节时间、响应结束时间、影响状态值、响应状态文本、响应数据大小、超时时间、请求是否错误。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其步骤S1中，枚举的监听方法包括："onreadystatechange","onload", "onerror"。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中还包括步骤S4、基于window.onerror方法进行js错误堆栈抓取，包括拷贝原始window.onerror方法，再插入监听方法catchErr收集JS错误信息。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中，S4具体包括如下步骤：

S42、将原始window.onerror方法拷贝到origin_error；

S43、重写window.onerror方法，即在onerror方法内分别执行 origin_error和catchErr方法，并通过apply方法改变this指向，通过 arguments将参数传入；

S44、通过catchErr方法解析错误信息。

其中，步骤S42中，由于采用了不直接改写window.onerror方法，可以有效防止已经对onerror做过改写处理。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中，步骤S42之前，还包括步骤S41、根据window.navigator.userAgent 方法判断浏览器类型，为兼容处理做准备。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中，步骤S44中，将错误信息解析为以下几种类型中的任一种或任几种：

EvalError:错误发生在eval()中；

SyntaxError:语法错误；

RangeError:数值超出范围；

ReferenceError:引用不可用；

TypeError:变量类型不是预期的；

URIError:错误发生在encodeURI()或decodeURI()中。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中还包括步骤S5、获取页面首屏时间，即通过页面的图片首屏加载完毕时间来得到首屏加载时间。

本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其中，S5具体包括如下步骤：

S51、获取首屏内图片资源，通过getElementsByTagName(“img”) 获取页面内全部的图片；

S52、判断每一张图片的offsetTop，并将offsetTop小于浏览器窗口高度的图片全部存入数组中，作为首屏加载的标记；

S53、监听存入数组内的图片的loading状态,判断全部图片状态均为 complete时判断为首屏加载结束时间；

S54、计算结束时间和加载时间的差值作为首屏加载时间。

另一方面，本发明还提供一种对浏览器端真实用户体验实时监控的系统，可以利用HTML页面可注入js的特性，通过自动或者手动的方式注入js脚本，可以实现用户代码零侵入，零修改即可自动获取页面上用户操作以及页面的性能等重要信息，借以实现对浏览器端真实用户体验的实时监控与分析。

为了达到上述目的，本发明采用的主要技术方案包括：

一种对浏览器端真实用户体验实时监控的系统，其包括：

JS脚本注入模块，用于在XMLHttpRequest对象内挂载监听函数，通过改变浏览器内Ajax的工作流程，实现网页的异步更新，即在不重新加载整个网页的情况下，监听页面请求与后台数据交互的状态，增加监听功能，收集所需要监控的信息。

借助上述方案，本发明的对浏览器端真实用户体验实时监控的系统，其可以实现应用代码无修改零侵入实现web端用户的体验监控和分析：相较于传统的web端性能数据收集技术(需要在应用内相应的位置加入逻辑代码才能对数据进行收集，代码维护的力度需求较高，耗时费力，且最终收集的数据也许不尽人意)而言；本发明的web rum通过js 注入的方式可以无侵入的对页面进行整套性能指标数据的收集，收集到全套标准化的数据指标，以供用户体验和页面监控的分析，大大提高了生产效率，且降低了维护成本。

本发明一个实施例的对浏览器端真实用户体验实时监控的系统，其包括：

原生XMLHttpRequest对象监听方法枚举模块，用于枚举原生 XMLHttpRequest对象的监听方法；

XMLHttpRequest对象重写模块，用于重写XMLHttpRequest对象；

信息收集模块，利用挂载了监听方法的XMLHttpRequest对象收集信息；

信息处理模块，用于对收集到的信息进行处理，得到最终的页面 Ajax请求的监控结果。

本发明一个优选实施例的对浏览器端真实用户体验实时监控的系统，其中，XMLHttpRequest对象重写模块中包括：

原始对象xhr创建子模块，用于创建原始对象xhr；

状态变化监听子模块，用于监听所创建的xhr对象的readystatechange变化；

监听方法触发子模块，用于在state每次变化后触发预定的监听方法；

xhr对象挂载子模块，用于将新增了监听方法的xhr对象挂载到原生XMLHttpRequest对象上，实现XMLHttpRequest对象的重写，增加监听功能，收集信息。

本发明一个实施例的对浏览器端真实用户体验实时监控的系统，其中，信息收集模块所收集的信息包括下列中的任一种或任几种：请求 url、请求类型、是否异步、请求开始的时间戳、请求数据大小、响应数据的首字节时间、响应结束时间、影响状态值、响应状态文本、响应数据大小、超时时间、请求是否错误。

本发明一个实施例的对浏览器端真实用户体验实时监控的系统，其中，原生XMLHttpRequest对象监听方法枚举模块所枚举的监听方法包括："onreadystatechange","onload","onerror"。

本发明一个实施例的对浏览器端真实用户体验实时监控的系统，其还包括js错误堆栈抓取模块，用于基于window.onerror方法进行js错误堆栈抓取，包括拷贝原始window.onerror方法，再插入监听方法catchErr 收集JS错误信息。

本发明一个较佳实施例的对浏览器端真实用户体验实时监控的系统，其中，js错误堆栈抓取模块包括：

原始window.onerror方法拷贝子模块，用于将原始window.onerror 方法拷贝到origin_error；

window.onerror方法重写子模块，用于重写window.onerror方法，即在onerror方法内分别执行origin_error和catchErr方法，并通过apply方法改变this指向，通过arguments将参数传入；

JS错误信息收集子模块，用于插入监听方法catchErr收集JS错误信息；

错误信息解析子模块，用于通过catchErr方法解析错误信息。

本发明一个实施例的对浏览器端真实用户体验实时监控的系统，其中，js错误堆栈抓取模块还包括，浏览器类型判断子模块，用于根据 window.navigator.userAgent方法判断浏览器类型，为兼容处理做准备。

本发明一个较佳实施例的对浏览器端真实用户体验实时监控的系统，其中，错误信息解析子模块将错误信息解析为以下几种类型中的任一种或任几种：

EvalError:错误发生在eval()中；

SyntaxError:语法错误；

RangeError:数值超出范围；

ReferenceError:引用不可用；

TypeError:变量类型不是预期的；

URIError:错误发生在encodeURI()或decodeURI()中。

本发明一个较佳实施例的对浏览器端真实用户体验实时监控的系统，其还包括：页面首屏时间获取模块，用于获取页面首屏时间，可以通过页面的图片首屏加载完毕时间来得到首屏加载时间。

本发明一个较佳实施例的对浏览器端真实用户体验实时监控的系统，其页面首屏时间获取模块包括：

图片资源获取子模块，用于获取首屏内图片资源，可以通过getElementsByTagName(“img”)获取页面内全部的图片；

首屏加载标记子模块，用于判断每一张图片的offsetTop，并将 offsetTop小于浏览器窗口高度的图片全部存入数组中，作为首屏加载的标记；

图片加载状态监听子模块，用于监听存入数组内的图片的loading状态，判断全部图片状态均为complete时判断为首屏加载结束时间；

首屏加载时间计算子模块，用于计算结束时间和加载时间的差值作为首屏加载时间。

本发明的对浏览器端真实用户体验实时监控的方法和系统，能够利用HTML页面可注入js的特性，通过自动或者手动的方式注入js脚本，可以实现用户代码零侵入，零修改即可自动获取页面上用户操作以及页面的性能等重要信息，借以实现对浏览器端真实用户体验的实时监控与分析。

附图说明

图1为利用Ajax创建交互式网页应用的原理图；

图2为本发明一个实施例的对浏览器端真实用户体验实时监控的方法的原理框图；

图3为本发明一个实施例的对浏览器端真实用户体验实时监控的方法的主要流程示意图；

图4为本发明一个实施例的对浏览器端真实用户体验实时监控的方法中重写XMLHttpRequest对象的主要流程示意图；

图5为本发明一个实施例的对浏览器端真实用户体验实时监控的方法中js错误堆栈抓取的主要流程示意图；

图6为本发明一个实施例的对浏览器端真实用户体验实时监控的方法中获取页面首屏时间的主要流程示意图；

图7为本发明一个应用例的对浏览器端真实用户体验实时监控的方法的JS代码示意图。

具体实施方式

为了更好的解释本发明，以便于理解，下面结合附图，通过具体实施方式，对本发明作详细描述。

参见图1，Ajax即“Asynchronous Javascript And XML”(异步 JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

本发明通过注入js脚本，改变浏览器内Ajax工作流程，借以注入一些监听方法，达到监听页面请求与后台数据交互的状态(响应时间、错误信息等)。

如图2所示，本发明一个实施例的对浏览器端真实用户体验实时监控的方法，其是在XMLHttpRequest对象内挂载监听函数，在不破坏 Ajax原生对象功能的前提下，增加对象的监听功能，以收集所需要监控的信息。

具体的，可以参照如下过程实现(参见图3)：

S1、枚举原生XMLHttpRequest对象的监听方法，如： "onreadystatechange","onload","onerror"等；

S2、重写XMLHttpRequest对象；

S3、对收集到的信息进行处理，得到最终的页面Ajax请求的监控结果。

参见图4，本发明的一个较佳实施例中，步骤S2中包括如下子步骤：

S21、创建原始对象xhr；

S22、监听xhr对象的readystatechange变化，并在state每次变化后触发自定的监听方法(步骤S1中枚举的方法)，收集信息；

S23、将新增了监听方法的xhr对象挂载到原生XMLHttpRequest对象上，增加监听功能。

其中，可以收集到的信息包括：请求url、请求类型、是否异步、请求开始的时间戳、请求数据大小、响应数据的首字节时间、响应结束时间、影响状态值、响应状态文本、响应数据大小、超时时间、请求是否错误等。

将以上收集到的信息，通过后台的处理，可以得到最终的页面Ajax 请求的监控结果。

本发明一个优选实施例中，还包括步骤S4、进行js错误堆栈抓取。

其中，js错误堆栈抓取的实现原理为：

基于window.onerror方法，首先拷贝原始window.onerror方法，再插入监听方法catchErr对错误信息进行收集。

可以按照如下过程实现(参见图5)：

S41、先根据window.navigator.userAgent方法判断浏览器类型，为兼容处理做准备；

S42、将原始window.onerror方法拷贝到origin_error(不直接改写window.onerror方法，防止已经对onerror做过改写处理)；

S43、重写window.onerror方法，在onerror方法内分别执行 origin_error和catchErr方法，并通过apply方法改变this指向，并通过 arguments将参数全部传入

S44、通过catchErr方法解析错误信息，解析后存入对象，以备使用。

其中，可以将错误信息解析为以下几种类型：

EvalError:错误发生在eval()中；

SyntaxError:语法错误；

RangeError:数值超出范围；

ReferenceError:引用不可用；

TypeError:变量类型不是预期的；

URIError:错误发生在encodeURI()或decodeURI()中。

通过以上的方法可以收集页面内所有的js错误信息，将信息发送给后台进行处理，最终可以得到所有js错误信息的监控结果。

本发明一个优选实施例中，还包括步骤S5、获取页面首屏时间。

其中，获取页面首屏时间的实现原理为：通过页面的图片首屏加载完毕时间来进行判断首屏加载时间。

可以按照如下过程实现(参见图6)：

S51、获取首屏内图片资源，通过getElementsByTagName(“img”) 获取页面内全部的图片；

S52、判断每一张图片的offsetTop，并将offsetTop小于浏览器窗口高度的图片全部存入数组中，作为首屏加载的标记；

S53、监听存入数组内的图片的loading状态,判断全部图片状态均为 complete时判断为首屏加载结束时间；

S54、计算结束时间和加载时间的差值作为首屏加载时间。

通过以上的方法可以收集每次用户点开页面的首屏加载时间，并进行可视化展示，作为页面是否需要优化的判断标准。

借助上述技术方案，本发明对浏览器端真实用户体验实时监控的方法，可以实现应用代码无修改零侵入实现web端用户的体验监控和分析：相较于传统的web端性能数据收集技术(需要在应用内相应的位置加入逻辑代码才能对数据进行收集，代码维护的力度需求较高，耗时费力，且最终收集的数据也许不尽人意)而言；本发明的web rum通过js 注入的方式可以无侵入的对页面进行整套性能指标数据的收集，收集到全套标准化的数据指标，以供用户体验和页面监控的分析，大大提高了生产效率，且降低了维护成本。

下面还提供一具体应用例对本发明进行描述。

本应用例中，可以手动将图7所示的代码粘贴在前端页面源码的 中(较佳的，粘贴在后面；更进一步的，粘贴在所有