I'm working on a Vue.js project and in the App.vue file I wrote this code that reacts to all exceptions and rejections of my app.
window.addEventListener('error', event => {
errorDialog.value = true
errorMessage.value = event.error.message
})
window.addEventListener('unhandledrejection', event => {
errorDialog.value = true
errorMessage.value = event.reason.message
})
In dev mode everything works smoothlessly... But once built it gets weird...
After many tests I understood that : it doesn't work when and only when the exception is thrown directly by an eventlistener.
To be clearer here is a usecase
<template>
<button @click="onClick_1()">CLIK ME</button>
<button @click="onClick_2()">CLIK ME</button>
<button @click="onClick_3()">CLIK ME</button>
<button @click="onClick_4()">CLIK ME</button>
</template>
<script setup>
function onClick_1 () {
throw '1' // Doesn't trigger anything
}
async function onClick_2 () {
/** With or without 'await' here **/
throw '2' // Doesn't trigger anything
}
function onClick_3 () {
(async () => {
throw '3' // Triggers the unhandledrejection listener
})()
}
async function onClick_4 () {
(async () => {
throw '4' // Triggers the unhandledrejection listener
})()
}
<script>
Could someone please explain what's the ding-dong here and how to fix it ?
Thank you in advance !