I set up a global errorHandler in Vue3's main.js:
app.config.errorHandler = error => {
console.log("catch error")
}
In general methods, it works well. For example:
methods: {
showMessage() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("async error!")
}, 500)
})
}
}
It print catch error in console, But when I use Axios to make a request, it can't catch axios's Uncaught (in promise) Error. Such as:
methods: {
showMessage() {
this.$axios.get('/wrong-url/').then(response => {
console.log('wrong url')
})
}
}
The global errorHandler cannot catch the error at this time. The console displays the error:
Uncaught (in promise) Error: Request failed with status code 404
I've googled it, but I can't find the reason.
The promise is not returned and isolated inside a method, which is a mistake. With a few exceptions, promise chain should always be preserved, this allows errors to be handled:
showMessage() {
return this.$axios.get('/wrong-url/').then(response => {
...
A fool-proof way is to use async..await because it forces a function to return a promise:
async showMessage() {
const response = await this.$axios.get('/wrong-url/');
...
It can be combined linter rule to avoid mistakes with promise chaining.
config.errorHandler is for handling frontend errors. Yоu still have to create an interceptor when the app is created:
...
created() {
axios.interceptors.response.use((response) => {
return response;
}, function(error) {
// Do something ...
return Promise.reject(error);
});
}
...
app.config.errorHandler = (err, instance, info) => {
// Do something ...
};