如何将服务端的真实错误信息传递到Vue前端并展示

1. 后端错误透传逻辑修改 #

你当前后端捕获SDK异常后仅做了本地日志打印，没有主动设置响应信息，框架会默认返回无业务信息的500错误，需要补充catch块的响应逻辑：

module.exports = {
  async find(ctx) {
    var page = ctx.query.page;
    var key = '';
    var locale = { location: '', location_type: '', page: page };
    const sdk = require('api')('@');
    try {
      var response = await sdk.auth(key)['grants_funders'](locale);
      return response;
    } catch (err) {
      console.log(err);
      // 根据SDK实际返回的错误结构判断是否为限流错误，可结合你本地打印的err日志调整判断条件
      const isRateLimit = err.status === 429 || err.message?.includes('Too Many Requests')
      ctx.status = isRateLimit ? 429 : (err.status || 500)
      ctx.body = {
        code: ctx.status,
        message: isRateLimit ? 'Too Many Requests' : (err.message || '服务端处理异常')
      }
      return
    }
  }
};

2. 前端错误捕获逻辑修改 #

你当前前端请求仅处理了成功回调，没有捕获异常，需要补充catch逻辑，调用你项目的eventbus抛出错误提示：

watch: {
  page() {
    Vue.$funderService.find({ page: this.page }).then((res) => {
      this.funderDirectories = res.data.rows;
      this.serverItemsLength = res.data.total_hits;
    }).catch(err => {
      // 提取后端返回的错误信息，若$funderService有统一响应拦截，可根据实际封装调整取值逻辑
      const errorMsg = err?.response?.data?.message || '请求失败，请稍后重试'
      // 调用项目现有eventbus能力展示错误提示，事件名根据你项目实际封装调整即可
      Vue.$eventBus.$emit('showError', errorMsg)
    })
  },
},

如果你的$funderService是基于axios封装的，确保axios的响应拦截器没有吞掉错误，异常场景下要把错误throw出来才能被catch捕获。

内容的提问来源于stack exchange，提问作者M. Straw