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
      );
    },
  },
};