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

权利要求书

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的插件，所述装置还包括：

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