Yeah the new release of Vue is up ! 🎉
Today we will speak about the first part: Async Error Handling
For the history of the vue async error handling check HERE
First, how to configure the async error handling !
Vue.config.errorHandler = (err, vm, info) => {
// err => the message error
// vm the exact component where the error occur
// info is error type v-on / lifecycle etc
console.log("[ERROR CATCH]: ", err);
console.log("[ERROR COMPONENT]: ", vm);
console.log("[ERROR INFO]: ", info);
};
As older versions you can easily imagine here some custom errors tracking services like
Sentry or Bugsnag do.
We will run into the paradise now !
1) Component LifeCycle Hook 😍
Here are 3 manners on how error handling works in hook lifecycle:
export default {
name: "myAwesomeComponent",
mounted() {
// i do some work here
throw new Error("i am a bad error");
}
};
export default {
name: "myAwesomeComponent",
mounted() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("i am a bad error");
}, 2000);
});
}
};
const err = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("i am a bad error");
}, 2000);
});
};
export default {
name: "myAwesomeComponent",
async mounted() {
let ret = err();
return ret;
}
};
Important:
⚠️ ⚠️ If you are using Promise or async you should return it as in the 2nd and 3rd example. If you don't do it, vue will not catch the error inside the config.error.
Don't do this ! 👿👿👿
export default {
name: "myAwesomeComponent",
mounted() {
// it will not being catch
new Promise((resolve, reject) => {
setTimeout(() => {
reject("i am a bad error");
}, 2000);
});
}
};
const err = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject();
}, 2000);
});
};
export default {
name: "myAwesomeComponent",
async mounted() {
// it will not being catch
let ret = err();
ret;
},
};
Here you should return ret and return the new Promise
2) Vue event handlers (Custom and DOM listeners) 😍
Sync:
As always ...... Code ! 😎 😎
<template>
<div>I am a simple component</div>
</template>
<script>
export default {
name: "comp",
mounted() {
this.$emit("custom")
}
};
</script>
<template>
<div>
<comp v-on:custom="customE"/>
</div>
</template>
<script>
import Cmp from "@/Component";
export default {
components: {
Cmp
},
name: "app",
methods: {
customE() {
throw new Error("i am a bad error");
}
}
};
</script>
Easy right ? 😄
Async:
<template>
<div>I am a simple component</div>
</template>
<script>
export default {
name: "comp",
mounted() {
setTimeout(() => {
this.$emit("custom")
}, 1500)
}
};
</script>
<template>
<div>
<comp v-on:custom="customE"/>
</div>
</template>
<script>
const err = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("i am a bad error");
}, 2000);
});
};
import Cmp from "@/Component";
export default {
components: {
Cmp
},
name: "app",
methods: {
customE() {
return err(); // the return is IMPORTANT here
}
}
};
</script>
This way, the error from those Promises chain will also be handled. So you can chain them as long as you think to return.
Thanks for reading :).
If you want to follow me or know about what i am actually working on!
PS: If you want to check more about release COME HERE
Top comments (0)