云平台web前端性能监控方法、系统及介质技术方案

本发明专利技术公开了云平台web前端性能监控方法、系统及介质，属于网页监控技术领域，要解决的技术问题为如何兼容适配现在主流浏览器，为不同的云产品提供一种统一的监控。将监控代码以探针方式配置于云平台各个产品前端代码的根界面中，执行如下步骤：通过windows的performance属性获取网页加载信息；通过windows的navigators对象获取浏览器信息；通过windows的onerror属性监控并捕捉网页异常信息；通过XMLHttpRequest的onreadystatechange属性以及重构fetch的get属性，监听网页的后端请求；通过img的src属性将信息拼接到src的url上。将信息拼接到src的url上。将信息拼接到src的url上。

【技术实现步骤摘要】
云平台web前端性能监控方法、系统及介质


[0001]本专利技术涉及网页监控
，具体地说是云平台web前端性能监控方法、系统及介质。

技术介绍

[0002]云平台具有高度的开放性和兼容性，针对云平台上各种云产品，如果都单独去开发监控系统，需要大量人力和物力。但是网页性能，网页浏览量，页面异常信息等等又是云平台上产品持续优化升级离不开的重要数据，因此，更需要一种统一的监控技术去获取一些日常用户活跃和分布信息，以及我们更加关注的网页的异常信息等等。
[0003]如何兼容适配现在主流浏览器，为不同的云产品提供一种统一的监控，是需要解决的技术问题。

技术实现思路

[0004]本专利技术的技术任务是针对以上不足，提供云平台web前端性能监控方法、系统及介质，来解决如何兼容适配现在主流浏览器，为不同的云产品提供一种统一的监控的问题。
[0005]第一方面，本专利技术云平台web前端性能监控方法，基于JavaScript编写性能监控代码，并将所述监控代码以探针方式配置于云平台各个产品前端代码的根界面中，通过所述监控代码对云平台web前端性能进行监控，所述监控代码执行如下步骤：
[0006]通过windows的performance属性获取网页加载信息，所述网页加载信息包括网页性能指标、耗时指标以及静态资源信息；
[0007]通过windows内置的navigators对象获取加载当前网页的浏览器信息；
[0008]通过windows的onerror属性监控并捕捉网页异常信息；
[0009]通过XMLHttpRequest的onreadystatechange属性以及重构fetch的get属性，监听网页的后端请求并判断后端请求为成功或失败，得到后端请求信息；
[0010]通过img的src属性将所述网页加载信息、浏览器信息、网页异常信息以及后端请求信息拼接到src的url上。
[0011]作为优选，所述网页性能指标包括：
[0012]白屏时间，所述白屏时间的计算公式为：白屏时间＝domloadng
–
fetchStart；
[0013]DOM Ready时间，所述DOM Ready时间的计算公式为：DOM Ready时间＝domContentLoadedEventEnd
–
fetchStart；
[0014]页面onload时间，所述页面onload时间的计算公式为：页面onload时间＝loadEventEnd
–
fetchStart；
[0015]所述耗时指标包括：
[0016]DNS查询耗时，所述DNS查询耗时的计算公式为：DNS查询耗时＝domainLookupEnd
–
domainLookupStart；
[0017]TCP链接耗时，所述TCP链接耗时的计算公司为：TCP链接耗时＝connectEnd
–
connectStart；
[0018]网络请求耗时，所述网络请求耗时的计算公式为：网络请求耗时＝responseEnd
–
responseStart；
[0019]DOM解析耗时，所述DOM解析耗时的计算公式为：DOM解析耗时＝domComplete
–
domInteractive；
[0020]所述计算公式等式的右边为performance的属性。
[0021]作为优选，通过performance.getEntries方法返回关于静态资源信息的数组，数组对象的initiatorType对应静态资源的类型，静态资源的类型包括img、script、以及css，数组对象duration属性代表请求花费的时间。
[0022]作为优选，通过window的内置navigator对象的platform属性获取加载网页的操作系统信息，所述操作系统信息博包括操作系统类型，所述操作系统类型包括windows系统、mac系统以及Linux系统；
[0023]通过userAgent属性获取加载网页的浏览器信息，所述浏览器信息包括浏览器类型。
[0024]作为优选，所述网页异常信息包括语法异常信息和运行时间错误信息；
[0025]将编写的自定义函数赋值至window的onerror接口，网页中有网页异常信息报错，通过window的onerror接口捕捉所述网页异常信息。
[0026]作为优选，对于XMLHttpRequest类型的Ajax请求，通过其onreadystatechange属性监听后端请求的状态变更，并判断后端请求为成功或失败；
[0027]对于fetch类型的后端请求，通过重定义其get属性，基于重构函数监听后端请求的状态变更，并判断后端请求为成功或失败。
[0028]作为优选，通过img的src属性将所述网页加载信息、浏览器信息、网页异常信息以及后端请求信息拼接到src的url上，包括如下步骤：
[0029]传输数据时，生成一个Image对象，将后端接口上传数据接口和数据参数动态的拼接起来，并赋值给所述Image对象；
[0030]Image.onload或者Image.onerror之后，将所述Image对象删除，防止占用更多的资源。
[0031]作为优选，将所述监控代码以探针方式配置于云平台各个产品前端代码的根界面中，包括如下步骤：
[0032]将监控代码打包压缩作为资源；
[0033]通过JavaScript标签引入所述资源，并将所述资源配置到云平台各个产品前端代码的根界面中。
[0034]第二方面，本专利技术的云平台web前端性能监控系统，通过如第一方面任一项所述的云平台web前端性能监控方法进行云平台web前端性能监控，所述系统为基于JavaScript编写的性能监控代码形成的应用系统，并以探针方式配置于云平台各个产品前端代码的根界面中，所述系统包括：
[0035]网页加载信息监控模块，所述网页加载监控模块用于通过windows的performance属性获取网页加载信息，所述网页加载信息包括网页性能指标、耗时指标以及静态资源信息；
[0036]浏览器监控模块，所述浏览器监控模块用于通过windows内置的navigators对象获取加载当前网页的浏览器信息以及操作系统信息；
[0037]网页异常监控模块，所述网页异常监控模块用于通过windows的onerror属性监控并捕捉网页异常信息；
[0038]后端请求监控模块，所述后端请求监控模块用于通过XMLHttpRequest的onreadystatechange属性以及重构fetch的get属性，监听网页的后端请求并判断后端请求为成功或失败，得到后端请求信息；
[0039]数据上传模块，所述数据上传模块用于通过img的src属性将所述网页加载信息、浏览器信息、网页异常信息以及后端请求信本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.云平台web前端性能监控方法，其特征在于基于JavaScript编写性能监控代码，并将所述监控代码以探针方式配置于云平台各个产品前端代码的根界面中，通过所述监控代码对云平台web前端性能进行监控，所述监控代码执行如下步骤：通过windows的performance属性获取网页加载信息，所述网页加载信息包括网页性能指标、耗时指标以及静态资源信息；通过windows内置的navigators对象获取加载当前网页的浏览器信息；通过windows的onerror属性监控并捕捉网页异常信息；通过XMLHttpRequest的onreadystatechange属性以及重构fetch的get属性，监听网页的后端请求并判断后端请求为成功或失败，得到后端请求信息；通过img的src属性将所述网页加载信息、浏览器信息、网页异常信息以及后端请求信息拼接到src的url上。2.根据权利要求1所述的云平台web前端性能监控方法，其特征在于所述网页性能指标包括：白屏时间，所述白屏时间的计算公式为：白屏时间＝domloadng
–
fetchStart；DOM Ready时间，所述DOM Ready时间的计算公式为：DOM Ready时间＝domContentLoadedEventEnd
–
fetchStart；页面onload时间，所述页面onload时间的计算公式为：页面onload时间＝loadEventEnd
–
fetchStart；所述耗时指标包括：DNS查询耗时，所述DNS查询耗时的计算公式为：DNS查询耗时＝domainLookupEnd
–
domainLookupStart；TCP链接耗时，所述TCP链接耗时的计算公司为：TCP链接耗时＝connectEnd
–
connectStart；网络请求耗时，所述网络请求耗时的计算公式为：网络请求耗时＝responseEnd
–
responseStart；DOM解析耗时，所述DOM解析耗时的计算公式为：DOM解析耗时＝domComplete
–
domInteractive；所述计算公式等式的右边为performance的属性。3.根据权利要求1所述的云平台web前端性能监控方法，其特征在于通过performance.getEntries方法返回关于静态资源信息的数组，数组对象的initiatorType对应静态资源的类型，静态资源的类型包括img、script、以及css，数组对象duration属性代表请求花费的时间。4.根据权利要求1所述的云平台web前端性能监控方法，其特征在于通过window的内置navigator对象的platform属性获取加载网页的操作系统信息，所述操作系统信息博包括操作系统类型，所述操作系统类型包括windows系统、mac系统以及Linux系统；通过userAgent...

【专利技术属性】
技术研发人员：周睿，孙思清，宋亚萍，张建伟，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：