[发明专利]web前端错误及性能监控的SDK模块及其调用方法

说明书

本发明公开了web前端错误及性能监控的SDK模块及其调用方法，SDK模块采用基于事件订阅的方式，将需要数据的获取功能分成多个核心子模块，每个子模块独立负责对应数据的采集和处理；所述多个核心子模块包括：核心监控模块、监控全局错误模块、拦截接口请求模块、监控性能数据模块、获取用户行为轨迹模块、获取设备信息模块、事件模块等子模块。开发人员只需直接引入SDK模块，无需关注具体监控和采集数据的逻辑和代码，通过调用SDK模块即可获取实际业务中所关心前端错误和前端性能数据，大大提高了工作效率。

技术领域

本发明涉及计算机软件及前端开发研究领域，具体涉及web前端错误及性能监控的SDK模块及其调用方法。

背景技术

在软件的开发过程中，前端一直是距离用户最近的一层，随着产品的日益完善，会更加注重用户体验。前端的错误监控，性能数据，往往对业务的稳定和用户体验有着很重要的影响。即使开发人员在开发过程中尽量捕获错误和异常，但是线上环境的异常，开发人员往往难以察觉，因此前端的错误监控和性能数据的采集就显得十分重要。

发明内容

为了克服现有技术的不足，本发明提供了web前端错误及性能监控的SDK模块及其调用方法，开发人员通过调用SDK模块即可获取实际业务中所关心前端错误和前端性能数据，大大提高了工作效率。

技术方案如下：

第一方面，提供了一种web前端错误及性能监控的SDK模块，SDK模块采用基于事件订阅的方式，将需要数据的获取功能分成多个核心子模块，每个子模块独立负责对应数据的采集和处理；所述多个核心子模块具体为：

核心监控模块：集成了SDK模块的除了核心监控模块以外的所有模块，对传入的配置和默认配置进行深度合并，根据配置进行初始化。

监控全局错误模块：主要监听页面错误数据，对前端主流框架 Vue和React进行错误监听。

拦截接口请求模块：主要实现对接口数据的监听，接口数据主要包括接口耗时和接口请求异常。

监控性能数据模块：主要实现对页面性能数据的监控，通过浏览器的Performance接口获取到当前页面中与页面性能数据相关的信息。

获取用户行为轨迹模块：主要监听用户行为数据，用户行为数据主包含用户点击页面元素、控制台信息、用户鼠标移动轨迹。

获取设备信息模块：主要用于获取设备信息。

事件模块：主要实现对外暴露事件。

优选的，所述监控全局错误模块中主要监听页面错误数据，具体为：页面错误数据主要包含JS运行错误和资源加载错误，通过window.onerror捕获JS运行时的错误类型，通过window.addEventListener监听“error”事件捕获页面资源的加载错误，采用window.addEventListener 监听“unhandledrejection”事件 捕获Promise任务中未被处理的异常；

所述对前端主流框架 Vue和React进行错误监听，具体为：在Vue中，通过Vue.config.errorHandler进行异常捕获，在React中，提供了一个内置函数componentDidCatch进行异常捕获。

优选的，所述拦截接口请求模块中实现对接口数据的监听，具体为：耗时可以通过对XmlHttpRequest和fetch请求的拦截过程中进行时间统计，接口请求异常通过xhr的readyState和status属性判断。

优选的，监控性能数据模块中页面性能数据主要包括：白屏时间、首屏时间、用户可以操作页面的时间节点、总下载时间；所述通过浏览器的Performance 接口获取到当前页面中与页面性能数据相关的信息，具体为：通过window.performance.timing对象求差值，得出对应页面加载过程中关节点的耗时。