CN112749059A - 前端异常监控的方法、装置及系统 - Google Patents

Abstract

本申请公开了一种前端异常监控的方法、装置及系统，本申请方法包括每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行；在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；当监听到所述预设事件触发后，捕获异常信息；通过劫持全局console.error方法，收集所有捕获的异常信息；将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。本申请是为了使在线上项目发生异常的时候能够快速定位问题并解决。

Description

前端异常监控的方法、装置及系统

技术领域

本申请涉及应用程序开发领域，具体而言，涉及一种前端异常监控的方法、装置及系统。

背景技术

应用程序的项目代码的开发通常分为前端开发和后台开发，项目代码开发完成后需要进行发布前的测试，测试通过后再发布到生产环境。比如对于前端开发，当项目代码通过测试之后会发布到生产环境中。而项目代码的html文件的运行环境通常是各种的webview和各种浏览器。由于手机操作系统的不同、手机厂商的不同、手机操作系统版本的不同都会造成前端项目在特定环境特定机型上存在兼容性问题，从而导致运行的html文件中代码异常或直接报错影响用户操作流程和体验。因此亟需提出一种前端异常监控方式，以在线上项目发生异常的时候快速定位问题并解决。

发明内容

本申请的主要目的在于提供一种前端异常监控的方法、装置及系统，为了使在线上项目发生异常的时候能够快速定位问题并解决。

为了实现上述目的，根据本申请的第一方面，提供了一种前端异常监控的方法。

根据本申请的前端异常监控的方法包括：

每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；

在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；

当监听到所述预设事件触发后，捕获异常信息；

通过劫持全局console.error方法，收集所有捕获的异常信息；

将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器。

可选的，所述插件为基于webpack的插件，异常监控工具包是打包时通过插件自动引入到页面代码文件中的，包括：

根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。

可选的，所述异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息包括：

至少获取页面代码文件对应的项目的版本信息；

至少获取加载环境的操作系统类型、用户ID、设备标识信息。

可选的，所述监听预设事件的触发情况包括：

监听以下至少一种事件的触发情况：onerror事件、unhandledrejection事件。

可选的，所述将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器包括：

将捕获的异常信息通过img标签的src属性进行GET请求的方式上报给日志服务器；或者，

通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。

可选的，所述异常信息还包括跨域异常，所述方法还包括：

在页面中属于其他域名资源的js文件中添加允许跨域的属性。

为了实现上述目的，根据本申请的第二方面，提供了另一种前端异常监控的装置。

根据本申请的前端异常监控的装置包括：

解析执行模块，用于每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；

监听模块，用于在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；

捕获模块，用于当监听到所述预设事件触发后，捕获异常信息；

收集模块，用于通过劫持全局console.error方法，收集所有捕获的异常信息；

上报模块，用于将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器。

可选的，所述插件为基于webpack的插件，所述装置还包括：

引入模块，用于根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。

可选的，所述监听模块还包括：

第一获取单元，用于至少获取页面代码文件对应的项目的版本信息；

第二获取单元，用于至少获取加载环境的操作系统类型、用户ID、设备标识信息。

可选的，所述监听模块还包括：

事件监听单元，用于监听以下至少一种事件的触发情况：onerror事件、unhandledrejection事件。

可选的，所述上报模块还包括：

第一上报单元，用于将捕获的异常信息通过img标签的src属性进行GET请求的方式上报给日志服务器；

第二上报单元，用于通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。

可选的，所述异常信息还包括跨域异常，所述装置还包括：

添加模块，用于在页面中属于其他域名资源的js文件中添加允许跨域的属性。

为了实现上述目的，根据本申请的第三方面，提供了一种前端异常监控的系统，所述系统包括：

前端，包括运行在浏览器中的页面以及用于捕获页面运行中的异常信息的异常监控工具包，页面被浏览器加载时，首先将异常监控工具包加载运行；在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；当监听到所述预设事件触发后，捕获异常信息；通过劫持全局console.error方法，收集所有捕获的异常信息；将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器；

日志服务器，用于接收异常监控工具包上报的异常信息；

监控平台，用于接收异常信息的查询请求，根据查询请求从所述日志服务器中获取异常信息对应的文件名，并根据文件名对应的sourcemap文件定位报错源代码的位置。

为了实现上述目的，根据本申请的第四方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行上述第一方面中任意一项所述的前端异常监控的方法。

在本申请实施例中，前端异常监控的方法、装置及系统中，页面在浏览器中运行时，引入异常监控工具包，异常监控工具包会获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息，并且异常监控工具包通过对事件的监听来捕获异常信息后，然后通过劫持全局console.error方法，收集所有捕获的异常信息；最后将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，使后台人员通过监控平台进行异常信息的及时查看、定位、解决。实现了对线上项目在发生异常的时候快速定位。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的一种前端异常监控的方法流程图；

图2根据本申请实施例提供的一种前端异常监控的装置的组成框图；

图3是根据本申请实施例提供的另一种前端异常监控的装置的组成框图；

图4是根据本申请实施例提供的一种前端异常监控的系统的组成框图；

图5示出了根据本申请一个实施例的计算机可读存储介质的结构示意图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

首先需要说明的是，本申请是为前端页面在各类浏览器运行时引入了自定义的异常监控工具包(SDK工具包)，实现了用户在使用页面过程中的异常信息的实时的监听和收集。解决了现有的线上项目对应的页面在运行过程中，出现页面点击、跳转等异常后，除非用户及时反馈，否则项目后台无法及时的获取异常的问题。

根据本申请实施例，提供了一种前端异常监控的方法，如图1所示，该方法包括如下的步骤：

S101.每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的。

本申请主要这针对的是前端开发，开发的页面的代码需要浏览器的解析进行页面展示运行。为了对页面运行进行异常监控，页面代码文件中的异常监控工具包先被解析执行。需要说明的是异常监空工具包的执行用户是无法看到的。由于每个页面通常都是不互通的，为了对每个页面都进行监控，需要在每个页面中都引入异常监控工具，即每个页面代码文件中都需要引入异常监控工具包。又由于通常一个项目包含的网页众多，如果将每个异常监控工具的代码都复制到每个页面的代码文件中，效率非常低。因此在打包时，本申请通过插件的方式实现将异常监控工具包自动引入页面代码文件中，非常的方便。具体的，插件是基于webpack的插件，在实现时通过在配置文件中配置异常监控工具包的超文本传输协议地址，即HTTP地址、引入的位置(页面的顶部)以及文件的类型，在页面代码打包时需要将该插件进行集成就可以。

另外，对于引入位置为页面的顶部的设置是必须，这是由浏览器进行文件解析时是从上到下的顺序决定的。只有在页面顶部时，才可以被先解析，才可以保证对页面中的所有的异常信息进行监控和捕获。

S102.在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息，并监听预设事件的触发情况。

页面代码文件可以为HTML文件、js文件等。第一基本信息至少为为页面代码文件对应的项目的版本信息；第二信息至少为加载环境的操作系统类型、用户ID、设备标识信息。加载环境为浏览器以及浏览器所在的系统以及设备。因此第二基本信息可以为：比如操作系统为可以安卓、iOS、Windows等，用户ID为浏览器当前登录的用户的账号等，设备标识可以为浏览器当前所在设备的品牌、厂家、型号等。第二基本信息还可以包括浏览器厂商标识信息等。

其中，预设事件是发生异常时触发的事件；具体的预设事件可以为onerror事件、unhandledrejection事件等。其中，onerror事件会在文档或图像加载过程中发生错误时被触发；unhandledrejection事件在未使用catch处理的Promise错误时触发。需要说明的是，这些预设事件主要都是为Window对象监听的，在实际应用还可以根据根据实际需求监听更多种事件，本申请中不作限制。即预设事件可以任意的能够通过监听捕获异常信息的事件。

预设事件会在发生对应的异常时触发，因此可以通过监听预设事件的触发情况来进行判断是否发生异常，并进行后续异常信息的捕获。

S103.当监听到预设事件触发后，捕获异常信息。

根据前述步骤中对预设事件的描述，可知当发生异常时，对应的预设事件会触发，因此当监听到预设事件触发后，可以捕获到异常。对于前述onerror事件、unhandledrejection事件，可以捕获到的异常信息可以为页面中javascript代码异常报错的错误信息、错误堆栈、错误行数列数、对应的文件名。其中异常报错的错误信息可能是由页面无法点击、无法展示、展示异常等问题导致的。

S104.通过劫持全局console.error方法，收集所有捕获的异常信息。

全局console.error方法是将错误信息输出到控制台，是浏览器中的标准API，在这种场景下，网页在第三方的浏览器中运行时，网页代码开发者后台是无法直接获取到异常信息的，为了可以收集到所有的异常信息，本申请通过劫持全局console.error方法的方式使在调用全局console.error方法之前，进行劫持，即收集所有其打印的错误信息。具体的劫持的实现方式可以为现有技术中任一种函数劫持方式，比如surroundByTryCatchFactory。

S105.将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。

将收集的所有的异常信息以及对饮的第一基本信息、第二基本信息上报给日志服务器，具体的上报给日志服务器的方式可以为以下两种：

第一种：通过img标签的src属性进行GET请求的方式上报给日志服务器；

img标签的src属性的值为统一资源定位符(Uniform Resource Locator，URL)。上报的周期可以自由设置，比如可以设置为上报采样率为50％等。

第二种：通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。

sendBeacon方法支持多条数据上传和延迟上传，但该方法有兼容性问题，会在不支持该方法的宿主环境中自动替换为第一种的GET方式上报异常日志。

日志服务接收到所有页面的异常信息后，可以使后台监控人员通过监控平台及时的查看异常信息，及时发现线上项目是否运行平稳。

监控平台可以提供按照异常发生的时间段、操作系统、运行平台(浏览器厂商、设备品牌等)等条件查看当前异常日志信息；还可以根据异常信息文件名，发生错误的行数列数，找到该文件对应的sourcemap文件，对sourcemap文件按照行数列数进行解析，就可以还原到发生异常报错代码的源文件的具体位置，快速的定位报错代码位置。

从以上的描述中，可以看出，本申请实施例的前端异常监控的方法中，页面在浏览器中运行时，引入异常监控工具包，异常监控工具包会获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息，并且异常监控工具包通过对事件的监听来捕获异常信息后，然后通过劫持全局console.error方法，收集所有捕获的异常信息；最后将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，使后台人员通过监控平台进行异常信息的及时查看、定位、解决。实现了对线上项目在发生异常的时候快速定位。

进一步的，对上述实施例的补充或者详细说明：

由于页面中的多种资源(比如各js文件)通常是分布存放，即存放在不同域名的服务器中，因此在页面运行加载各种资源时，会存在需要跨域访问的情况，因此在进行异常监控时也需要对跨域时的异常进行收集，但是通常浏览器为了安全考虑，会禁止跨域访问，尤其是监控跨域异常。因此为了解决这种问题，本申请在页面中属于其他域名资源的js文件中添加允许跨域的属性。即在存放js文件的服务器中配置响应头:access-control-allow-origin:*(其中*可以配置为可以跨域访问的域名)，允许页面获取js文件中的异常信息，在页面中引用的其他js文件中添加跨域属性为:crossorigin＝’anonymous’。

进一步的，为了保证异常监控工具较好的兼容性，将其打包为UMD版本。

进一步的，为了承接更多的负载并保证服务高可用性，步骤S105中上报的所有异常相关的数据先通过nginx做代理转发，然后通过pm2工具开启集群模式承接更多的负载并保证服务高可用，最后通过mysql服务器对异常日志进行持久化存储。

另外，还需要说明的是为了配合异常信息对应的源代码的准确快速的定位，还需要在页面代码打包时生成sourcemap文件，该文件不会随页面一起上线，只是为了后续监控到异常时可以通过其进行源代码的准确快速的定位。

最后，对本申请的前端异常监控的方法的有益效果进行总结：

1.随时可以登录异常平台查看项目是否有上报异常日志，能及时发现自测范围以外的问题以及特定业务场景&特定宿主条件(操作系统/手机品牌/系统版本/具体机型/不同浏览器厂商)下的代码异常；

2.整套系统自研搭建，比较轻量，信息获取灵活配置，贴合实际业务场景；

3.针对用户反馈的具体问题可以快速定位异常位置并及时解决，处理异常效率大大提升。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述图1方法的前端异常监控的装置，如图2所示，该装置包括：

解析执行模块21，用于每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；

监听模块22，用于在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；

捕获模块23，用于当监听到所述预设事件触发后，捕获异常信息；

收集模块24，用于通过劫持全局console.error方法，收集所有捕获的异常信息；

上报模块25，用于将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器。

从以上的描述中，可以看出，本申请实施例的前端异常监控的装置中，页面在浏览器中运行时，引入异常监控工具包，异常监控工具包会获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息，并且异常监控工具包通过对事件的监听来捕获异常信息后，然后通过劫持全局console.error方法，收集所有捕获的异常信息；最后将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，使后台人员通过监控平台进行异常信息的及时查看、定位、解决。实现了对线上项目在发生异常的时候快速定位。

进一步的，所述插件为基于webpack的插件，所述装置还包括：

引入模块26，用于根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。

进一步的，如图3所示，所述监听模块22还包括：

第一获取单元221，用于至少获取页面代码文件对应的项目的版本信息；

第二获取单元222，用于至少获取加载环境的操作系统类型、用户ID、设备标识信息。

进一步的，如图3所示，所述监听模块22还包括：

事件监听单元223，用于监听以下至少一种事件的触发情况：onerror事件、unhandledrejection事件。

进一步的，如图3所示，所述上报模块25还包括：

第一上报单元251，用于将捕获的异常信息通过img标签的src属性进行GET请求的方式上报给日志服务器；

第二上报单元252，用于通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。

进一步的，所述异常信息还包括跨域异常，如图3所示，所述装置还包括：

添加模块27，用于在页面中属于其他域名资源的js文件中添加允许跨域的属性。

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

根据本申请实施例，还提供了一种前端异常监控的系统，如图4所示，所述系统包括

前端31，包括运行在浏览器中的页面以及用于捕获页面运行中的异常信息的异常监控工具包，页面被浏览器加载时，首先将异常监控工具包解析执行；在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；当监听到所述预设事件触发后，捕获异常信息；通过劫持全局console.error方法，收集所有捕获的异常信息；将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器；

日志服务器32，用于接收异常监控工具包上报的异常信息；

监控平台33，用于接收异常信息的查询请求，根据查询请求从所述日志服务器中获取异常信息对应的文件名，并根据文件名对应的sourcemap文件定位报错源代码的位置。

图4中SDK为异常监控工具包，负责对前端页面进行异常监控，获收集到异常信息以及对应的第一基本信息以及第二基本信息后可以通过两种方式上报给代理服务器，然后通过pm2工具开启的服务集群，最后将上报的所有数据持久化到日志服务器；之后当监控平台接收到后台人员发起的异常查看等请求后，可以通过日志服务器进行异常信息的查询并返回，以供后台人员进行及时的分析，修改。

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

图5示出了根据本申请一个实施例的一种计算机可读存储介质的结构示意图。该计算机可读存储介质400存储有用于执行根据本申请的方法步骤的计算机可读程序代码410。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种前端异常监控的方法，其特征在于，所述方法包括：

每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；

在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；

当监听到所述预设事件触发后，捕获异常信息；

通过劫持全局console.error方法，收集所有捕获的异常信息；

将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。

2.根据权利要求1所述的前端异常监控的方法，其特征在于，所述插件为基于webpack的插件，异常监控工具包是打包时通过插件自动引入到页面代码文件中的，包括：

根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。

3.根据权利要求1所述的前端异常监控的方法，其特征在于，所述异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息包括：

至少获取页面代码文件对应的项目的版本信息；

至少获取加载环境的操作系统类型、用户ID、设备标识信息。

4.根据权利要求1所述的前端异常监控的方法，其特征在于，所述监听预设事件的触发情况包括：

监听以下至少一种事件的触发情况：onerror事件、unhandledrejection事件。

5.根据权利要求1中所述的前端异常监控的方法，其特征在于，所述将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器包括：

将捕获的异常信息通过img标签的src属性进行GET请求的方式上报给日志服务器；或者，

通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。

6.根据权利要求1中所述的前端异常监控的方法，其特征在于，所述异常信息还包括跨域异常，所述方法还包括：

在页面中属于其他域名资源的js文件中添加允许跨域的属性。

7.一种前端异常监控的装置，其特征在于，所述装置包括：

解析执行模块，用于每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；

监听模块，用于在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；

捕获模块，用于当监听到所述预设事件触发后，捕获异常信息；

上报模块，用于将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。

8.根据权利要求7所述的前端异常监控的装置，其特征在于，所述插件为基于webpack的插件，所述装置还包括：

引入模块，用于根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。

9.一种前端异常监控的系统，其特征在于，所述系统包括：

前端，包括运行在浏览器中的页面以及用于捕获页面运行中的异常信息的异常监控工具包，页面被浏览器加载时，首先将异常监控工具包解析执行；在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；当监听到所述预设事件触发后，捕获异常信息；通过劫持全局console.error方法，收集所有捕获的异常信息；将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器；

日志服务器，用于接收异常监控工具包上报的异常信息；

监控平台，用于接收异常信息的查询请求，根据查询请求从所述日志服务器中获取异常信息对应的文件名，并根据文件名对应的sourcemap文件定位报错源代码的位置。

10.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现如权利要求1-6中任一项所述的前端异常监控的方法。

Images