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
Top comments (0)