[发明专利]前端异常监控的方法、装置及系统

说明书

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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