使用果创云API低代码,快速收集vue的前端报错

原创
2022/08/05 14:07
阅读数 97

如何收集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接口、可以自助生成的统计图表、可以自动生成的数据库管理界面。

搭配前端开发,很是方便。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部