vue前端打包发布教程交流（使用果创云API低代码）
对于使用Vue等框架进行前端开发，项目打包发布到正式环境后，如果需要收集前端js报错等信息，应该如何收集，更加快速方便、接入简单？
例如收集以下这些js的报错信息，方便前端开发人员定时查看日记，不断优化产品体验。
YesApi.cn 果创云，是一个API低代码开发平台。为开发者提供后端API接口低代码开发平台，一个账号，让你轻松搞定后端API开发，支持在线设计、开发和调用你的数据API接口。
创建数据模型，添加字段首先，在自己的账号上，创建一个数据模型，名称为：XXX前端报错。
这里，我们为了给YesDev项目管理接入前端报错，所以名称填写了：YesDev前端报错；模型英文名称填了：yesdev_vue_error。你可以根据自己的需要调整名称，后面开发会用到。
进入：http://open.yesapi.cn/?r=Data/MyModelsCreate
创建数据模型后，再继续添加以下几个字段。后面在上报错误日记时，需要用到的存储字段。
前端字段有：
- error_info，例如：TypeError: Cannot read properties of null (reading 'clearPolling')
- life_cycle_info，例如：mounted hook
- route_info，例如：http://localhost:8080/home
添加字段时，可以设置字段的类型，和其他属性。
业务字段，可以根据自己的需要添加，例如当前的账号ID。如果是做SaaS服务的，可以记录是哪家企业，例如 app_key。添加字段后，数据模型的表结构如下：
第二步，就是在Vue代码中，调用API接口上报前端的错误信息。
先看可以使用哪个API接口，进行错误数据的上报。
使用 1801 创建新数据接口 App.Table.Create，可以创建一条新数据。以下是接口文档：
http://api.yesapi.cn/docs-api-App.Table.Create.html
先来简单测试一下API接口，model_name选择或输入你的模型名称：yesdev_vue_error，模拟的报错数据是：{"error_info":"测试数据"}，使用JSON格式传递。
点击【进入在线测试】，可以看到接口已经调用成功。
调用的接口链接：
http://api.yesapi.cn/?&s=App.Table.Create&return_data=0&model_name=yesdev_vue_error&data={"error_info":"测试数据"}
返回的接口结果：
{
"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 = 'http://api.yesapi.cn/' // 果创云接口域名
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接口上报数据后，就可以进入控制台查看前端报错的日记和数据了。
你可以搜索、翻页、导出。
还可以点击查看单条的JSON数据，例如：
对应的原始日志数据是：
{
"id": 576,
"error_info": "TypeError: Cannot read properties of undefined (reading 'cb')",
"life_cycle_info": "mounted hook",
"route_info": "http://localhost:8081/requirements/reqm-detail?id=1076&through=true",
"app_key": "gc",
"staff_id": "8894",
"uuid": "",
"add_time": "2022-08-05 13:12:56",
"update_time": null,
"ext_data": null
}
如果你需要分享给团队其他成员查看，也可以创建一个子账号，并分配此数据模型的权限。
再进一步，进阶操作，如果你需要统计每日前端的报错图表统计，可以进入自助统计图表。
http://open.yesapi.cn/?r=Data/TableReportManager
点击，创建一个新图表。
选择刚才的数据模型：YesDev前端报错
选择统计的指标，
报表名称：前端报错每日统计
输出字段：COUNT(id) - 数目
统计日期字段：dd_time - 系统添加时间
时间范围：最近一个月
图表类型：柱状图
最后，确认创建。
就可以看到类似以下的统计图表了。目前刚开始还没有数据，所以图表为空，也有表格数据。
果创云是一个API低代码开发平台，同时配备了数据库存储，可以自定义表字段，还有丰富的控制台，可以协同管理，分配模型权限。以及可以自助生成的API接口、可以自助生成的统计图表、可以自动生成的数据库管理界面。
搭建前端开发，很是方便。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
