How can I pass an error message from the server backend to vue frontend-CodePudding

I am working on error handling for an application built in Vue/Vuetify. I am using external pagination for a datatable that links to an API that only allows so many hits in a period of time. Because of that, I'm trying to pass through and display an error of "Too Many Requests" on the front end for users when they hit that limit.

The issue I'm having though is passing that error from the backend server to the frontend. When it errors on the front end, it just gives a 500 error. However, the server log is giving me the actual error happening. How can I get that to pass? Below is the relevant javascript code from the server and the front end.

For note: I've been using eventbus to display errors throughout the project. But up until now, I haven't had to pass any from the back to front.

Backend Server

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);
    }
    catch (err) {
      console.log(err);      
    }
    ;
    // .then(res => console.log(res))
    // .catch(err => console.error(err));
    // console.log(response);
    return response
  }

};

FRONTEND

export default {
  name: "Search",
  components: {},
  props: ["funderDirectories", "serverItemsLength"],
  data() {
    return {
      page: 1,
      usericon: usericon,
      greentick: greentick,
      listicon: listicon,
      training: training,
      keyword: null,
      funderHeaders: [
        { text: "Organization", value: "funder_name" },
        { text: "City", value: "funder_city" },
        { text: "Country", value: "funder_country" },
        { text: "Count", value: "grant_count" },
      ],
      myloadingvariable: false,
      pageCount: 1,
      itemsPerPage: 25,
    };
  },
  watch: {
    page() {
      Vue.$funderService.find({ page: this.page }).then((res) => {
        this.funderDirectories = res.data.rows;
        this.serverItemsLength = res.data.total_hits;
      });
    },
  },
  methods: {},

  computed: {
    filteredFunderDirectories() {
      if (!this.keyword) {
        return this.funderDirectories;
      }

      return this.funderDirectories.filter(
        (q) =>
          q.funder_name.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1
      );
    },
  },
};

CodePudding user response：

I haven't tested my example yet, but you could try to return the error in the catch block like this:

try {
  var response = await sdk.auth(key)['grants_funders'](locale);
  return response;
}
catch (err) {
  console.log(err);    
  return err;  
}

find2(ctx) {
  return new Promise((resolve, reject) => {
    var page = ctx.query.page;
    var key = "";
    var locale = { location: "", location_type: "", page: page };
    const sdk = require("api")("@");

    resolve(sdk.auth(key)["grants_funders"](locale));
  });
}

and in the frontend

Vue.$funderService.find({ page: this.page }).then((res) => {
    this.funderDirectories = res.data.rows;
    this.serverItemsLength = res.data.total_hits;
  }).catch(error => {
    console.log(error) 
  })

CodePudding user response：

Ultimately figured it out. added the following to the backend catch

 return ctx.send({errorStatus:"Too Many Requests. Please Wait"},429)

And I was able to call