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

权利要求书

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

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

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

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

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

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

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

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

2. 根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，所述监控全局错误模块中主要监听页面错误数据，具体为：页面错误数据主要包含JS运行错误和资源加载错误，通过window.onerror捕获JS运行时的错误类型，通过window.addEventListener监听“error”事件捕获页面资源的加载错误，采用window.addEventListener 监听“unhandledrejection”事件 捕获Promise任务中未被处理的异常；

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

3.根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，所述拦截接口请求模块中实现对接口数据的监听，具体为：耗时可以通过对XmlHttpRequest和fetch请求的拦截过程中进行时间统计，接口请求异常通过xhr的readyState和status属性判断。

4. 根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，监控性能数据模块中页面性能数据主要包括：白屏时间、首屏时间、用户可以操作页面的时间节点、总下载时间；所述通过浏览器的Performance 接口获取到当前页面中与页面性能数据相关的信息，具体为：通过window.performance.timing对象求差值，得出对应页面加载过程中关节点的耗时。

5.根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，获取用户行为轨迹模块通过window事件代理监听用户点击元素，通过重写console打印控制台信息，通过第三方库rrweb获取用户鼠标移动轨迹。

6.根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，获取设备信息模块通过navigatorAPI获取浏览器信息再进行解析，使用第三方包mobile-detect帮助获取手机端设备信息进行解析。

7.根据权利要求1所述的一种web前端错误及性能监控的SDK模块，其特征在于，事件模块中，对外暴露的事件主要有：页面性能数据获取完毕事件，接口请求开始事件，接口请求完成事件，请求错误事件，页面逻辑异常事件，vue错误监控事件，未处理promise异常事件，资源加载错误事件，错误合并上报事件，用户合并上报请求节省请求数量，用户鼠标行为追踪事件。

8.根据权利要求1-7任一项所述的一种web前端错误及性能监控的SDK模块，其特征在于，所述将需要数据的获取功能分成8个核心子模块，其中的需要数据包括：页面错误数据，页面资源加载情况，接口数据，页面性能数据，页面访问数据，用户行为数据，设备数据。