How to Handle Axios/Ajax Errors Gracefully

Axios errors can be a nightmare, there are many different kind of errors and the structure of error thrown may be pretty different from each other, So they may be difficult to handle, To overcome this, I have created a simple JavaScript function or method you can say, you can use that in any framework of your choice, I am using this in VueJs, so it may be little bit designed in that way

ErrorHandlingMixin.vue




<script>
export default {
  props: {},
  computed: {},
  methods: {
    /*

    This method  handles the error occurred when some vuex dispatch to fetch items from API received the error,
    For example, there is an unauthenticated error or something
     */
    handleFetchError(error, customMessages = {}) {
      this.handleError(error, customMessages)
    },
    /*
    This method is like wrapper for error returned by  axios request,
     */
    handleError(error, customMessages = {}) {
      // Quasar Toast Schema
      const errorResponse = {
        isValidationError: false,
        message: 'Network Error.',
        type: 'error',
        errors: [],
        timeout: 2500,
      }
      const ErrorMessages = {
        400: 'There was Some Problem, while processing your Request', // not being used currently
        401: 'Unauthorized, You are not Allowed',
        403: 'Sorry, You are not allowed for This Action',
        404: 'API Route is Missing or Undefined',
        405: 'API Route Method Not Allowed',
        500: 'Server Error, please try again later',
        request:
          'There is Some Problem With Our Servers, Please Try again Later',
        other:
          'There was some Problem with your Request, Please Try again Later',
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '400')) {
        ErrorMessages['400'] = customMessages['400']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '401')) {
        ErrorMessages['401'] = customMessages['401']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '403')) {
        ErrorMessages['403'] = customMessages['403']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '404')) {
        ErrorMessages['404'] = customMessages['404']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '405')) {
        ErrorMessages['405'] = customMessages['405']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, '500')) {
        ErrorMessages['500'] = customMessages['500']
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, 'request')) {
        ErrorMessages.request = customMessages.request
      }
      if (Object.prototype.hasOwnProperty.call(customMessages, 'other')) {
        ErrorMessages.other = customMessages.other
      }
      if (error && error.response) {
        // client received an error response (5xx, 4xx)
        if (error.response.status === 400) {
          // console.log('unauthorized, logging out ...');
          errorResponse.message = error.response.data.message
        } else if (error.response.status === 401) {
          // console.log('unauthorized, logging out ...');
          errorResponse.message = ErrorMessages['401']
        } else if (error.response.status === 403) {
          errorResponse.message = ErrorMessages['403']
        } else if (error.response.status === 404) {
          errorResponse.message = ErrorMessages['404']
        } else if (error.response.status === 422) {
          errorResponse.isValidationError = true
          errorResponse.errors = error.response.data.errors
          errorResponse.message = error.response.data.message
        } else if (error.response.status === 405) {
          errorResponse.message = ErrorMessages['405']
        } else if (error.response.status >= 500) {
          errorResponse.message = ErrorMessages['500']
        } else if (error.response.status === 429) {
        }
      } else if (error && error.request) {
        errorResponse.message = ErrorMessages.request
        // client never received a response, or request never left
      } else if (error instanceof Error) {
        errorResponse.message = error.message
      } else if (typeof error === 'string') {
        errorResponse.message = error
      } else {
        //this.$buefy.toast.open({
        //  message: 'Going Too Fast hun?, Please Slow Down',
         // type: 'is-danger',
       // })
        // anything else
        errorResponse.message = ErrorMessages.other
      }
      return errorResponse
    },
  },
}
</script>

<template>
  <div></div>
</template>

<style lang="scss" scoped></style>

How to use it in components after importing ErrorHandlingMixin,

const self = this
await this.$axios.get(config.url)
        .then(function (response) {
          //self.$refs.formTop.scrollIntoView()
        })
        .catch(function (error) {
          const errorResponse = self.handleError(error) // if you want to customize the error message, you can send it as second parameter
          if (errorResponse.isValidationError) {
            self.formErrors = errorResponse.errors
            // self.$buefy.toast.open({
            //  message: errorResponse.message,
            //  type: 'is-danger'
            // })
            //self.$refs.errorsContainer.scrollIntoView()
          } else {
            //self.$buefy.toast.open({
            //  message: errorResponse.message,
            //  type: 'is-danger',
            //})
            self.form_result.type = errorResponse.type
            self.form_result.message = errorResponse.message
          }
        })

I have commented out the code that may be unnecessary for you, but it may give you a general idea.

form_result object gets the message and type of message 
(error or success), 

self.$buefy.toast.open -- giving the user notification about the error when required, use any library you like

Thanks for reading, let me know, if you need any help. Press like if you find useful. Thanks

Blog

How to Handle Axios/Ajax Errors Gracefully

Lakh Bawa

Join Our Newsletter. No Spam, Only the good stuff.

Related