用于排查前端页面问题的方法、装置及系统制造方法及图纸

本申请实施例公开了一种用于排查前端页面问题的方法及装置，以及一种提供前端页面监控信息的方法及装置，以及一种用于排查前端页面问题的系统。所述方法包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。采用上述方法，解决现有前端开发人员难以对出现问题的页面进行问题排查的问题。

【技术实现步骤摘要】
用于排查前端页面问题的方法、装置及系统
本申请实施例涉及前端页面
，具体涉及一种用于排查前端页面问题的方法及装置，以及一种提供前端页面监控信息的方法及装置，以及一种用于排查前端页面问题的系统。
技术介绍
随着应用业务的发展，业务逻辑也纷繁复杂，前端页面可能需要在不同的环境下进行显示，例如，不同的系统(IOS、Android等)、不同的客户端以及不同厂商的Webview等。由于前端页面需要适应各种不同的场景，因此使得前端开发人员在开发前端页面时难度加大，需要考虑的问题也增多。某些场景下，如果前端页面在展示过程中出现问题(例如，样式或者逻辑问题)，由于前端开发人员无法获知前端页面在展示过程中的相关信息，因此难以对出现问题的页面进行问题排查，特别是对于偶现问题的前端页面，排查难度更大。如何获取前端页面在展示过程中的相关信息、供开发人员利用这些信息进行问题页面的排查，成为了亟待解决的问题。
技术实现思路
本申请实施例提供一种用于排查前端页面问题的方法，以解决现有前端开发人员难以对出现问题的页面进行问题排查的问题。所述用于排查前端页面问题的方法包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。可选的，所述根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查的步骤，包括：根据查询请求从所述数据库中读取被请求页面的监控信息，并显示所述被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。可选的，所述被请求页面的监控信息至少包括：被请求页面的截图；所述显示所述被请求页面的监控信息，包括：至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程。可选的，所述被请求页面的截图的数目为两个或者两个以上，且每个截图对应不同的采集时间点；所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：至少通过按照采集时间点依次显示被请求页面的截图，以动画效果重现被请求页面在所述客户端设备上的展示过程。可选的，所述被请求页面的监控信息还包括以下所列的辅助信息：页面的html内容、页面用户事件、页面内存、CPU利用率、和/或调试信息；所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：通过显示被请求页面的截图以及辅助信息，重现被请求页面在所述客户端设备上的展示过程。可选的，所述接收客户端设备上传的关于前端页面的监控信息，包括：接收由前端页面的JS脚本上传的关于前端页面的监控信息；和/或，接收展示前端页面的客户端上传的关于前端页面的监控信息。可选的，所述接收客户端设备上传的关于前端页面的监控信息，包括：定时接收所述客户端设备上传的关于前端页面的监控信息；或者，定期接收所述客户端设备上传的关于前端页面的监控信息。可选的，所述查询请求携带的信息至少包括：被请求页面的URL、和展示被请求页面的客户端设备的标识；或者，被请求页面的URL、和使用被请求页面的用户标识。可选的，所述查询请求携带的信息还包括：采集时间点或者时间段。可选的，在根据查询请求从所述数据库中读取被请求页面的监控信息之后，在供开发人员对所述被请求页面进行问题排查之前，还包括：若所述读取的监控信息中包括进行过采样处理和/或压缩处理的部分信息，则对所述部分信息进行相应的还原处理。本申请实施例还提供一种用于排查前端页面问题的装置，所述装置包括：接收信息单元，用于接收客户端设备上传的关于前端页面的监控信息；存储信息单元，用于将接收单元接收到的所述关于前端页面的监控信息存储到数据库中；查询信息单元，用于根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。本申请实施例还提供一种提供前端页面监控信息的方法，其特征在于，包括：在展示前端页面的过程中，基于在所述前端页面内插入的JS脚本获取关于所述前端页面的监控信息；将所述监控信息上传至服务端，供开发人员进行问题排查。可选的，所述基于在所述前端页面内插入的JS脚本获取关于所述前端页面的监控信息，包括：利用在所述前端页面内插入的JS脚本获取所述监控信息；和/或，通过在所述前端页面内插入的JS脚本调用客户端提供的接口获取所述监控信息。可选的，在将所述监控信息上传至服务端的步骤之前，还包括：对所述监控信息进行数据处理，以减少上传的数据量；所述将所述监控信息上传至服务端，包括：将进行数据处理后的监控信息上传至服务端。可选的，所述对所述监控信息进行数据处理，包括：若所述监控信息中存在对应于同一监控项的相似监控信息，则对所述相似监控信息进行采样处理，其中，所述相似监控信息中存在一监控信息与其他各监控信息的相似度都大于预设阈值；和/或，对所述监控信息中的重复数据和/或截图进行压缩处理。可选的，在展示前端页面的过程中，在基于在所述前端页面内插入的JS脚本获取关于所述前端页面的监控信息之前，包括：利用所述JS脚本对监控信息包括的监控项进行配置。可选的，所述将所述监控信息上传至服务端，包括：由所述JS脚本将所述监控信息上传至服务端；和/或，由客户端将所述监控信息上传至服务端。可选的，所述由客户端将所述监控信息上传至服务端，包括：所述JS脚本调用客户端提供的接口将所述监控信息存储在所述客户端本地；所述客户端将已存储的监控信息上传至所述服务端。可选的，所述将所述监控信息上传至服务端，包括：定时将所述监控信息上传至服务端；或者，定期将所述监控信息上传至服务端。本申请实施例还提供一种提供前端页面监控信息的装置，所述装置包括获取信息单元，用于在展示前端页面的过程中，基于在所述前端页面内插入的JS脚本获取关于所述前端页面的监控信息；上传信息单元，用于将获取信息单元获取的所述监控信息上传至服务端，供开发人员进行问题排查。本申请实施例还提供一种用于排查前端页面问题的系统，所述系统包括：上述的用于排查前端页面问题的装置、提供前端页面监控信息的装置、以及用于存储前端页面监控信息的数据库。。与现有技术相比，本申请实施例具有以下优点:本申请实施例提供一种用于排查前端页面问题的方法，所述方法包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。本申请实施例提供的用于排查前端页面问题的方法，通过客户端设备将关于前端页面的监控信息上传至服务端，由服务端将监控信息存储到数据库中，当前端页面出现问题、甚至是机率很低的偶现问题时，开发人员通过从数据库中查询出现问题的前端页面的监控信息，能够非常方便地进行问题排查。可见，本申请解决了现有前端开发人员难以对出现问题的页面进行问题排查的问题，显著提升对前端页面进行问题排查的效率。附图说明图1是本申请第一实施例提供的一种提供前端页面监控信息的方法的流程图。图2是本申请第二实施例提供的一种用于排查前端页面问题的方法的流程图；图3是本申请第三实施例提供的一种提供前端页面监控信息的装置的示意图。图4是本申请第四实施例本文档来自技高网...

【技术保护点】
1.一种用于排查前端页面问题的方法，其特征在于，包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。

【技术特征摘要】
1.一种用于排查前端页面问题的方法，其特征在于，包括：接收客户端设备上传的关于前端页面的监控信息；将接收到的所述关于前端页面的监控信息存储到数据库中；根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。2.根据权利要求1所述的方法，其特征在于，所述根据查询请求从所述数据库中读取被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查的步骤，包括：根据查询请求从所述数据库中读取被请求页面的监控信息，并显示所述被请求页面的监控信息，供开发人员对所述被请求页面进行问题排查。3.根据权利要求2所述的方法，其特征在于，所述被请求页面的监控信息至少包括：被请求页面的截图；所述显示所述被请求页面的监控信息，包括：至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程。4.根据权利要求3所述的方法，其特征在于，所述被请求页面的截图的数目为两个或者两个以上，且每个截图对应不同的采集时间点；所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：至少通过按照采集时间点依次显示被请求页面的截图，以动画效果重现被请求页面在所述客户端设备上的展示过程。5.根据权利要求3所述的方法，其特征在于，所述被请求页面的监控信息还包括以下所列的辅助信息：页面的html内容、页面用户事件、页面内存、CPU利用率、和/或调试信息；所述至少通过显示被请求页面的截图，重现被请求页面在所述客户端设备上的展示过程，包括：通过显示被请求页面的截图以及辅助信息，重现被请求页面在所述客户端设备上的展示过程。6.根据权利要求1所述的方法，其特征在于，所述接收客户端设备上传的关于前端页面的监控信息，包括：接收由前端页面的JS脚本上传的关于前端页面的监控信息；和/或，接收展示前端页面的客户端上传的关于前端页面的监控信息。7.根据权利要求1所述的方法，其特征在于，所述接收客户端设备上传的关于前端页面的监控信息，包括：定时接收所述客户端设备上传的关于前端页面的监控信息；或者，定期接收所述客户端设备上传的关于前端页面的监控信息。8.根据权利要求1所述的方法，其特征在于，所述查询请求携带的信息至少包括：被请求页面的URL、和展示被请求页面的客户端设备的标识；或者，被请求页面的URL、和使用被请求页面的用户标识。9.根据权利要求8所述的方法，其特征在于，所述查询请求携带的信息还包括：采集时间点或者时间段。10.根据权利要求1所述的方法，其特征在于，在根据查询请求从所述数据库中读取被请求页面的监控信息之后，在供开发人员对所述被请求页面进行问题排查之前，还包括：若所述读取的监控信息中包括进行过采样处理和/或压缩处理的部分信息，则对所述部分信息进行相应的还原处理。11.一种用于排查前端页面问题的装置，其特征在于，包括：接收信息单...

【专利技术属性】
技术研发人员：刘重阳，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛,KY