web前端错误及性能监控的SDK模块及其调用方法技术

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

【技术实现步骤摘要】
web前端错误及性能监控的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对象求差值，得出对应页面加载过程中关节点的耗时。优选的，获取用户行为轨迹模块通过window事件代理监听用户点击元素，通过重写console打印控制台信息，通过第三方库rrweb获取用户鼠标移动轨迹。优选的，获取设备信息模块通过navigatorAPI获取浏览器信息再进行解析，使用第三方包mobile-detect帮助获取手机端设备信息进行解析。优选的，事件模块中，对外暴露的事件主要有：页面性能数据获取完毕事件，接口请求开始事件，接口请求完成事件，请求错误事件，页面逻辑异常事件，vue错误监控事件，未处理promise异常事件，资源加载错误事件，错误合并上报事件，用户合并上报请求节省请求数量，用户鼠标行为追踪事件。进一步的，所述将需要数据的获取功能分成8个核心子模块，其中的需要数据包括：页面错误数据，页面资源加载情况，接口数据，页面性能数据，页面访问数据，用户行为数据，设备数据。优选的，SDK模块还包括子模块：上报模块：主要实现将监控到的错误数据上报到服务端，采用ajax的post方法，将监控的对应的前端错误数据上报到服务端。第二方面，提供了一种SDK模块的调用方法，该方法包括如下步骤：对权利要求1-9中任一项所述一种web前端错误及性能监控的SDK模块进行调用，具体为：步骤1，采用NPM安装或采用CDN直接引入SDK模块；步骤2，初始化SDK模块的监听函数，SDK模块的监听函数可以选择是否传入配置项option，不传时，按默认配置进行初始化，传入时，可按配置项option进行监听函数的初始化，实现按需监听前端错误和性能数据；步骤3，监听对象提供的API可以采用on和off方法，给监控对象绑定监控事件和移除监控事件。优选的，若配置项中包含上报的服务端地址，还包括步骤4，将监听的前端错误数据，上报到服务端进行处理。与现有技术相比，上述技术方案中的一个技术方案具有如下有益效果：通过web前端错误及性能监控SDK模块，开发人员只需直接引入SDK模块（兼容现阶段主流的前端开发框架，如VUE，REACT等），无需关注具体监控和采集数据的逻辑和代码，通过调用SDK模块即可获取实际业务中所需要的前端错误和前端性能数据，有针对性的对生产环境问题及时修复和性能优化，减少损失。提高了开发人员的工作效率，同时提升了用户体验，真正意义上实现了降本增效。同时对前端错误和性能数据的监控，包含的数据范围广泛，覆盖面高，实用性强。具体实施方式为了阐明本专利技术的技术方案和工作原理，下面将对本公开实施方式做进一步的详细描述。上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。第一方面，本公开实施例提供了一种web前端错误及性能监控的SDK模块，SDK模块采用基于事件订阅的方式，将需要数据的获取功能分成8个核心子模块，每个子模块独立负责对应数据的采集和处理；所述8个核心子模块具体为：所述将需要数据的获取功能分成8个核心子模块，其中的需要数据包括：页面错误数据，页面资源加载情况，接口数据，页面性能数据，页面访问数据，用户行为数据，设备（手机、浏览器）数据。核心监控模块：集成了SDK框架的其他模块，对传入的配置和默认配置进行深度合并，根据配置进行初始化。监控全局错误模块：主要监听页面错误数据，对前端主流框架Vue和React进行错误监听：优选的，所述主要监听页面错误数据，具体为：页面错误数据主要包含JS运行错误和资源加载错误，通过window.onerror捕获JS运行时的错误类型，通过window.addEventListener(‘error’)捕获页面资源的加载错误，由于addEventListener也能够捕获JS错误，因此需要过滤避免重复触发事件钩子；采用window.addEv本文档来自技高网...

【技术保护点】
1.一种web前端错误及性能监控的SDK模块，其特征在于，SDK模块采用基于事件订阅的方式，将需要数据的获取功能分成多个核心子模块，每个子模块独立负责对应数据的采集和处理；所述多个核心子模块具体为：/n核心监控模块：集成了SDK模块的除了核心监控模块以外的所有模块，对传入的配置和默认配置进行深度合并，根据配置进行初始化；/n监控全局错误模块：主要监听页面错误数据，对前端主流框架 Vue和React进行错误监听；/n拦截接口请求模块：主要实现对接口数据的监听，接口数据主要包括接口耗时和接口请求异常；/n监控性能数据模块：主要实现对页面性能数据的监控，通过浏览器的Performance 接口获取到当前页面中与页面性能数据相关的信息；/n获取用户行为轨迹模块：主要监听用户行为数据，用户行为数据主包含用户点击页面元素、控制台信息、用户鼠标移动轨迹；/n获取设备信息模块：主要用于获取设备信息；/n事件模块：主要实现对外暴露事件。/n

【技术特征摘要】
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模块，其特征在于，监控性能数据模块中页面性能数据主要包括：白屏时间、首屏时间、用户可以操作页面的时间节点、总下载时间；所述通过浏览器的Perfo...

【专利技术属性】
技术研发人员：周金明，胡扬涛，
申请(专利权)人：南京视察者智能科技有限公司，
类型：发明
国别省市：江苏;32