vue前端打包发布教程交流（使用果创云API低代码）

如何收集vue前端报错信息？

对于使用Vue等框架进行前端开发，项目打包发布到正式环境后，如果需要收集前端js报错等信息，应该如何收集，更加快速方便、接入简单？

例如收集以下这些js的报错信息，方便前端开发人员定时查看日记，不断优化产品体验。

使用果创云API低代码快速收集

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。添加字段后，数据模型的表结构如下：

调用API上报接口

第二步，就是在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接口、可以自助生成的统计图表、可以自动生成的数据库管理界面。

搭建前端开发，很是方便。

,