一种平台站点的监控方法、系统及可读存储介质与流程

1.本发明涉及web产品性能监控领域，特别涉及一种平台站点的监控方法、系统及可读存储介质。


背景技术：

2.在项目的开发迭代过程中，产品的性能可能伴随迭代而发生变化，因此产品的运营过程中需要对其性能进行监控，从而了解产品的特性、评估其优劣、发现瓶颈，进而全面分析产品的适用度。对于这些需求，用户期望存在能完全满足需求的一套监控平台，然而目前的监控平台多为成熟封闭的软件，既不支持二次开发和自定义查询需求，也不能兼容多平台，尤其是近两年诞生的新技术上如小程序，就无法使用当前监控平台对产品进行监控。
3.因此，如何提供一种解决上述技术问题的方案是目前本领域技术人员需要解决的问题。


技术实现要素：

4.有鉴于此，本发明的目的在于提供一种适用于多平台、支持二次开发和自定义查询的平台站点的监控方法、系统及可读存储介质。其具体方案如下：
5.一种平台站点的监控方法，包括：
6.调用预设监控函数，对平台站点的各类初始信息进行收集；
7.对所有所述初始信息进行数据分析，得到分析结果；
8.根据所述分析结果上报错误信息；
9.通过可视化平台显示所述分析结果；
10.所述可视化平台包括网页端、和/或移动端h5、和/或小程序。
11.优选的，所述初始信息包括错误日志信息、和/或性能信息、和/或用户上报信息；
12.所述错误日志信息包括：js报错日志信息、和/或静态资源加载错误日志信息、和/或服务请求接口错误日志信息；
13.所述性能信息包括：资源加载内容、和/或是否加载成功信息、和/或加载时间；
14.所述用户上报信息包括：用户行为信息、和/或用户自行上报信息。
15.优选的，所述预设监控函数具体为设于handlewatch中的回调函数；
16.所述回调函数包括vue.config.errorhandler、和/或vue.config.warnhandler、和/或componentdidcatch、和/或onerror。
17.优选的，所述根据所述分析结果上报错误信息的过程，包括：
18.根据所述分析结果，通过爬取异步请求的post方式上报错误信息。
19.优选的，所述通过爬取异步请求的post方式上报错误信息的过程还包括：
20.当页面突然退出，通过监听beforeunload事件，利用sendbeacon上报所述错误信息；
21.或，当移动端突然收到home键返回指令，利用visibilitychange事件和pagehide
事件上报所述错误信息。
22.优选的，所述监控方法还包括：
23.存储所有所述初始信息和所述分析结果。
24.优选的，所述存储所有所述初始信息和所述分析结果的过程，包括：
25.结合koa架构和mongodb数据库，以存储所有所述初始信息和所述分析结果。
26.优选的，所述存储所有所述初始信息和所述分析结果的过程，还包括：
27.对所有所述初始信息和所述分析结果进行数据脱敏处理。
28.相应的，本技术公开了一种平台站点的监控系统，包括：
29.收集模块，用于调用预设监控函数，对平台站点的各类初始信息进行收集；
30.分析模块，用于对所有所述初始信息进行数据分析，得到分析结果；
31.上报模块，用于根据所述分析结果上报错误信息；
32.显示模块，用于通过可视化平台显示所述分析结果；
33.所述可视化平台包括网页端、和/或移动端h5、和/或小程序。
34.相应的，本技术公开了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上文任一项所述平台站点的监控方法的步骤。
35.本技术公开了一种平台站点的监控方法，包括：调用预设监控函数，对平台站点的各类初始信息进行收集；对所有所述初始信息进行数据分析，得到分析结果；根据所述分析结果上报错误信息；通过可视化平台显示所述分析结果；所述可视化平台包括网页端、和/或移动端h5、和/或小程序。本技术将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。
附图说明
36.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
37.图1为本发明实施例中一种平台站点的监控方法的步骤流程图；
38.图2为本发明实施例中一种sdk的应用流程图；
39.图3为本发明实施例中一种平台站点的监控系统的结构分布图。
具体实施方式
40.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
41.目前的监控平台多为成熟封闭的软件，既不支持二次开发和自定义查询需求，也
不能兼容多平台，尤其是近两年诞生的新技术上如小程序，就无法使用当前监控平台对产品进行监控。
42.本技术将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。
43.本发明实施例公开了一种平台站点的监控方法，参见图1所示，包括：
44.s1：调用预设监控函数，对平台站点的各类初始信息进行收集；
45.可以理解的是，此处的平台站点指的是当前监控方法下的监控项目，初始信息包括错误日志信息、和/或性能信息、和/或用户上报信息；其中，错误日志信息包括：js报错日志信息、和/或静态资源加载错误日志信息、和/或服务请求接口错误日志信息；性能信息包括：资源加载内容、和/或是否加载成功信息、和/或加载时间；用户上报信息包括：用户行为信息、和/或用户自行上报信息。
46.可以理解的是，此处调用的预设监控函数用于接口监控、错误监控、性能监控和pv/uv监控等，从而收集和处理相关方面的初始信息，预设监控函数具体为设于handlewatch中的回调函数，handlewatch用于放置所有回调函数，便于从中调用回调函数以及后续对回调函数的扩展增加，后期程序开发时可通过穿插hook钩子函数添加新的回调函数，通过预先暴露出的回调函数extend()来实现基于用户个性化需求的自定义扩展；例如在vue 2.x版本中，可用的回调函数包括vue.config.errorhandler、vue.config.warnhandler、componentdidcatch、onerror中的一个或多个，其中vue.config.errorhandler、vue.config.warnhandler用于处理报错函数的回调，react库中选择钩子函数componentdidcatch，从而获取错误信息，钩子函数onerror作为小程序提供的回调函数对错误信息进行获取。
47.进一步的，除了以上特定函数外，js报错日志信息可以通过window.onerror进行监听，服务请求接口错误日志信息可通过统一拦截接口请求，然后根据配置来采集接口的报错信息；此外，考虑到大型应用中，日志量较大，为了降低获取到的日志数量，可通过抽样、和/或合并、和/或过滤等方法对日志进行预处理。
48.进一步的，性能信息的收集主要来自于资源加载过程，因此可通过performance.getentries()来获取相关的性能信息；至于用户上报信息，其中用户行为信息属于用户行为的收集，例如某个按钮的点击分析，用户自行上报信息则属于用户自行上报的内容，其形式一般为自定义名称-自定义内容；
49.s2：对所有初始信息进行数据分析，得到分析结果；
50.可以理解的是，此处数据分析基于初始信息进行，针对不同的平台站点，其分析依据和分析方向存在差异，具体应根据平台站点的设计需求进行调整。
51.s3：根据分析结果上报错误信息；
52.进一步的，该步骤包括：根据分析结果，通过爬取异步请求的post方式上报错误信息。
53.可以理解的是，该方式中请求的body参数没有长度限制，上报时可以进行日志聚合。为了避免请求过于频繁，可以将上传日志的请求放入日至队列中，每隔预设周期发送一
次日志信息。
54.进一步的，通过爬取异步请求的post方式上报错误信息的过程还包括：当页面突然退出，通过监听beforeunload事件，利用sendbeacon上报错误信息；或，当移动端突然收到home键返回指令，利用visibilitychange事件和pagehide事件上报错误信息。也就是说，如果产生突发情况，导致上报错误信息的动作发生中断，可使用以上方法完成错误信息的上报。
55.除此外，还可通过后端服务进行错误信息的上报通知，具体通知方式包括app推送、邮箱推送、短信等，实时向相关技术人员反馈错误信息。
56.s4：通过可视化平台显示分析结果；
57.进一步的，可视化平台包括网页端、和/或移动端h5、和/或小程序。
58.可以理解的是，通过可视化平台显示该分析结果时，可选择多维度的图标进行展示，例如对数据统计聚类，发生异常的情况进行统计，从时间、地域、网络ip等不同维度加以统计，从而确定异常影响范围并确定规律，例如js异常，还可通过source map映射源码，快速定位到报错的具体代码。该过程中关于数据分析部分在步骤s2中即可完成，步骤s4仅将该分析结果以统计图表、和/或示意图表、和/或错误操作的录屏回放的形式表示出来。
59.具体的，本实施例中支持的可视化平台包括但不限于网页端、移动端h5和小程序，针对不同的可视化平台，使用的预设监控函数可能存在差异，所有预设监控函数均已内置于handlewatch中，根据不同可视化平台的需求进行选择即可。
60.进一步的，监控方法还包括：
61.s5：存储所有初始信息和分析结果。
62.具体的，该步骤包括：结合koa架构和mongodb数据库，以存储所有初始信息和分析结果。
63.可以理解的是，除了在前端可视化平台显示分析结果，后端也通过一定的手段将分析结果以及初始信息进行持久化存储。其中koa架构属于node，node适用于io密集型场景，尤其符合前端技术栈的需求，在数据库方面，mongodb数据库作为文档模型数据库，数据扩展方便，其结构与json类似，便于配合node，二者结合作为日志系统，非常适合在本实施例的前端监控中进行信息存储。
64.进一步的，存储所有初始信息和分析结果的过程，还包括：
65.对所有初始信息和分析结果进行数据脱敏处理。
66.可以理解的是，初始信息和分析结果中可能存在敏感数据或个人隐私，为了避免数据泄露，可在存储前对初始信息和分析结果进行数据脱敏处理，包括对敏感信息进行打码、屏蔽等措施。
67.可以理解的是，本实施例中平台站点的监控方法，可以sdk的形式实现，该sdk适配于多种平台，可使用发布订阅模式，以便后续功能迭代，sdk对监控项目的区分采用script标签，只要携带监控项目，也即平台站点的相关信息码和版本号即可确定待监控的平台站点，具体形式如下：
68.《script src＝"xxxx/jssdk.js？key＝xxx&v＝xxx"async》《/script》。
69.实际应用时需要将初始化的参数处理后重新写入全局变量，然后依次执行初始化预设监控函数，如图2所示。该sdk可支持二次开发，接口扩展性强，具有直观的可视化展示
效果，同时支持多种报错通知方式。
70.利用本实施例中的方法，可将多个内部前端产品进行统一监控，当产品出现任何安全问题，均可将错误信息及时通知到技术人员，其内部存储的初始信息和分析结果可供技术人员对错误进行追溯和排查，技术人员可根据得到的初始信息和分析结果进行产品分析、用户行为分析，进而有针对性地进行优化。
71.本技术实施例将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。
72.相应的，本技术实施例还公开了一种平台站点的监控系统，参见图3所示，包括：
73.收集模块1，用于调用预设监控函数，对平台站点的各类初始信息进行收集；
74.分析模块2，用于对所有所述初始信息进行数据分析，得到分析结果；
75.上报模块3，用于根据所述分析结果上报错误信息；
76.显示模块4，用于通过可视化平台显示所述分析结果；
77.所述可视化平台包括网页端、和/或移动端h5、和/或小程序。
78.本技术实施例将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。
79.在一些具体的实施例中，所述初始信息包括错误日志信息、和/或性能信息、和/或用户上报信息；
80.所述错误日志信息包括：js报错日志信息、和/或静态资源加载错误日志信息、和/或服务请求接口错误日志信息；
81.所述性能信息包括：资源加载内容、和/或是否加载成功信息、和/或加载时间；
82.所述用户上报信息包括：用户行为信息、和/或用户自行上报信息。
83.在一些具体的实施例中，所述预设监控函数具体为设于handlewatch中的回调函数；
84.所述回调函数包括vue.config.errorhandler、和/或vue.config.warnhandler、和/或componentdidcatch、和/或onerror。
85.在一些具体的实施例中，上报模块3具体用于根据所述分析结果，通过爬取异步请求的post方式上报错误信息。
86.在一些具体的实施例中，上报模块3还用于当页面突然退出，通过监听beforeunload事件，利用sendbeacon上报所述错误信息；或，当移动端突然收到home键返回指令，利用visibilitychange事件和pagehide事件上报所述错误信息。
87.在一些具体的实施例中，所述监控系统还包括：
88.存储模块5，用于存储所有所述初始信息和所述分析结果。
89.在一些具体的实施例中，存储模块5用于结合koa架构和mongodb数据库，以存储所有所述初始信息和所述分析结果。
90.在一些具体的实施例中，存储模块5还用于对所有所述初始信息和所述分析结果
进行数据脱敏处理。
91.进一步的，本技术实施例还公开了一种可读存储介质，这里所说的可读存储介质包括随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动硬盘、cd-rom或技术领域内所公知的任意其他形式的存储介质。可读存储介质中存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
92.调用预设监控函数，对平台站点的各类初始信息进行收集；
93.对所有所述初始信息进行数据分析，得到分析结果；
94.根据所述分析结果上报错误信息；
95.通过可视化平台显示所述分析结果；
96.所述可视化平台包括网页端、和/或移动端h5、和/或小程序。
97.本技术实施例将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。
98.在一些具体的实施例中，所述初始信息包括错误日志信息、和/或性能信息、和/或用户上报信息；
99.所述错误日志信息包括：js报错日志信息、和/或静态资源加载错误日志信息、和/或服务请求接口错误日志信息；
100.所述性能信息包括：资源加载内容、和/或是否加载成功信息、和/或加载时间；
101.所述用户上报信息包括：用户行为信息、和/或用户自行上报信息。
102.在一些具体的实施例中，所述预设监控函数具体为设于handlewatch中的回调函数；
103.所述回调函数包括vue.config.errorhandler、和/或vue.config.warnhandler、和/或componentdidcatch、和/或onerror。
104.在一些具体的实施例中，所述可读存储介质中存储的计算机子程序被处理器执行时，具体可以实现以下步骤：根据所述分析结果，通过爬取异步请求的post方式上报错误信息。
105.在一些具体的实施例中，所述可读存储介质中存储的计算机子程序被处理器执行时，具体可以实现以下步骤：当页面突然退出，通过监听beforeunload事件，利用sendbeacon上报所述错误信息；或，当移动端突然收到home键返回指令，利用visibilitychange事件和pagehide事件上报所述错误信息。
106.在一些具体的实施例中，所述可读存储介质中存储的计算机子程序被处理器执行时，具体可以实现以下步骤：存储所有所述初始信息和所述分析结果。
107.在一些具体的实施例中，所述可读存储介质中存储的计算机子程序被处理器执行时，具体可以实现以下步骤：结合koa架构和mongodb数据库，以存储所有所述初始信息和所述分析结果。
108.在一些具体的实施例中，所述可读存储介质中存储的计算机子程序被处理器执行时，具体可以实现以下步骤：对所有所述初始信息和所述分析结果进行数据脱敏处理。
109.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将
一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
110.以上对本发明所提供的一种平台站点的监控方法、系统及可读存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

技术特征：
1.一种平台站点的监控方法，其特征在于，包括：调用预设监控函数，对平台站点的各类初始信息进行收集；对所有所述初始信息进行数据分析，得到分析结果；根据所述分析结果上报错误信息；通过可视化平台显示所述分析结果；所述可视化平台包括网页端、和/或移动端h5、和/或小程序。2.根据权利要求1所述监控方法，其特征在于，所述初始信息包括错误日志信息、和/或性能信息、和/或用户上报信息；所述错误日志信息包括：js报错日志信息、和/或静态资源加载错误日志信息、和/或服务请求接口错误日志信息；所述性能信息包括：资源加载内容、和/或是否加载成功信息、和/或加载时间；所述用户上报信息包括：用户行为信息、和/或用户自行上报信息。3.根据权利要求1所述监控方法，其特征在于，所述预设监控函数具体为设于handlewatch中的回调函数；所述回调函数包括vue.config.errorhandler、和/或vue.config.warnhandler、和/或componentdidcatch、和/或onerror。4.根据权利要求1所述监控方法，其特征在于，所述根据所述分析结果上报错误信息的过程，包括：根据所述分析结果，通过爬取异步请求的post方式上报错误信息。5.根据权利要求4所述监控方法，其特征在于，所述通过爬取异步请求的post方式上报错误信息的过程还包括：当页面突然退出，通过监听beforeunload事件，利用sendbeacon上报所述错误信息；或，当移动端突然收到home键返回指令，利用visibilitychange事件和pagehide事件上报所述错误信息。6.根据权利要求1至5任一项所述监控方法，其特征在于，还包括：存储所有所述初始信息和所述分析结果。7.根据权利要求6所述监控方法，其特征在于，所述存储所有所述初始信息和所述分析结果的过程，包括：结合koa架构和mongodb数据库，存储所有所述初始信息和所述分析结果。8.根据权利要求6所述监控方法，其特征在于，所述存储所有所述初始信息和所述分析结果的过程，还包括：对所有所述初始信息和所述分析结果进行数据脱敏处理。9.一种平台站点的监控系统，其特征在于，包括：收集模块，用于调用预设监控函数，对平台站点的各类初始信息进行收集；分析模块，用于对所有所述初始信息进行数据分析，得到分析结果；上报模块，用于根据所述分析结果上报错误信息；显示模块，用于通过可视化平台显示所述分析结果；所述可视化平台包括网页端、和/或移动端h5、和/或小程序。10.一种可读存储介质，其特征在于，所述可读存储介质上存储有计算机程序，所述计
算机程序被处理器执行时实现如权利要求1至8任一项所述平台站点的监控方法的步骤。

技术总结
本申请公开了一种平台站点的监控方法、系统及可读存储介质，该方法包括：调用预设监控函数，对平台站点的各类初始信息进行收集；对所有初始信息进行数据分析，得到分析结果；根据分析结果上报错误信息；通过可视化平台显示分析结果；可视化平台包括网页端、和/或移动端H5、和/或小程序。本申请将监控中涉及到的函数设为预设监控函数，调用该预设监控函数对各类初始信息进行收集，然后分析得到分析结果并上报错误信息，再通过多种形式的可视化平台显示该分析结果，可适用于多种形式的显示平台，同时方法中使用的预设监控函数可随时进行二次开发和自定义，具有较高的兼容性，可灵活满足各类用户的不同需求。各类用户的不同需求。各类用户的不同需求。


技术研发人员：梁成军 范渊 刘博
受保护的技术使用者：杭州安恒信息技术股份有限公司
技术研发日：2021.12.03
技术公布日：2022/3/8