具体实施方式
图1为本发明实施例提供的网页异常监控方法流程图。本发明实施例针对现有技术中网页维护的实时性和准确性较低,提供了网页异常监控方法,该方法具体步骤如下:
步骤S101、客户端获取网页出现异常时异常发生的位置信息。
本实施例中,客户端具体可以是浏览器,在网页的制作过程中,设计人员通过编码制作出网页,浏览器通过运行网页代码以显示网页内容,可选的,网页代码包括如下至少一种:超级文本标记语言(HyperText Markup Language,简称HTML)、Java脚本(JavaScript)、动态服务器页面(Active Server Pages,简称ASP)、超文本预处理器(HypertextPreprocessor,简称PHP)、计算机图形接口标准(Computer Graphics Interface,简称CGI)等,本实施例以JavaScript为例。
当网页出现异常时,浏览器将无法加载完整的网页,此时JavaScript将产生错误事件(error事件),本实施例可以在该JavaScript中添加对error事件的捕获方法,例如,e对象是异常对象,通过在JavaScript中添加函数window.addEventListener(‘error',function(e){})可以对e对象进行捕获。浏览器通过该函数可以捕获到网页出现异常时JavaScript产生的异常对象,该异常对象的对象属性中包括错误信息,该错误信息包括异常发生的位置信息,在本实施例中,所述位置信息包括:堆栈信息,所述堆栈信息用于标识网页代码中出现异常的函数。例如,基于JavaScript的语言特性,JavaScript产生error事件的同时产生堆栈信息,该堆栈信息用于标识网页代码中某一函数例如函数A的哪一行运行出错,函数B调用了函数A,以致函数B运行出错,函数C调用了函数B,以致函数C运行出错等等。例如,e.stack对象是异常发生的堆栈信息,通过在JavaScript中添加函数window.addEventListener(‘error',function(e.stack){})可以对e.stack对象进行捕获。
步骤S102、所述客户端向服务器发送异常信息,所述异常信息包括异常发生的位置信息,以使所述服务器根据所述异常信息,向维护人员的终端设备发送提示信息,以使所述维护人员根据所述提示信息登录所述服务器,并根据所述异常发生的位置信息对所述网页出现的异常进行定位及处理。
如图2所示,在本实施例中,客户端具体可以是用户设备21中安装的浏览器,当用户通过用户设备21中安装的浏览器浏览网页时,若网页出现异常,则浏览器捕获该异常发生的位置信息。进一步的,浏览器通过用户设备21向服务器22发送异常信息,所述异常信息包括异常发生的位置信息例如堆栈信息。可选的,服务器22可以是该网页的网站服务器,服务器22可存储有该网页的网页代码。服务器22接收到异常信息后,向维护人员的终端设备发送提示信息,可选的,维护人员是该网页代码的设计者或维护者,维护人员的终端设备可以是移动终端、笔记本电脑、个人计算机(personal computer,简称PC)、平板电脑等,本实施例以移动终端例如智能手机23为例,服务器22可以将该提示信息以短信的方式发送给维护人员的智能手机23,智能手机23接收到提示信息后的用户界面如图3所示。
维护人员查看到智能手机23接收的提示信息后,远程登录服务器22,具体的,维护人员通过个人计算机24远程登录服务器22,在其他实施例中,维护人员还可以通过智能手机23远程登录服务器22。由于服务器22接收到用户设备21发送的异常信息中包括异常发生的位置信息例如堆栈信息,因此,当维护人员远程登录服务器22后,可根据该堆栈信息定位网页代码中的问题,并对网页代码中的问题进行修复。
本发明实施例通过客户端获取网页出现异常时异常发生的位置信息,并向服务器发送包括该位置信息的异常信息,服务器根据该异常信息,向维护人员的终端设备发送提示信息,使得维护人员即时的获知网页出现异常,另外,维护人员登录服务器后,根据异常发生的位置信息可准确定位问题,从而提高了网页维护的实时性和准确性。
图4为本发明另一实施例提供的网页异常监控方法流程图。在上述实施例的基础上,本实施例提供的网页异常监控方法包括如下步骤:
步骤S401、客户端获取网页出现异常时异常发生的位置信息。
步骤S401与步骤S101的原理和实现方式一致,此处不再赘述。
步骤S402、所述客户端获取所述网页的页面图像信息。
用户设备21中安装的浏览器捕获到异常发生的位置信息例如堆栈信息之后,进一步的获取出现异常的网页的页面图像信息,具体的,所述客户端获取所述网页的页面图像信息,包括:所述客户端对所述网页进行截图操作获得页面截图。例如,该网页出现异常时,用户设备21中安装的浏览器基于开源框架html2canvas生成当前页面截图。该页面截图可以完整的记录网页出现异常时,浏览器展示给用户的页面,可选的,该页面截图可以反映出用户的实际应用场景,例如该页面截图包括用户输入的信息。
步骤S403、所述客户端向服务器发送异常信息,所述异常信息包括异常发生的位置信息和所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
如图2所示,用户设备21中的浏览器通过用户设备21向服务器22发送的异常信息包括异常发生的位置信息例如堆栈信息和该网页的页面图像信息,服务器22接收到该异常信息后,将堆栈信息和该网页的页面图像信息进行存储,例如存储到服务器22的数据库中,服务器22根据该异常信息向维护人员的终端设备发送提示信息。当维护人员登录服务器22后,根据服务器22存储的堆栈信息和该网页的页面图像信息定位网页代码中的问题,并对网页代码中的问题进行修复。
本实施例通过客户端获取所述网页的页面图像信息,并将堆栈信息和网页的页面图像信息同时发送给服务器,由于网页出现异常时,网页的页面图像信息可以反映出用户的实际应用场景,因此,维护人员结合所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理,可进一步提高网页维护的准确性。
图5为本发明另一实施例提供的网页异常监控方法流程图。在上述实施例的基础上,本实施例提供的网页异常监控方法包括如下步骤:
步骤S501、客户端获取网页出现异常时异常发生的位置信息。
步骤S501与步骤S101的原理和实现方式一致,此处不再赘述。
步骤S502、所述客户端获取所述网页的页面图像信息。
步骤S502与步骤步骤S402的原理和实现方式一致,此处不再赘述。
步骤S503、所述客户端将所述网页的页面图像信息转换为所述网页的页面文本信息。
在图4所示的实施例中,用户设备21中的浏览器通过用户设备21向服务器22发送出现异常的网页的页面图像信息,如果该页面图像信息的数据量较大,则会占用较大的通信带宽,为了节省通信带宽,在本实施例中,当浏览器获取到出现异常的网页的页面图像信息之后,可进一步将该网页的页面图像信息转换为该网页的页面文本信息。
具体的,所述客户端将所述网页的页面图像信息转换为所述网页的页面文本信息,包括:所述客户端采用base64编码方式将所述网页的页面图像信息转换为所述网页的页面文本信息。
步骤S504、所述客户端向服务器发送异常信息,所述异常信息包括异常发生的位置信息和所述网页的页面文本信息,以使所述服务器将所述网页的页面文本信息转换为所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
如图2所示,用户设备21中的浏览器通过用户设备21向服务器22发送的异常信息包括异常发生的位置信息例如堆栈信息和该网页的页面文本信息,服务器22接收到该异常信息后,将堆栈信息和该网页的页面文本信息进行存储,例如存储到服务器22的数据库中,服务器22根据该异常信息向维护人员的终端设备发送提示信息。当维护人员远程登录服务器22后,远程登录界面可如图6所示,该远程登录界面显示有异常发生的时间、发生异常的网页的统一资源定位符(Uniform Resource Locator,简称URL)、发生异常的模块、错误信息、堆栈信息等,其中,“Cannot read property‘children’of undefined”是错误信息的标题,“查看案发现场截图”是可点击的图标。维护人员通过图6所示的堆栈信息可知报错代码位于:VueComponent.permissionClusters(https://crm.uc.cn/static/sme/build/main.js?f252479ab48d1c198b80:3734:44),但是,维护人员可能并不知道此处为什么会报错,进一步的,维护人员可以点击“查看案发现场截图”,此时,服务器22将其存储的该网页的页面文本信息转换为该网页的页面图像信息例如界面截图,该界面截图具体如图7所示,维护人员通过查看异常发生时的界面截图可知:由于用户在填写URL时发生了错误,导致网页出现异常,从而定位了异常问题。
本实施例通过客户端将发生异常的网页的页面图像信息转换为页面文本信息,并将堆栈信息和网页的页面文本信息同时发送给服务器,由于页面文本信息的数据量相对于页面图像信息的数据量小,因此节省了客户端和服务器之间的通信带宽。
图8为本发明另一实施例提供的网页异常监控方法流程图。如图8所示,本实施例提供的网页异常监控方法包括如下步骤:
步骤S801、服务器接收客户端发送的异常信息,所述异常信息包括异常发生的位置信息,所述异常发生的位置信息是网页出现异常时网页代码生成的信息。
具体的,所述位置信息包括:堆栈信息,所述堆栈信息用于标识网页代码中出现异常的函数。
步骤S802、所述服务器根据所述异常信息,向维护人员的终端设备发送提示信息,以使所述维护人员根据所述提示信息登录所述服务器,并根据所述异常发生的位置信息对所述网页出现的异常进行定位及处理。
在一些实施例中,所述异常信息还包括:所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。具体的,所述网页的页面图像信息是所述客户端对所述网页进行截图操作获得的页面截图。
在另外一些实施例中,所述异常信息还包括:所述网页的页面文本信息。进一步的,所述服务器将所述网页的页面文本信息转换为所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
本实施例的执行主体为服务器,其具体原理及实现方式与上述实施例一致,此处不再赘述。
本发明实施例通过客户端获取网页出现异常时异常发生的位置信息,并向服务器发送包括该位置信息的异常信息,服务器根据该异常信息,向维护人员的终端设备发送提示信息,使得维护人员即时的获知网页出现异常,另外,维护人员登录服务器后,根据异常发生的位置信息可准确定位问题,从而提高了网页维护的实时性和准确性。
图9为本发明实施例提供的客户端的结构图。本发明实施例提供的客户端可以执行网页异常监控方法实施例提供的处理流程,该客户端具体可以是上述实施例中的浏览器,如图9所示,客户端90包括:第一获取模块91、发送模块92,其中,第一获取模块91用于获取网页出现异常时异常发生的位置信息;发送模块92用于向服务器发送异常信息,所述异常信息包括异常发生的位置信息,以使所述服务器根据所述异常信息,向维护人员的终端设备发送提示信息,以使所述维护人员根据所述提示信息登录所述服务器,并根据所述异常发生的位置信息对所述网页出现的异常进行定位及处理。
其中,所述位置信息包括:堆栈信息,所述堆栈信息用于标识网页代码中出现异常的函数。
本发明实施例提供的客户端可以具体用于执行上述图1所提供的方法实施例,具体功能此处不再赘述。
本发明实施例通过客户端获取网页出现异常时异常发生的位置信息,并向服务器发送包括该位置信息的异常信息,服务器根据该异常信息,向维护人员的终端设备发送提示信息,使得维护人员即时的获知网页出现异常,另外,维护人员登录服务器后,根据异常发生的位置信息可准确定位问题,从而提高了网页维护的实时性和准确性。
图10为本发明另一实施例提供的客户端的结构图。在上述实施例的基础上,客户端90还包括:第二获取模块93,用于获取所述网页的页面图像信息。第二获取模块93获取所述网页的页面图像信息时具体用于:对所述网页进行截图操作获得页面截图。可选的,所述异常信息还包括:所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
在一些实施例中,客户端90还包括:转换模块94,用于将所述网页的页面图像信息转换为所述网页的页面文本信息。转换模块94具体用于:采用base64编码方式将所述网页的页面图像信息转换为所述网页的页面文本信息。可选的,所述异常信息还包括:所述网页的页面文本信息,以使所述服务器将所述网页的页面文本信息转换为所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
本发明实施例提供的客户端可以具体用于执行上述图4或图5所提供的方法实施例,具体功能此处不再赘述。
本发明实施例通过客户端获取所述网页的页面图像信息,并将堆栈信息和网页的页面图像信息同时发送给服务器,由于网页出现异常时,网页的页面图像信息可以反映出用户的实际应用场景,因此,维护人员结合所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理,可进一步提高网页维护的准确性;通过客户端将发生异常的网页的页面图像信息转换为页面文本信息,并将堆栈信息和网页的页面文本信息同时发送给服务器,由于页面文本信息的数据量相对于页面图像信息的数据量小,因此节省了客户端和服务器之间的通信带宽。
图11为本发明实施例提供的服务器的结构图。本发明实施例提供的服务器可以执行网页异常监控方法实施例提供的处理流程,如图11所示,服务器110包括:接收模块111和发送模块112,其中,接收模块111用于接收客户端发送的异常信息,所述异常信息包括异常发生的位置信息,所述异常发生的位置信息是网页出现异常时网页代码生成的信息;发送模块112用于根据所述异常信息,向维护人员的终端设备发送提示信息,以使所述维护人员根据所述提示信息登录所述服务器,并根据所述异常发生的位置信息对所述网页出现的异常进行定位及处理。
可选的,所述位置信息包括:堆栈信息,所述堆栈信息用于标识网页代码中出现异常的函数。
在一些实施例中,所述异常信息还包括:所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。所述网页的页面图像信息是所述客户端对所述网页进行截图操作获得的页面截图。
在其他一些实施例中,所述异常信息还包括:所述网页的页面文本信息。相应的,服务器110还包括:转换模块113,用于将所述网页的页面文本信息转换为所述网页的页面图像信息,以供所述维护人员根据所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理。
本发明实施例提供的服务器可以具体用于执行上述图8所提供的方法实施例,具体功能此处不再赘述。
本发明实施例通过客户端获取网页出现异常时异常发生的位置信息,并向服务器发送包括该位置信息的异常信息,服务器根据该异常信息,向维护人员的终端设备发送提示信息,使得维护人员即时的获知网页出现异常,另外,维护人员登录服务器后,根据异常发生的位置信息可准确定位问题,从而提高了网页维护的实时性和准确性。
本发明实施例还提供一种网页异常监控系统。如图2所示,网页异常监控系统包括:用户设备21中的客户端例如浏览器、服务器22、维护人员的终端设备,维护人员的终端设备包括:智能手机23和个人计算机24中的至少一个。
综上所述,本发明实施例通过客户端获取网页出现异常时异常发生的位置信息,并向服务器发送包括该位置信息的异常信息,服务器根据该异常信息,向维护人员的终端设备发送提示信息,使得维护人员即时的获知网页出现异常,另外,维护人员登录服务器后,根据异常发生的位置信息可准确定位问题,从而提高了网页维护的实时性和准确性;通过客户端获取所述网页的页面图像信息,并将堆栈信息和网页的页面图像信息同时发送给服务器,由于网页出现异常时,网页的页面图像信息可以反映出用户的实际应用场景,因此,维护人员结合所述异常发生的位置信息和所述网页的页面图像信息对所述网页出现的异常进行定位及处理,可进一步提高网页维护的准确性;通过客户端将发生异常的网页的页面图像信息转换为页面文本信息,并将堆栈信息和网页的页面文本信息同时发送给服务器,由于页面文本信息的数据量相对于页面图像信息的数据量小,因此节省了客户端和服务器之间的通信带宽。
在本发明所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
最后应说明的是:以上各实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述各实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。