前端异常监控的方法、装置及系统制造方法及图纸

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

【技术实现步骤摘要】
前端异常监控的方法、装置及系统
本申请涉及应用程序开发领域，具体而言，涉及一种前端异常监控的方法、装置及系统。
技术介绍
应用程序的项目代码的开发通常分为前端开发和后台开发，项目代码开发完成后需要进行发布前的测试，测试通过后再发布到生产环境。比如对于前端开发，当项目代码通过测试之后会发布到生产环境中。而项目代码的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是根据本申请实施例提供的另一种前端异常监控本文档来自技高网...

【技术保护点】
1.一种前端异常监控的方法，其特征在于，所述方法包括：/n每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；/n在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；/n当监听到所述预设事件触发后，捕获异常信息；/n通过劫持全局console.error方法，收集所有捕获的异常信息；/n将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。/n

【技术特征摘要】
1.一种前端异常监控的方法，其特征在于，所述方法包括：
每个页面被浏览器加载时，页面代码文件中的异常监控工具包先被解析执行，所述异常监控工具包是打包时通过插件自动引入到每个页面代码文件中的；
在页面运行过程中，异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息；并监听预设事件的触发情况，所述预设事件是发生异常时触发的事件；
当监听到所述预设事件触发后，捕获异常信息；
通过劫持全局console.error方法，收集所有捕获的异常信息；
将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器，以使后台人员通过监控平台进行异常信息的查看、定位、解决。


2.根据权利要求1所述的前端异常监控的方法，其特征在于，所述插件为基于webpack的插件，异常监控工具包是打包时通过插件自动引入到页面代码文件中的，包括：
根据配置文件中配置的所述异常监控工具包的超文本传输协议地址、引入的位置以及文件的类型自动将异常监控工具包引入到每个页面代码文件中。


3.根据权利要求1所述的前端异常监控的方法，其特征在于，所述异常监控工具包获取页面代码文件对应的第一基本信息以及加载环境的第二基本信息包括：
至少获取页面代码文件对应的项目的版本信息；
至少获取加载环境的操作系统类型、用户ID、设备标识信息。


4.根据权利要求1所述的前端异常监控的方法，其特征在于，所述监听预设事件的触发情况包括：
监听以下至少一种事件的触发情况：onerror事件、unhandledrejection事件。


5.根据权利要求1中所述的前端异常监控的方法，其特征在于，所述将收集的异常信息、及其对应的第一基本信息和第二基本信息上报给日志服务器包括：
将捕获的异常信息通过img标签的src属性进行GET请求的方式上报给日志服务器；或者，
通过sendBeacon方法进行POST上传的方式上报给所述日志服务器。


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

【专利技术属性】
技术研发人员：祝晨明，荣承壮，
申请(专利权)人：叮当快药科技集团有限公司，
类型：发明
国别省市：北京;11