[发明专利]一种混合开发中基于vue的前端错误日志上传方法及系统

说明书

本发明涉及一种混合开发中基于vue的前端错误日志上传方法及系统，包括监听前端页面是否产生错误信息；当前端页面产生错误信息时，捕获所述错误信息；基于所述错误信息获取相关场景参数信息和用户参数信息；触发错误上报程序，调用上报错误函数，上报错误函数将所述错误信息、场景参数信息和用户参数包装生成第一参数字符串，拼接在一个1px*1px的图片链接中，生成第一日志信息；将第一日志信息上报至服务器；服务器接收第一日志信息后，将第一日志信息存储至服务器日志文件中，以使后台人员通过所述服务器日志文件进行错误信息的查看、还原和解决。可复现用户出现错误问题当时的场景，开发者可以在日志信息中查看前端生产缺陷情况，评估生产代码质量。

技术领域

本发明涉及计算机技术领域，尤其涉及一种混合开发中基于vue的前端错误日志上传方法及系统。

背景技术

混合开发是前端页面在APP客户端中运行，并能通过jsbridge(客户端和前端页面的一种通讯方法)调用一部分客户端的能力。

目前前端生产错误日志上报查询方案包括：

1.直接在浏览器中打开页面链接查看控制台输出的前端页面错误日志信息。但是，在混合开发中会用到很多客户端提供的jsbridge方法，如果脱离客户端这部分此方法将无法工作，无法完整地查看错误日志信息。

2.使用vconsole日志查看工具查看前端页面输出的错误日志信息。测试环境可以使用vconsole这类日志查看工具来帮助开发者开发前端页面，但是生产环境为了软件程序的安全性和美观性，是会去掉vconsole这类日志查看工具的，所以也就无法查看生产错误日志信息。

3.使用usb数据线连接电脑，打开浏览器的真机调试模式查看控制台输出的前端页面错误日志信息。同样测试环境可以开启webview调试模式来帮助开发者开发前端页面；但是生产环境为了软件程序的安全性，客户端会关闭webview的调试通道，所以也就无法连接浏览器从而也就无法查看生产错误日志信息。

4.客服人员询问客户具体的错误场景，还原错误信息。此种方案浪费人力，耗时长，无法有效的定位错误原因。

同时上述方案也存在一些共性的缺陷问题。前端页面普遍性的问题大部分在测试环境开发阶段都能被测试或者开发者发现并解决。所以生产环境的错误通常具有特异性，非普遍性，可能跟用户设备有关，也可能和用户的账户信息相关。开发者想要复现问题就需要更多的信息判断问题出在哪里，所以触发错误当时的场景很重要，以上方式也无法解决该问题。

发明内容

为了解决上述背景技术中提到的至少一个问题，本发明提出一种混合开发中基于vue的前端错误日志上传方法及系统方法及系统，可复现用户出现错误问题当时的场景，开发者可以在日志信息中查看前端生产缺陷情况，评估生产代码质量。

为实现以上目的，本发明所采用的技术方案包括：

一种混合开发中基于vue的前端错误日志上传方法，包括：

监听前端页面是否产生错误信息；

当所述前端页面产生错误信息时，捕获所述错误信息；

基于所述错误信息获取相关场景参数信息和用户参数信息；

触发错误上报程序，调用上报错误函数，所述上报错误函数将所述错误信息、场景参数信息和用户参数包装生成第一参数字符串，拼接在一个1px*1px的图片链接中，生成第一日志信息；

将所述第一日志信息上报至服务器；

所述服务器接收所述第一日志信息后，将所述第一日志信息存储至服务器日志文件中，以使后台人员通过所述服务器日志文件进行错误信息的查看、还原和解决。