CN104978529A - 网页前端的异常处理方法、异常处理系统及异常处理服务器 - Google Patents

Abstract

本发明提供一种网页前端的异常处理方法、异常处理系统及异常处理服务器，包括：收集网页前端的异常信息，并根据收集的渠道判断异常类型；根据所述异常类型获取异常关键字；获取网页浏览器的通用信息；将所述异常关键字与所述通用信息一并存储为异常信息块；将所述异常信息块上报至异常处理服务器。本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

Description

网页前端的异常处理方法、异常处理系统及异常处理服务器

技术领域

本发明属于网络数据处理领域，尤其涉及一种网页前端的异常处理方法、异常处理系统及异常处理服务器。

背景技术

单页应用程序(Single Page Application，SPA)是加载单个超文本标记语言(Hyper Text Mark-up Language，HTML)页面，并在用户与应用程序交互时动态更新该页面的应用程序。单页应用程序的优点在于：高效、以及提供更好的用户体验。缺点在于：会偶发异常，包括脚本(JavaScript)执行错误或网络超时，导致数据不可解析、解析后数据不符合业务逻辑、或图片拉取失败等情形。

为避免上述异常的情形，传统的解决方案包括利用脚本语言中的OnError事件、ReadyStateChange事件或try...catch...代码块等方式进行网页前端异常的捕获等。

然而，利用OnError事件进行异常判断时，无法获取异常发生时的上下文信息，使开发人员无法快速定位到导致异常发送的出错代码块；利用ReadyStateChange事件进行网络超时判断时，如果是在弱网环境下，将需要等待很长时间才能实现捕获，增加了时间成本；利用try...catch...代码块，则需要在传统代码中写入大量写入，才能保证所有代码都被覆盖，而这样会占用较多的内存资源。

发明内容

有鉴于此，本发明的目的在于提供一种网页前端的异常处理方法、异常处理系统及异常处理服务器，可以解决现有技术中反馈慢时间长、代码占用空间过大、以及无法准确定位等问题。

为解决上述技术问题，本发明实施例提供了一种网页前端的异常处理方法，包括：

收集网页前端的异常信息，并根据收集的渠道判断异常类型；

根据所述异常类型获取异常关键字；

获取网页浏览器的通用信息；

将所述异常关键字与所述通用信息一并存储为异常信息块；以及

将所述异常信息块上报至异常处理服务器。

为解决上述技术问题，本发明实施例还提供一种网页前端的异常处理系统，包括：

收集模块，用于收集网页前端的异常信息，并根据收集的渠道判断异常类型；

获取模块，用于根据所述异常类型获取异常关键字，以及获取网页浏览器的通用信息；

存储器，包括用于存储异常信息块的异常列表，其中，所述异常信息块包括所述异常关键字与所述通用信息；以及

上传模块，用于将所述异常信息块上报至异常处理服务器。

为解决上述技术问题，本发明实施例又提供一种网页前端的异常处理服务器，包括：

接收模块，用于接收来自于异常处理系统的异常列表；

日志模块，用于写入所述接收模块所接收的异常列表；

分析模块，用于读取所述日志模块进行统计分析，并产生分析结果；

漏洞更新模块，用于根据分析结果，产生漏洞更新数据；以及

发送模块，用于发送所述漏洞更新数据至网页前端。

相对于现有技术，本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

附图说明

图1是本发明实施例提供的网页前端的异常处理方法、异常处理系统及异常处理服务器的应用环境示意图；

图2是本发明实施例一提供的异常处理方法的工作流程示意图；

图3是本发明实施例二提供的异常处理系统的模块示意图；

图4是本发明实施例三提供的异常处理服务器的模块示意图；

图5是本发明实施例三提供的异常处理分析处理过程示意图；

图6是本发明实施例四提供的网页前端的异常处理方法、异常处理系统及异常处理服务器的时序示意图。

具体实施方式

请参照附图中的图式，其中相同的组件符号代表相同的组件，本发明的原理是以实施在一适当的运算环境中来举例说明。以下的说明是基于所示例的本发明的具体实施例，其不应被视为限制本发明未在此详述的其它具体实施例。

本发明原理以上述文字来说明，其并不代表为一种限制，本领域测试人员将可了解到以下所述的多种步骤及操作亦可实施在硬件当中。本发明的原理使用许多其它泛用性或特定目的运算、通信环境或组态来进行操作。

请参阅图1，为本发明中提供的网页前端的异常处理方法、异常处理系统及异常处理服务器的应用环境示意图。所述应用环境，包括异常处理系统10、异常处理服务器20、以及通信网络30。

可以理解的是：所述异常处理系统10，可以下载并安装于各种类型的客户端中。比如，笔记本01、苹果电脑02、触控电脑03、或智能手机04。可以理解的是：不同的客户端可能会含有不同的浏览器通用信息。如，通过笔记本01发生网络异常时，通过智能手机04不一定会发生网络异常。即使同样是智能手机，通过苹果的浏览器发生代码异常，通过安卓的浏览器不一定会发生代码异常，因此，在收集异常信息时，即使没有发生异常的部分，也一并作为异常信息进行上传，以供分析。

异常处理系统10，收集网页前端的异常信息，并从中获取异常关键字与网页浏览器的通用信息；将所述异常关键字与所述通用信息一并存储为异常信息块，并上报至异常处理服务器20。

异常处理服务器20，接收来自于异常处理系统的异常列表并写入日志；通过读取所述日志进行统计分析，并产生分析结果；以及根据分析结果，产生漏洞更新数据；并将所述漏洞更新数据发发送至网页前端，以避免异常再次发生。

通信网络30，包括无线网络及有线网络。其中无线网络包括无线广域网、无线局域网、无线城域网、以及无线个人网中的一种或多种的组合。

本案可应用于基于HTML5的网页应用程序中。请参照以下实施例，实施例一侧重于异常处理方法，实施例二侧重于异常处理系统，实施例三侧重于异常处理服务器；而实施例四侧重异常处理系统及异常处理服务器之间的工作时序。可以理解的是：虽然各实施例的侧重不同，但其设计思想是一致的。且，在某个实施例中没有详述的部分，可以参见说明书全文的详细描述，不再赘述。

实施例一

请参阅图2，所示为本发明实施例提供的网页前端的异常处理方法的工作流程示意图。

在步骤S201中，收集网页前端的异常信息，并根据收集异常信息的渠道判断所述异常信息的异常类型。

可以理解的是，步骤具体包括：通过网络底层组件和收集代码块作为所述收集的渠道，收集网页前端的异常信息；其中，

如果所述收集渠道是底层组件，则判断异常类型为网络超时异常；或

如果所述收集渠道是收集代码块，则判断异常类型为脚本异常。

其中，所述收集代码块，可以是如下方式中的一种或多种的组合：

(1)利用的onerror事件进行javaScript的异常补获捕获；

(2)利用XmlHttpRequest的readyStateChange事件被触发时所提供的状态字来进行网络超时判断；

(3)利用javaScript中的try...catch...代码块进行javaScript异常捕获；

(4)利用XmlHttpRequest的readyStateChange事件被触发时所提供的状态字来进行网络超时类的异常捕获。

通过上述收集代码的设计，当脚本异常是javaScript执行出错时，开发人员可以快速定位到出错的代码及执行上下文；而对于线上产品，当JavaScript出现Bug时，抓取异常信息并反馈的时间可以控制在10分钟之内，反馈较为快速。

在步骤S202中，根据所述异常类型获取异常关键字。

可以理解的是：在本步骤之前还包括步骤：设定异常关键字类型，所述异常关键字类型包括：超时地址或/和异常代码，其中所述超时地址对应所述网络超时异常，所述异常代码对应所述脚本异常。

即，如果是脚本异常，则在本步骤中获取异常代码；如果是网络异常，则在本步骤中获取超时地址。

在步骤S203中，获取网页浏览器的通用信息。

所述通用信息包括：浏览器版本、单页应用程序的版本、网络状态、异常代码的调用栈、异常时用户访问的URL路径中的一个或多个的组合。

可以理解的是：通过对更多通用信息的比对，可以明确异常出现的具体原因，更有针对性的进行分析。比如，如果某一网页的图片经常会出现加载异常导致无法显示，如果仅有这一信息，在修改时会有诸多种可能，要程序人员逐一调试。而本发明中通过获取更多通用信息，可以给程序人员更多线索，比如，如果是网络状态皆为连接较弱，那么图片加载异常的原因更倾向于像素过高，在后台压缩后重新上传即可。

在步骤S204中，将所述异常关键字与所述通用信息一并存储为异常信息块，并将所述异常信息块存储至本地存储器的异常列表中。

可以理解的是：在所述将所述异常信息块存储至本地存储器的异常列表中的步骤中，还包括：

(1)读取所述本地存储器中的异常列表；

(2)判断所述异常信息块的个数是否超过了预设阈值；其中，

(3.1)如果超过所述预设阈值，则从所述存储列表的队尾开始进行清除；或

(3.2)如果没有超过所述预设阈值，则将异常信息存入所述存储列表。

在步骤S205中，将所述异常列表中的异常信息块上报至异常处理服务器。

可以理解的是，具体步骤包括：

(1)将所述网页前端进行重启；

(2)重启后，将所述本地存储器的异常列表上传至异常处理服务器；

(3)判断是否上传成功；其中，

(4.1)若上传成功，则清空所述异常列表；或

(4.2)若上传不成功，则待下次重启时继续上传。

在步骤S206中，接收来自于异常处理服务器的漏洞更新数据，进行更新，其中所述漏洞更新数据是基于所述异常列表所产生的。

本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

实施例二

请参阅图3，所示为本发明实施例提供的网页前端的异常处理系统的模块示意图。

如图所示，所述异常处理系统10，包括：收集模块11、获取模块12、存储器13、上传模块14、以及更新模块15。

其中，收集模块11，用于收集网页前端的异常信息，并根据收集异常信息的渠道判断所述异常信息的异常类型。

所述收集模块11包括：网络底层组件111和收集代码块112，用于对不同异常类型的异常信息进行收集。其中，所述网络底层组件111，用于收集网页前端的异常信息，并标注异常类型为网络超时异常；所述收集代码块112，用于收集网页前端的异常信息，并标注异常类型为脚本异常。

其中，所述收集代码块，可以是如下方式中的一种或多种的组合：

(1)利用的onerror事件进行javaScript的异常补获捕获；

(2)利用XmlHttpRequest的readyStateChange事件被触发时所提供的状态字来进行网络超时判断；

(3)利用javaScript中的try...catch...代码块进行javaScript异常捕获；

(4)利用XmlHttpRequest的readyStateChange事件被触发时所提供的状态字来进行网络超时类的异常捕获。

获取模块12，用于根据所述异常类型获取异常关键字，以及获取网页浏览器的通用信息。

可以理解的是：本发明还包括一配置模块16，用于设定异常关键字类型，所述异常关键字类型包括：超时地址或/和异常代码，其中所述超时地址对应所述网络超时异常，所述异常代码对应所述脚本异常。

即，如果是脚本异常，则获取模块12会根据异常关键字的设定，获取异常代码；如果是网络异常，则获取模块12会根据异常关键字的设定获取超时地址。

网页浏览器的通用信息包括：浏览器版本、单页应用程序的版本、网络状态、异常代码的调用栈、异常时用户访问的URL路径中的一个或多个的组合。

可以理解的是：通过对更多通用信息的比对，可以明确异常出现的具体原因，更有针对性的进行分析。比如，如果某一网页的图片经常会出现加载异常导致无法显示，如果仅有这一信息，在修改时会有诸多种可能，要程序人员逐一调试。而本发明中通过获取更多通用信息，可以给程序人员更多线索，比如，如果是网络状态皆为连接较弱，那么图片加载异常的原因更倾向于像素过高，在后台压缩后重新上传即可。

存储器13，包括用于存储异常信息块的异常列表，其中，所述异常信息块包括所述异常关键字与所述通用信息。

可以理解的是：在存储器13还用于在存入异常信息前，判断所述异常信息块的个数是否超过了预设阈值；其中，如果超过所述预设阈值，则从所述存储列表的队尾开始进行清除；如果没有超过所述预设阈值，则将异常信息存入所述存储列表。

上传模块14，用于将所述异常列表中的异常信息块上报至异常处理服务器。

可以理解的是，所述上传模块14包括：判断子模块141、上传子模块142、以及清空子模块143。

其中，所述判断子模块141，用于判断所述网页前端是否重启，并当重启时发生重启通知。上传子模块142，用于接收所述重启通知，将所述存储器的异常列表上传至异常处理服务器。清空子模块143，用于判断是否上传成功，并当上传成功时，清空所述异常列表；若上传不成功，则待下次重启时继续上传。

更新模块15，用于接收来自于异常处理服务器的漏洞更新数据，进行更新，其中所述漏洞更新数据是基于所述异常列表所产生的。

本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

实施例三

请参阅图4，所示为网页前端的异常处理服务器的模块示意图。

如图所示，所述异常处理服务器20，包括：接收模块21、日志模块22、分析模块23、漏洞更新模块24、以及发送模块25。

接收模块21，用于接收来自于异常处理系统的异常列表。

日志模块22，用于写入所述接收模块所接收的异常列表。

分析模块23，用于读取所述日志模块进行统计分析，并产生分析结果。

如图5所示，可按天统计出WEB APP在网络通信中连接的超时率，超时发生时的网络环境分布(WIFI、3G)；可按天统计出WEB APP在网络通信中超时率最高的通信地址/方法、受影响用户数；可按天统计出WEB APP在用户使用过程中，拉取失败率最高的图片、受影响用户数；可按天统计出WEB APP在用户使用过程中的javaScript异常次数、受影响用户数；等。

漏洞更新模块24，用于根据分析结果，产生漏洞更新数据。

发送模块25，用于发送所述漏洞更新数据至网页前端。

本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

实施例四

请参阅图6，所示为网页前端的异常处理方法、异常处理系统及异常处理服务器的时序示意图。

在步骤A中，异常处理系统收集网页前端的异常信息，并根据收集异常信息的渠道判断所述异常信息的异常类型。

其中所述异常类型，包括网络超时异常或/和脚本异常。

在步骤B中，异常处理系统根据所述异常类型获取异常关键字。

其中，所述异常关键字类型包括：超时地址或/和异常代码，其中所述超时地址对应所述网络超时异常，所述异常代码对应所述脚本异常。

在步骤C中，异常处理系统获取网页浏览器的通用信息。

所述通用信息包括：浏览器版本、单页应用程序的版本、网络状态、异常代码的调用栈、异常时用户访问的URL路径中的一个或多个的组合。

在步骤D中，异常处理系统将所述异常关键字与所述通用信息一并存储为异常信息块，并将所述异常信息块存储至本地存储器的异常列表中。

在步骤E中，异常处理系统将所述异常列表中的异常信息块上报至异常处理服务器。

在步骤F中，异常处理服务器接收模块接收来自于异常处理系统的异常列表，并将所述异常列表写入日志中。

在步骤G中，读取所述日志模块进行统计分析，并产生分析结果。

在步骤H中，根据分析结果，产生漏洞更新数据；以及

在步骤I中，将所述漏洞更新数据发送至网页前端。

在步骤J中，异常处理系统接收来自于异常处理服务器的漏洞更新数据，进行更新，其中所述漏洞更新数据是基于所述异常列表所产生的。

本发明通过多渠道获取异常信息，并与通用信息一并存储为异常信息块上传至服务器以产生漏洞更新数据，具有反馈快、代码占用空间较小、以及代码定位准确等优点。

可以理解的是：本文所使用的词语“优选的”意指用作实例、示例或例证。奉文描述为“优选的”任意方面或设计不必被解释为比其他方面或设计更有利。相反，词语“优选的”的使用旨在以具体方式提出概念。如本申请中所使用的术语“或”旨在意指包含的“或”而非排除的“或”。即，除非另外指定或从上下文中清楚，“X使用A或B”意指自然包括排列的任意一个。即，如果X使用A；X使用B；或X使用A和B二者，则“X使用A或B”在前述任一示例中得到满足。

而且，尽管已经相对于一个或多个实现方式示出并描述了本公开，但是本领域技术人员基于对本说明书和附图的阅读和理解将会想到等价变型和修改。本公开包括所有这样的修改和变型，并且仅由所附权利要求的范围限制。特别地关于由上述模块(例如元件、资源等)执行的各种功能，用于描述这样的模块的术语旨在对应于执行所述模块的指定功能(例如其在功能上是等价的)的任意模块(除非另外指示)，即使在结构上与执行本文所示的本公开的示范性实现方式中的功能的公开结构不等同。此外，尽管本公开的特定特征已经相对于若干实现方式中的仅一个被公开，但是这种特征可以与如可以对给定或特定应用而言是期望和有利的其他实现方式的一个或多个其他特征组合。而且，就术语“包括”、“具有”、“含有”或其变形被用在具体实施方式或权利要求中而言，这样的术语旨在以与术语“包含”相似的方式包括。

本文提供了实施例的各种操作。在一个实施例中，所述的一个或多个操作可以构成一个或多个计算机可读介质上存储的计算机可读指令，其在被服务器执行时将使得计算设备执行所述操作。描述一些或所有操作的顺序不应当被解释为暗示这些操作必需是顺序相关的。本领域技术人员将理解具有本说明书的益处的可替代的排序。

本发明实施例提供的网页前端的异常处理方法、异常处理系统及异常处理服务器属于同一构思，其具体实现过程详见说明书全文，此处不再赘述。

综上所述，虽然本发明已以优选实施例揭露如上，但上述优选实施例并非用以限制本发明，本领域的普通测试人员，在不脱离本发明的精神和范围内，均可作各种更动与润饰，因此本发明的保护范围以权利要求界定的范围为准。

Claims (16)

1.一种网页前端的异常处理方法，其特征在于，包括：

收集网页前端的异常信息，并根据收集的渠道判断异常类型；

根据所述异常类型获取异常关键字；

获取网页浏览器的通用信息；

将所述异常关键字与所述通用信息一并存储为异常信息块；以及

将所述异常信息块上报至异常处理服务器。

2.如权利要求1所述的异常处理方法，其特征在于，所述收集网页前端的异常信息，并根据收集的渠道判断异常类型的步骤具体包括：

通过网络底层组件和收集代码块作为所述收集的渠道，收集网页前端的异常信息；其中，

如果所述收集渠道是底层组件，则判断所述异常类型为网络超时异常；或

如果所述收集渠道是收集代码块，则判断所述异常类型为脚本异常。

3.如权利要求2所述的异常处理方法，其特征在于，在所述收集网页前端的异常信息，并根据收集的渠道判断异常类型的步骤之前，还包括步骤：

设定异常关键字类型，所述异常关键字类型包括：超时地址或/和异常代码，其中所述超时地址对应所述网络超时异常，所述异常代码对应所述脚本异常。

4.如权利要求1所述的异常处理方法，其特征在于，所述获取网页浏览器的通用信息的步骤中，所述通用信息包括：浏览器版本、单页应用程序的版本、网络状态、异常代码的调用栈、异常时用户访问的URL路径中的一个或多个的组合。

5.如权利要求1所述的异常处理方法，其特征在于，在所述将所述异常关键字与所述通用信息一并存储为异常信息块的步骤之后，还包括：

将所述异常信息块存储至本地存储器的异常列表中。

6.如权利要求5所述的异常处理方法，其特征在于，所述将所述异常信息块上报至异常处理服务器的步骤具体包括：

将所述网页前端进行重启；

重启后，将所述本地存储器的异常列表上传至异常处理服务器；

判断是否上传成功；其中，

若上传成功，则清空所述异常列表。

7.如权利要求6所述的异常处理方法，其特征在于，在所述将所述异常信息块存储至本地存储器的异常列表中的步骤中，还包括：

读取所述本地存储器中的异常列表；

判断所述异常信息块的个数是否超过了预设阈值；其中，

如果超过所述预设阈值，则从所述存储列表的队尾开始进行清除；或

如果没有超过所述预设阈值，则将异常信息存入所述存储列表。

8.如权利要求6所述的异常处理方法，其特征在于，所述将所述本地存储器的异常列表上传至异常处理服务器的步骤之后，还包括：

接收来自于异常处理服务器的漏洞更新数据，进行更新，其中所述漏洞更新数据是基于所述异常列表所产生的。

9.一种网页前端的异常处理系统，其特征在于，包括：

收集模块，用于收集网页前端的异常信息，并根据收集的渠道判断异常类型；

获取模块，用于根据所述异常类型获取异常关键字，以及获取网页浏览器的通用信息；

存储器，包括用于存储异常信息块的异常列表，其中，所述异常信息块包括所述异常关键字与所述通用信息；以及

上传模块，用于将所述异常信息块上报至异常处理服务器。

10.如权利要求9所述的异常处理系统，其特征在于，所述收集模块包括：

网络底层组件，用于收集网页前端的异常信息，并标注异常类型为网络超时异常；

收集代码块，用于收集网页前端的异常信息，并标注异常类型为脚本异常。

11.如权利要求10所述的异常处理系统，其特征在于，还包括配置模块，用于设定异常关键字类型，所述异常关键字类型包括：超时地址或/和异常代码，其中所述超时地址对应所述网络超时异常，所述异常代码对应所述脚本异常。

12.如权利要求9所述的异常处理系统，其特征在于，所述获取模块所获取的通用信息包括：浏览器版本、单页应用程序的版本、网络状态、异常代码的调用栈、异常时用户访问的URL路径中的一个或多个的组合。

13.如权利要求9所述的异常处理系统，其特征在于，所述上传模块具体包括：

判断子模块，用于判断所述网页前端是否重启，并当重启时发生重启通知；

上传子模块，用于接收所述重启通知，将所述存储器的异常列表上传至异常处理服务器；以及

清空子模块，用于判断是否上传成功，并当上传成功时，清空所述异常列表。

14.如权利要求13所述的异常处理系统，其特征在于，存储器还用于在存入异常信息前，判断所述异常信息块的个数是否超过了预设阈值；其中，

如果超过所述预设阈值，则从所述存储列表的队尾开始进行清除；或

如果没有超过所述预设阈值，则将异常信息存入所述存储列表。

15.如权利要求13所述的异常处理系统，其特征在于，还包括更新模块，用于接收所述漏洞更新数据，并进行更新。

16.一种异常处理服务器，其特征在于，包括：

接收模块，用于接收来自于异常处理系统的异常列表；

日志模块，用于写入所述接收模块所接收的异常列表；

分析模块，用于读取所述日志模块进行统计分析，并产生分析结果；

漏洞更新模块，用于根据分析结果，产生漏洞更新数据；以及

发送模块，用于发送所述漏洞更新数据至网页前端。