Encountering issues with a vue 2 project where the global error handler defined in main.js is not functioning, similar to a demo facing the same issue
Vue 3 https://stackblitz.com/edit/vitejs-vite-svaosh?file=src%2Fmain.js
Error Handler
app.config.errorHandler = (err) => {
console.log('error caught');
};
App.vue
<script>
export default {
created() {
console.log('jello');
throw new Error('dasf');
this.loadData();
},
methods: {
async loadData() {
throw new Error('dasf');
},
},
};
</script>
Both errors are expected to be caught by errorHandler and simply displayed on the console
The assumption is that the errors are within the Vue context rather than the window context, as Vue does not display them as unhandled errors like this
https://i.sstatic.net/DdAlWws4.png
Vue2
Attempting to implement an optional error capturing mechanism where errors thrown by APIs can be caught either in the component or by the global error handler to display a warning toast
Previously working fine, but currently not functioning as intended. The global error handler catches an error thrown in 'created' but not one thrown in 'loadData'
export default {
async created() {
this.loadMastersCount();
throw new Error("dasf"); // this one is caught by global error handler
},
methods: {
async loadMastersCount() {
throw new Error("dasf"); // this one is not caught and shown in red during development or on screen
},
}
}
Edit I managed to get the Vue 2 reproduction working, here it is
Case 1 - Error thrown in 'loadData' is not caught
<script>
import HelloWorld from './components/HelloWorld.vue'
import { failingApi } from "@/api/dummy";
export default {
name: 'App',
components: {
HelloWorld
},
async created() {
// await failingApi();
this.loadData();
},
methods: {
async loadData() {
await failingApi();
}
}
}
</script>
https://i.sstatic.net/HLXWbsOy.png
Case 2 - Error thrown in 'created' is caught by global errorHandler
<script>
import HelloWorld from './components/HelloWorld.vue'
import { failingApi } from "@/api/dummy";
export default {
name: 'App',
components: {
HelloWorld
},
async created() {
await failingApi();
// this.loadData();
},
methods: {
async loadData() {
await failingApi();
}
}
}
</script>
https://i.sstatic.net/2fSdcJSM.png
Please check @moritz-ringler