Abstract
Most website service crashes are caused by network errors. Therefore, it is very important to reasonably catch network errors and notify the user and website maintenance personnel. This post will introduce: ① How to catch Vue axios error? ② How to notify the user that an error has occurred? ③ How to notify website maintenance personnel that an error has occurred?
Keywords: website , network request , Vue , axios , catch error.
Notify user
Using .catch() can easily catch error when Vue axios execute network requests. After catching the error, we should notify the user by printing the error time, the interface of the error report, and provide the user with a feedback channel, prompting the user to contact the website maintenance staff. In order to avoid further crashes of the website, an empty return value needs to be given after catching the error.
import axios from 'axios';
var base_url = "http://127.0.0.1:8199/api";
export default class NetWorkService {
//post method
postService(url, data) {
var posturl = base_url + url;
return axios.post(posturl, data, {
'headers': {}
}).then(res => {
if (res.data.code == 429) {
alert('error 429')
return {}
}
return res.data;
}).catch(function(err) {
//catch error
//get timestamp
var current_second=new Date().getTime();
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() +' ' + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
};
// notify user
var dateTime = new Date(current_second).toLocaleString();
alert("["+dateTime+"]\r\n"+posturl+"Eorror："+err+"\r\n if you need help please email to libertynlp@163.com");
//an empty response data is needed
var resp={
'code':-1,
'data':{},
}
return resp;
});
}
}
alert error infomation and break the operation
Notify maintenance personnel
In addition to prompting the user with the error message, it is more important to notify the maintainer of the website of the error so that the website can be quickly fixed. One of the good way is to post another service port to report the error. The message should also be the error time, interface, error detailed.
//modify catch function
catch(function(err) {
//catch error
//time
var current_second=new Date().getTime();
Date.prototype.toLocaleString = function() {
return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() +' ' + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
};
// notify user
var dateTime = new Date(current_second).toLocaleString();
alert("["+dateTime+"]\r\n"+posturl+"error："+err+"\r\n if you need help please email libertynlp@163.com");
// report error message to website maintenance personnel by posting another service port
var error_data = new URLSearchParams();
error_data.append("error_msg", "["+dateTime+"]\r\n"+posturl+"error："+err);
var error_url='http://127.0.0.1:8299/error-api/'
axios.post(error_url,error_data,{'headers':{}})
//empty reponse data
var resp={
'code':-1,
'data':{},
}
return resp;
});
Summarize
The crash of the website service is inevitable. If the request execute by Vue axios, you can use .catch() to catch the error. After that, you need to explain the reason for the error, the way to leave feedback, and prompt the user for feedback. These practices can improve the user’s experience. At the same time, website maintainers should be notified through other services port as much as possible. There is a case of Python Flask alerting website maintainers via email, welcome to the related articles.
Related articles
Coming soon
If yuo have any question or need any help
you can leave a comment or connect me with weichaoxu1998@gmail.com
