CN115766492A - 一种前端监控方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种前端监控方法、装置、设备及存储介质，涉及前端开发技术领域，包括：监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则，并将当前采集到的前端数据保存至本地预设缓存；基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。本申请先将前端数据缓存至本地以便在网络状况差时定时批量上报数据，避免了由于网络状态不佳导致数据不完整或数据采集失败等情况。

Description

一种前端监控方法、装置、设备及存储介质

技术领域

本发明涉及前端开发技术领域，特别涉及一种前端监控方法、装置、设备及存储介质。

背景技术

前端监控是相对于后端监控提出的，是指从用户端的角度来检测系统的可用性。随着用户端复杂度上升和精细化运营的需要，更加重视前端监控系统的建设；做好前端监控，就能补全质量保障体系的缺失环节，避免只有后端监控导致的幸存者偏误，具体突显在用户线上访问异常无法感知，解决问题全靠经验、人肉和用户主动反馈。

现有技术方案一般都是重点监控页面的加载过程和运行时状态，同时将页面加载性能、运行时异常以及API(Application Programming Interface，即应用程序编程接口)调用状态和耗时等数据，上报到日志服务器。之后借助方案所有方提供的海量实时日志分析和处理服务，对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示，帮助其及时发现并诊断问题。但目前现有的前端监控技术只支持单一实时上报，并且不适用于有安全敏感性要求的自建数据采集系统，当遇到网络状况不佳的情况时，无法保证采集数据的完整性和成功率。

发明内容

有鉴于此，本发明的目的在于提供一种前端监控方法、装置、设备及存储介质，能够在网络状况满足一定条件的情况下采取定时批量上报规则来进行数据上报，避免了在网络状况不好的情况下依然采用对网络性能要求较高的实时上报方式而引起数据上报失败的问题。其具体方案如下：

第一方面，本申请公开了一种前端监控方法，应用于前端，包括：

监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；

如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则，并将当前采集到的前端数据保存至本地预设缓存；

基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

可选的，所述监测当前网络状况，包括：

监测当前网络峰值流量、当前网络稳定性和浏览器流畅度中的任意一种或几种的组合，以得到当前网络状况。

可选的，所述判断所述当前网络状况是否满足预设状况条件之后，还包括：

如果所述当前网络状况不满足所述预设状况条件，则将前端数据上报规则配置为实时上报规则，并将当前采集到的前端数据实时上报至所述预设后端采集接口。

可选的，将当前采集到的前端数据上报至所述预设后端采集接口，包括：

通过XMLHttpRequest请求将当前采集到的前端数据同步上报至所述预设后端采集接口；

或，通过利用navigator.sendBeacon()方法将当前采集到的前端数据异步上报至所述预设后端采集接口。

可选的，所述方法还包括：

获取当前用户的用户信息以得到待鉴权用户信息，并通过预设鉴权开关对所述待鉴权用户信息进行鉴权，以确定所述当前用户是否为合法用户；

若所述当前用户为合法用户，则启动数据采集服务，并通过所述数据采集服务进行前端数据的采集。

可选的，所述通过所述数据采集服务进行前端数据的采集，包括：

从所述预设鉴权开关中提取预先配置的目标数据类型的指示字段；所述目标数据类型包括用户行为数据、浏览器页面性能数据、网页异常数据中的任意一种或几种的组合；所述网页异常数据的指示字段为基于针对所述网页异常数据的过滤规则构造的指示字段；

通过所述数据采集服务并利用所述指示字段采集相应类型的前端数据。

可选的，所述方法还包括：

在进行前端数据的采集的过程中，监测当前是否满足预设紧急停止条件；

若监测到当前满足所述预设紧急停止条件，则从预设接口中调取出预设控制开关，并将所述预设控制开关中的预设控制参数配置为用于控制所述前端停止采集所述前端数据的目标参数值。

第二方面，本申请公开了一种前端监控装置，应用于前端，包括：

网络状况监控模块，用于监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；

上报规则配置模块，用于如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则；

前端数据保存模块，用于将当前采集到的前端数据保存至本地预设缓存；

前端数据上报模块，用于基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

第三方面，本申请公开了一种电子设备，包括：

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序以实现前述的前端监控方法。

第四方面，本申请公开了一种计算机可读存储介质，用于保存计算机程序，所述计算机程序被处理器执行时实现前述的前端监控方法。

可见，本申请首先判断当前网络状况是否满足预设状况条件，若满足，则将前端数据上报规则配置为定时批量上报规则，然后将当前采集到的前端数据保存至本地预设缓存中，最后基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。由此可知，本申请基于当前网络状况配置当前的前端数据上报规则，当不满足预设状况条件时，则可以将当前采集到的前端数据先缓存至本地，然后基于定时批量上报规则将所述前端数据上报至预设后端采集接口，这样一来，可以有效基于当前网络状况确定上报方式为定时批量上报，避免了在网络状况不佳的情况下依然采用对网络性能要求较高的实时上报方式而引起数据上报失败的问题，提高了在网络状态不佳时数据采集的成功率，通过本地缓存技术还可以保证前端数据的完整性，大幅度提高前端监控中数据采样的准确性。

附图说明

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

图1为本申请公开的一种前端监控方法流程图；

图2为本申请公开的一种数据采集总体架构设计关系图；

图3为本申请公开的一种业务数据采集逻辑时序图；

图4为本申请公开的一种SDK技术实现类结构图；

图5为本申请公开的一种具体的前端监控方法流程图；

图6为本申请公开的一种具体的前端监控方法流程图；

图7为本申请公开的一种数据采集总体逻辑时序图；

图8为本申请公开的一种数据采集细分策略流程图；

图9为本申请公开的一种前端监控装置结构示意图；

图10为本申请公开的一种电子设备结构图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

现有技术方案一般都是重点监控页面的加载过程和运行时状态，同时将页面加载性能、运行时异常以及API调用状态和耗时等数据，上报到日志服务器。之后借助方案所有方提供的海量实时日志分析和处理服务，对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示，帮助其及时发现并诊断问题。但目前现有的前端监控技术只支持单一实时上报，系统的配置化和定制化不够灵活，浏览器环境向下兼容性不好，IE浏览器兼容性差，并且不适用于有安全敏感性要求的自建数据采集系统。

参见图1所示，本申请实施例公开了一种前端监控方法，应用于前端，包括：

步骤S11：监测当前网络状况，判断所述当前网络状况是否满足预设状况条件。

本实施例中，监测当前时刻的网络状况，并判断所述当前网络状况是否满足预设状况条件，其中当前网络状况的参数超出相应的预设合理范围，则判定当前网络状况满足预设状况条件，此时表明当前的网络状况相对较差。用户可以基于计算机设备以及浏览器配置等信息对所述预设状况条件进行自行配置，这样一来，可以使本申请的前端监控方法更加贴合每个设备帮助每个用户执行前端监控，使本方案的适配度更高。

步骤S12：如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则，并将当前采集到的前端数据保存至本地预设缓存。

本实施例中，当获取到所述当前网络状况并进行判断后，若所述当前网络状况满足所述预设状况条件时，则将前端数据上报规则配置为定时批量上报规则，并将当前采集到的前端数据通过浏览器自身的本地缓存技术(LocalStorage/Cookie)保存至本地预设缓存中，以便于当网络状况恢复正常时，将所述本地预设缓存中的所述前端数据进行上报。这样一来，通过设置实时批量上报规则，可以先将采集到的所述前端数据缓存至本地，这样可以避免在网络状况满足条件时利用实时上报的方式导致数据不完整的情况发生，有效提高数据采样的成功率和完整度。

步骤S13：基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

本实施例中，当网络状况恢复正常时，可以基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。其中，所述定时批量上报控制参数包括上报延迟时长和批次上报数据量，所述上报延迟时长为每两次上报操作之间的时间间隔，所述批次上报数据量为每一批次上报时上报的具体数据数量。这样一来，通过预设的上报延迟时长和批次上报数据量定时将本地的缓存数据上报至预设后端采集接口，可以实现稳定数据上报的过程，避免由于网络状况不佳导致数据采集和上报成功率不高的情况，保证数据采集和上报的准确率和完成度。

本实施例中，当所述前端将前端数据上报至预设后端采集接口之后，所述预设后端采集接口会按照预设数据模板将所述前端数据进行聚合处理并生成响应的前端日志文件存储至本地，然后结合数据推送工具监听到增量变化后再异步将所述前端日志文件推送到运维日志数据中心，最后利用有效数据进行可视化展示和分析。并且本方案可以实现用户自定义数据埋点，用户可以在任意位置开始执行数据采集过程，还可以自定义设置采集哪些具体数据，这样一来，可以更好的支持用户基于自身需求进行自定义配置，并且可以基于采集到的数据匹配更合适的数据上报方式，实现灵活上报数据结构，大大提升了用户体验，并在保证数据采集成功率的同时可以使数据采集和上报的过程更加灵活自由。参考图2可知，在前端中基于埋点SDK(Software Development Kit，即软件开发工具包)配置采集端信息并采集页面访问、点击事件等前端数据，将采集到的所述前端数据发送至后端中的采集接口，以便于后端中的日志框架后端通过采集接口获取到所述前端数据后调用采集服务生成相应的前端日志文件，同时应用后端将后端数据生成相应的后端日志文件，并且通过FileBeat(文件推送工具)将所述前端日志文件和所述后端日志文件推送至ELK(Elasticsearch、Logstash、Kibana，即运维日志数据中心)日志框架中的Kafka(消息队列服务工具)中，然后Kafka将获取到的日志文件通过Logstash(服务器端数据处理管道)将处理好的有效数据推送至Elasticsearch(日志搜索和分析框架)中，以便Kibana获取到所述有效数据并对日志进行展示统计和数据可视化，最后ELK通过定时任务、定时分析、统计日志信息等过程将统计信息保存至日志分析平台中的日志分析数据库中，这时用户即可通过日志分析平台查询日志分析库中的历史日志统计信息。

参考图3可知，在初始化SDK之前需要创建Yata实例，并挂载到Window对象上，接着调用Yata实例中的init方法来初始化SDK，在实例init方法执行的过程中主要负责业务数据采集和异常采集，其中业务数据采集的逻辑为基于传入的init方法中的Config对象，初始化或覆盖实例中的一些属性，在业务数据采集的过程中，最核心的操作为初始化request_batchers属性，该属性是一个打包发送器对象，其中分别定义了异常采样和业务采集的打包发送对象，所述打包发送对象中封装了数据缓存、数据上报、异常重试等逻辑。异常采集的逻辑包括重写XMLHttpRequest Web API中的open和send方法和监听错误等。

参考图4可知，为SDK技术的实现类结构图，其中Core为整个SDK技术的核心类，用于调用Config、RequestBatcher、Persistence、Profle等类中提前编译好的若干种方法；Utils为工具类，主要为核心类Core提供了一些使用方法和数据结构，并且在工具类Utils中调用了Cookie和Info；Cookie为SDK技术中用于管理Cookie的属性和方法；Info为信息类，用于描述一个类或一个事物的类，在本方案中用于描述浏览器等信息；PropertyFilter为特性过滤器类，主要用于异常数据过滤的过程；Exception为异常类，用于捕捉前端页面中出现的异常情况；Config为配置类，用于设置所有配置信息；Persistence为持久化用于定时批量上报时存储前端数据；Profile为用户信息类，用于对用户进行描述的数据，包括用户的信息和配置；RequestBatcher为请求批处理类，用于在一次请求时间内，对额外的相同请求共同处理，在本方案中主要用于在定时批量上报时对前端数据执行批量上报；RequestQueue为请求队列类，主要用于连接请求与响应，将收到的请求分发至缓存和进程以便于对请求进行响应，可以理解的时，RequestBatcher请求批处理类与RequestQueue请求队列类是相互依存的，RequestQueue接收到请求后分发至相应进程，RequestBatcher在接收到相同请求时共同对请求进行相应。

可见，本实施例首先判断当前网络状况是否满足预设状况条件，若满足，则将前端数据上报规则配置为定时批量上报规则，然后将当前采集到的前端数据保存至本地预设缓存中，最后基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。由此可知，本申请基于当前网络状况配置当前的前端数据上报规则，当不满足预设状况条件时，则可以将当前采集到的前端数据先缓存至本地，然后基于定时批量上报规则将所述前端数据上报至预设后端采集接口，这样一来，可以有效基于当前网络状况确定上报方式为定时批量上报，避免了在网络状况不佳的情况下依然采用对网络性能要求较高的实时上报方式而引起数据上报失败的问题，提高了在网络状态不佳时数据采集的成功率，通过本地缓存技术还可以保证前端数据的完整性，大幅度提高前端监控中数据采样的准确性。

基于上述实施例可知，本申请可以基于网络状况配置上报规则为定时批量上报，并将前端数据存储至本地预设缓存中，以便在网络状况良好的情况下定时批量地将所述前端数据上传至预设后端采集接口，当然除了定时批量上报的方式，在网络状况良好的情况下还可以通过实时上报地方式对前端数据进行上报，为此下面将对实时上报过程进行详细地描述。参见图5所示，本申请实施例公开了一种具体的前端监控方法，应用于前端，包括：

步骤S21：监测当前网络峰值流量、当前网络稳定性和浏览器流畅度中的任意一种或几种的组合，以得到当前网络状况，并判断所述当前网络状况是否满足预设状况条件。

本实施例中，通过监测当前网络峰值流量、当前网络稳定性和浏览器流畅度中的任意一种或几种的组合，以得到当前网络状况，并判断所述当前网络状况是否满足预设状况条件。其中，所述网络峰值流量为当前网页的最大访问流量。所述当前网络稳定性可以基于当前的网络丢包率、当前网络速度的变化情况等方面来进行确定。所述浏览器流畅度用于反映当前浏览器的卡顿情况，在一种具体实施方式中可以通过监测浏览器中网页的实时帧率来确定浏览器的流畅度。相应的，如果当前网络峰值流量超过预设网络流量阈值、当前网络稳定性低于预设稳定性阈值、当前浏览器流畅度低于预设流畅度阈值等，则可以判定当前网络状况满足预设状况条件，也即表明当前的网络状况相对较差。

步骤S22：如果所述当前网络状况不满足所述预设状况条件，则将前端数据上报规则配置为实时上报规则，并将当前采集到的前端数据实时上报至预设后端采集接口。

本实施例中，若所述当前网络状况不满足所述预设状况条件，则可以将前端数据上报规则配置为实时上报规则，并将当前采集到的前端数据实时上报至预设后端采集接口。这样一来，在网络状况处于正常状态时，可以通过实时上报将所述前端数据上报至所述预设后端采集接口，这样用户可以及时通过前端日志信息解决前端出现的异常问题，达到实时前端监控的效果。可以理解的是，若当前网络状况不满足所述预设状况条件时，即表明当前网络状况正常，也可以选择将前端数据上报规则配置为定时批量上报规则。

在一种具体的实施例中，将当前采集到的前端数据上报至所述预设后端采集接口，可以包括：通过XMLHttpRequest请求将当前采集到的前端数据同步上报至所述预设后端采集接口，即通过监听前端页面的unload或beforeunload事件，通过同步的XMLHttpRequest请求将前端数据上报，这样一来，通过同步的方式将前端数据进行上报，可以保证数据的完成度，避免不可掌控的意外情况发生。同步上报的伪代码演示如下：

在另一种具体的实施例中，将当前采集到的前端数据上报至所述预设后端采集接口，可以包括：通过利用navigator.sendBeacon()方法将当前采集到的前端数据异步上报至所述预设后端采集接口。通过使用navigator.sendBeacon()方法可以在不延迟页面的unload事件的情况下，异步的向接口发送数据，将请求与前端页面线程脱钩，作为浏览器进程的任务，可以保证将数据发出并且不拖延unload事件，这样一来，可以避免同步上报的过程中由于页面已经卸载导致数据发送取消的情况出现，利用多进程异步执行上报过程，提高上报效率的同时不会对用户的使用体验造成影响。并且，将同步上报与异步上报的方式相结合可以解决不同浏览器的兼容性问题，除了Safari(苹果浏览器)、Firefox、Chrome、Microsoft Edge等常见浏览器之外，对于IE8及以上浏览器也可以完美兼容，还可以支持错误异常的采集。可以理解的是，无论是实时上报还是定时批量上报都可以使用同步上报方式或异步上报方式。异步上报的伪代码演示如下：

可见，本实施例中，在网络状态正常的情况下，可以将前端数据上报规则配置为实时上报，并可以分别利用XMLHttpRequest请求或navigator.sendBeacon()方法将当前采集到的前端数据实时同步或异步上报至预设后端采集接口，这样一来，通过实时上报的方式可以帮助用户及时解决前端页面出现的异常情况，并且将同步上报与异步上报相结合可以解决向下低版本浏览器的兼容性问题，支持Safari(苹果浏览器)、Firefox、Chrome、Microsoft Edge等常见浏览器的同时，对于IE8及以上浏览器也可以完美兼容，还可以支持浏览器中错误异常的采集，有效提高前端监控的效果。

基于上述实施例可知，除了定时批量上报还可以利用实时上报方式将前端数据同步或异步上报至预设后端采集接口，当前在执行上报操作之前，需要执行前端页面数据的采集过程，下面将对数据采集过程进行详细描述。参见图6所示，本申请实施例公开了一种具体的前端监控方法，应用于前端，包括：

步骤S31：获取当前用户的用户信息以得到待鉴权用户信息，并通过预设鉴权开关对所述待鉴权用户信息进行鉴权，以确定所述当前用户是否为合法用户。

本实施例中，在对前端数据进行采集之前，需要获取当前用户的用户信息以得到待鉴权用户信息，并通过预设鉴权开关对所述待鉴权用户信息进行鉴权操作，以确定所述当前用户是否为合法用户。这样一来，通过判断对当前用户信息进行鉴权操作，可以避免不法人员获取到前端日志信息，防止用户的日志信息泄露而导致用户的安全受到侵害。

本实施例通过预设鉴权开关来进行用户合法性鉴别，以便在用户合法的情况下启动接下来的数据采集服务，由此可见，本实施例中的预设鉴权开关相当于用于启动数据采集服务的总开关。

步骤S32：若所述当前用户为合法用户，则启动数据采集服务，并从所述预设鉴权开关中提取预先配置的目标数据类型的指示字段；所述目标数据类型包括用户行为数据、浏览器页面性能数据、网页异常数据中的任意一种或几种的组合；所述网页异常数据的指示字段为基于针对所述网页异常数据的过滤规则构造的指示字段。

本实施例中，若所述当前用户被判定为合法用户，则启动数据采集服务，并从预设鉴权开关中提取预先配置的目标数据类型的指示字段。其中所述目标数据类型包括但不限于用户行为数据、浏览器页面性能数据、网页异常数据中的任意一种或几种的组合，所述用户行为数据的指示字段包括但不限于如登录/非登录的用户ID、IP地址等基本用户信息、访问用户的PV(Page View，即页面浏览量)和UV(Unique visitor，即网站独立访客)等访问信息；所述浏览器页面性能数据的指示字段包括但不限于浏览器类型和版本、浏览器白屏时间、首次渲染时间、脚本加载时间、接口相应时间等；所述网页异常数据的指示字段包括但不限于网页中使用的所有脚本资源加载错误、页面交互运行报错、后端API请求超时、响应数据JSON(JavaScript Object Notation，即JS对象简谱)语法错误、参数交互错误等，当然除了上述的数据类型之外，还可以考虑操作系统类型和版本等设备信息。需要指出的是，所述网页异常数据的指示字段为基于针对所述网页异常数据的过滤规则构造的指示字段，即当允许采集网页异常数据时，基于预设的过滤规则将网页异常数据的指示字段进行过滤，以过滤掉不需要的网页异常数据的指示字段并得到有效的指示字段，这样可以减少内存资源的占用。当然，在需要采集尽可能全面的异常数据的情况下，本实施例也可以不对网页异常数据的指示字段进行过滤，也即意味着此时可以不设置上述过滤规则。可以理解的是，所述预先配置的目标数据类型的指示字段可以为系统默认的配置或在开始数据采集服务前基于预设配置接口进行选择配置的，例如可以在数据采集之前通过服务端动态下发不同类型指示字段的方式来进行指示字段的配置，以便于用户可以基于需求个性化配置采集的数据类型，从而有利于获取到利用价值更高的数据。

步骤S33：通过所述数据采集服务并利用所述指示字段采集相应类型的前端数据。

本实施例中，当提取到所述目标数据类型的指示字段后，通过所述数据采集服务利用所述指示字段采集响应类型的前端数据，这样一来，相当于在总开关的基础上基于数据类型细分了更具体的用于基于各自指示字段来控制相应数据采集的子开关。本实施例将前端配置解耦并支持服务端的动态下发机制，可以更加方面快捷地调控采集策略，通过接口服务配置化使用户得到更有效的数据的同时，还可以保障数据采集服务的稳定性，减少内存资源的占用。

本实施例中，还可以包括：在进行前端数据的采集的过程中，监测当前是否满足预设紧急停止条件；若监测到当前满足所述预设紧急停止条件，则从预设接口中调取出预设控制开关，并将所述预设控制开关中的预设控制参数配置为用于控制所述前端停止采集所述前端数据的目标参数值。即，在进行数据采集的过程中，当监测到当前满足所述预设紧急停止条件，则从预设接口中调取出预设控制开关，并将所述预设控制开关中的预设控制参数配置为用于控制所述前端停止采集所述前端数据的目标参数值，所述目标参数值为NO，若将预设控制参数配置为YES，则表明继续采集前端数据。其中，所述预设紧急条件包括但不限于当前用户由于某些原因由合法用户变为非法用户等。这样一来，通过增加紧急停止数据采集的控制开关，可以在遇到紧急状况时控制停止数据采集操作，起到紧急制动的作用，保证用户的信息安全不受到侵害。

本实施例中，参考图7所示，在Web(World Wide Web，即全球广域网)客户浏览器环境植入采集SDK脚本资源，通过外链方式引入JavaScript脚本文件，在监听JavaScript运行时通过异步请求进行数据采集过程。在应用内联脚本执行过程中主要负责重写XMLHttpRequest请求对象中的open()和send()方法来完成对Ajax异步请求错误的捕获，另外借助浏览器的Window.onerror函数捕获错误堆栈信息，并且监听浏览器全局error事件，如果触发该事件，则将错误信息缓存起来，以便在后面的SDK脚本加载完成后发送该错误报告；在SDK脚本执行的过程中主要负责监听JS(JavaScript)运行时执行错误、监听JSPromise unhandled错误、监听Ajax(Asynchronous JavaScript And XML And HTML，即异步JavaScript和XML)请求错误、监听资源加载错误、监听控制台error、监听控制台warming。一般情况JavaScript运行时错误捕获方式代码演示如下：

下面将通过举例的方式对数据采集过程进行描述，参考图8所述，首先判断是否启动数据采集，若否，则禁止采集数据，若是，则判断是否允许采集用户行为数据(allowDcCollection)，若否，则禁止采集所述用户行为数据，若是，则采集用户行为数据；同时判断是否允许采集页面异常(allowErrorCollection)，若否，则禁止采集所述页面异常数据，若是，则判断是否过滤异常类型(errorTypeFilterList)，若否，则采集所有页面异常数据，若是，则基于过滤规则采集页面异常数据；判断是否允许采集页面性能数据(allowPerfCollection)，若否，则禁止采集页面性能数据，若是则采集页面性能数据。

可见，在本实施例中首先获取当前用户的用户信息并进行鉴权操作，以确定所述当前用户是否合法，若时，则启动数据采集服务，并从所述预设鉴权开关中提取预先配置的目标数据类型的指示字段，然后通过所述数据采集服务利用所述指示字段采集相应类型的前端数据，这样一来，通过鉴权开关配置多个指示字段可以使数据采集的灵活度更高，利用服务端动态下发机制便捷控制采集策略，保障采集服务的稳定性的同时减少了内存资源的占用。

参考图9所述，本申请实施例还相应公开了一种前端监控装置，应用于前端，包括：

网络状况监控模块11，用于监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；

上报规则配置模块12，用于如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则；

前端数据保存模块13，用于将当前采集到的前端数据保存至本地预设缓存；

前端数据上报模块14，用于基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

可见，本实施例首先判断当前网络状况是否满足预设状况条件，若满足，则将前端数据上报规则配置为定时批量上报规则，然后将当前采集到的前端数据保存至本地预设缓存中，最后基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。由此可知，本申请基于当前网络状况配置当前的前端数据上报规则，当不满足预设状况条件时，则可以将当前采集到的前端数据先缓存至本地，然后基于定时批量上报规则将所述前端数据上报至预设后端采集接口，这样一来，可以有效基于当前网络状况确定上报方式为定时批量上报，避免了在网络状况不佳的情况下依然采用对网络性能要求较高的实时上报方式而引起数据上报失败的问题，提高了在网络状态不佳时数据采集的成功率，通过本地缓存技术还可以保证前端数据的完整性，大幅度提高前端监控中数据采样的准确性。

在一些具体的实施例中，所述网络状况监控模块11，具体可以用于监测当前网络峰值流量、当前网络稳定性和浏览器流畅度中的任意一种或几种的组合，以得到当前网络状况。

在一些具体的实施例中，所述前端监控装置，还可以包括：

定时上报模块，用于如果所述当前网络状况不满足所述预设状况条件，则将前端数据上报规则配置为实时上报规则，并将当前采集到的前端数据实时上报至所述预设后端采集接口。

在一些具体的实施例中，所述前端数据上报模块14，具体可以包括：

同步上报单元，用于通过XMLHttpRequest请求将当前采集到的前端数据同步上报至所述预设后端采集接口；

异步上报单元，用于通过利用navigator.sendBeacon()方法将当前采集到的前端数据异步上报至所述预设后端采集接口。

在一些具体的实施例中，所述前端监控装置，还可以包括：

信息鉴权模块，用于获取当前用户的用户信息以得到待鉴权用户信息，并通过预设鉴权开关对所述待鉴权用户信息进行鉴权，以确定所述当前用户是否为合法用户；

数据采集模块，用于若所述当前用户为合法用户，则启动数据采集服务，并通过所述数据采集服务进行前端数据的采集。

在一些具体的实施例中，所述数据采集模块，具体可以包括：

字段提取单元，用于从所述预设鉴权开关中提取预先配置的目标数据类型的指示字段；所述目标数据类型包括用户行为数据、浏览器页面性能数据、网页异常数据中的任意一种或几种的组合；所述网页异常数据的指示字段为基于针对所述网页异常数据的过滤规则构造的指示字段；

数据采集单元，用于通过所述数据采集服务并利用所述指示字段采集相应类型的前端数据。

在一些具体的实施例中，所述前端监控装置，还可以包括：

条件判断模块，用于在进行前端数据的采集的过程中，监测当前是否满足预设紧急停止条件；

开关配置模块，用于若监测到当前满足所述预设紧急停止条件，则从预设接口中调取出预设控制开关，并将所述预设控制开关中的预设控制参数配置为用于控制所述前端停止采集所述前端数据的目标参数值。

进一步的，本申请实施例还公开了一种电子设备，图10是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本申请的使用范围的任何限制。

图10为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的前端监控方法中的相关步骤。另外，本实施例中的电子设备20具体可以为电子计算机。

本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。

另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222等，存储方式可以是短暂存储或者永久存储。

其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的前端监控方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。

进一步的，本申请还公开了一种计算机可读存储介质，用于存储计算机程序；其中，所述计算机程序被处理器执行时实现前述公开的前端监控方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上对本申请所提供的技术方案进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种前端监控方法，其特征在于，应用于前端，包括：

监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；

如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则，并将当前采集到的前端数据保存至本地预设缓存；

基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

2.根据权利要求1所述的前端监控方法，其特征在于，所述监测当前网络状况，包括：

监测当前网络峰值流量、当前网络稳定性和浏览器流畅度中的任意一种或几种的组合，以得到当前网络状况。

3.根据权利要求1所述的前端监控方法，其特征在于，所述判断所述当前网络状况是否满足预设状况条件之后，还包括：

如果所述当前网络状况不满足所述预设状况条件，则将前端数据上报规则配置为实时上报规则，并将当前采集到的前端数据实时上报至所述预设后端采集接口。

4.根据权利要求3所述的前端监控方法，其特征在于，将当前采集到的前端数据上报至所述预设后端采集接口，包括：

通过XMLHttpRequest请求将当前采集到的前端数据同步上报至所述预设后端采集接口；

或，通过利用navigator.sendBeacon()方法将当前采集到的前端数据异步上报至所述预设后端采集接口。

5.根据权利要求1所述的前端监控方法，其特征在于，还包括：

获取当前用户的用户信息以得到待鉴权用户信息，并通过预设鉴权开关对所述待鉴权用户信息进行鉴权，以确定所述当前用户是否为合法用户；

若所述当前用户为合法用户，则启动数据采集服务，并通过所述数据采集服务进行前端数据的采集。

6.根据权利要求5所述的前端监控方法，其特征在于，所述通过所述数据采集服务进行前端数据的采集，包括：

从所述预设鉴权开关中提取预先配置的目标数据类型的指示字段；所述目标数据类型包括用户行为数据、浏览器页面性能数据、网页异常数据中的任意一种或几种的组合；所述网页异常数据的指示字段为基于针对所述网页异常数据的过滤规则构造的指示字段；

通过所述数据采集服务并利用所述指示字段采集相应类型的前端数据。

7.根据权利要求1至6任一项所述的前端监控方法，其特征在于，还包括：

在进行前端数据的采集的过程中，监测当前是否满足预设紧急停止条件；

若监测到当前满足所述预设紧急停止条件，则从预设接口中调取出预设控制开关，并将所述预设控制开关中的预设控制参数配置为用于控制所述前端停止采集所述前端数据的目标参数值。

8.一种前端监控装置，其特征在于，应用于前端，包括：

网络状况监控模块，用于监测当前网络状况，判断所述当前网络状况是否满足预设状况条件；

上报规则配置模块，用于如果所述当前网络状况满足所述预设状况条件，则将前端数据上报规则配置为定时批量上报规则；

前端数据保存模块，用于将当前采集到的前端数据保存至本地预设缓存；

前端数据上报模块，用于基于所述定时批量上报规则中携带的定时批量上报控制参数，定时将所述本地预设缓存中的还未上报的所述前端数据批量上报至预设后端采集接口，以便所述预设后端采集接口基于接收到的所述前端数据生成相应的前端日志文件。

9.一种电子设备，其特征在于，包括：

存储器，用于保存计算机程序；

处理器，用于执行所述计算机程序以实现如权利要求1至7任一项所述的前端监控方法。

10.一种计算机可读存储介质，其特征在于，用于保存计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的前端监控方法。

Images