洞察掌握android电视app开发中的安全与合规策略,提升企业运营效率
754
2022-08-30
使用果创云API低代码,快速收集vue的前端报错
如何收集vue前端报错信息?
对于使用Vue等框架进行前端开发,项目打包发布到正式环境后,如果需要收集前端js报错等信息,应该如何收集,更加快速方便、接入简单?
例如收集以下这些js的报错信息,方便前端开发人员定时查看日记,不断优化产品体验。
使用果创云API低代码快速收集
果创云,是一个API低代码开发平台。为开发者提供后端API接口低代码开发平台,一个账号,让你轻松搞定后端API开发,支持在线设计、开发和调用你的数据API接口。
创建数据模型,添加字段
首先,在自己的账号上,创建一个数据模型,名称为:XXX前端报错。
这里,我们为了给YesDev项目管理接入前端报错,所以名称填写了:YesDev前端报错;模型英文名称填了:yesdev_vue_error。你可以根据自己的需要调整名称,后面开发会用到。
进入:Cannot read properties of null (reading 'clearPolling')life_cycle_info,例如:mounted hookroute_info,例如:app_key。添加字段后,数据模型的表结构如下:
调用API上报接口
第二步,就是在Vue代码中,调用API接口上报前端的错误信息。
先看可以使用哪个API接口,进行错误数据的上报。
使用 1801 创建新数据接口 App.Table.Create,可以创建一条新数据。以下是接口文档:
"ret": 200, "data": { "err_code": 0, "err_msg": "", "id": 574, "model_name": "yesdev_vue_error" }, "msg": "", "_t": 1659673837, "_auth": "3b09dc4f778d68c0b8af454c4df154ff"}
接下来,就可以在Vue前端代码进行这个接口的调用了。
在Vue接入果创云上报接口
在你的vue项目,新建js文件 ./src/plugin/error-log/index.js,放置以下代码:
import HttpRequest from '@/libs/axios' const ErrorCollectionUrl = '// 果创云接口域名const axios = new HttpRequest(ErrorCollectionUrl)const ReportErrorCollection = data => axios.request({ method: 'post', url: 'api/App/Table/Create?return_data=0&app_key=你的app_key', data})const install = function (Vue) { let checkEnv = process.env.NODE_ENV === 'development' function errorHandler (err, vm, info) { console.error('error: ', err, '\n vm: ', vm, '\n info: ', info) const route = window.location.href if (checkEnv && vm) { Vue.nextTick( async () => { let { user = {} } = vm.$store ? vm.$store.state : {} let { app_key = '--', staff_id = -1 } = user.userProfile || {} let params = { error_info: err.toString(), life_cycle_info: info, route_info: route, ak: app_key, staff_id: staff_id } let res = await ReportErrorCollection(params) if (res.ret === 200) { } }) } } // 挂载在原型上 Vue.config.errorHandler = errorHandler}export default install
然后,在应用中引入封装好的错误上报接口。
打开./src/main.js文件,引入和使用:
import errorLog from '@/plugin/error-log/index.js'Vue.use(errorLog)
本地运行npm run dev 测试错误上报。
看到调用了果创云的接口,就表示已经是生效了。
查看报错日记
在前端vue通过果创云的API接口上报数据后,就可以进入控制台查看前端报错的日记和数据了。
你可以搜索、翻页、导出。
对应的原始日志数据是:
{"id": 576,"error_info": "TypeError: Cannot read properties of undefined (reading 'cb')","life_cycle_info": "mounted hook","route_info": ""gc","staff_id": "8894","uuid": "","add_time": "2022-08-05 13:12:56","update_time": null,"ext_data": null}
如果你需要分享给团队其他成员查看,也可以创建一个子账号,并分配此数据模型的权限。
图表统计前端的每日错误上报
再进一步,进阶操作,如果你需要统计每日前端的报错图表统计,可以进入自助统计图表。
- 数目
统计日期字段:dd_time - 系统添加时间
时间范围:最近一个月
图表类型:柱状图
最后,确认创建。
就可以看到类似以下的统计图表了。目前刚开始还没有数据,所以图表为空,也有表格数据。
小结
果创云是一个API低代码开发平台,同时配备了数据库存储,可以自定义表字段,还有丰富的控制台,可以协同管理,分配模型权限。以及可以自助生成的API接口、可以自助生成的统计图表、可以自动生成的数据库管理界面。
搭配前端开发,很是方便。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~