How to Handle Axios/Ajax Errors Gracefully
Tags: vue, nuxt, javascript, react
Published: 2020-08-09 05:13:48

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
```javascript



<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,

```javascript
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