Mikhail Kuznetcov presented on handling errors in Vue applications. He discussed common error types, layers where errors can be captured including at the component level using errorCaptured and renderError, and globally using Vue's errorHandler configuration. He also covered using a window.onerror handler and handling errors in async code. The presentation provided an overview of Vue's API for handling errors and examples of implementing error boundaries with components.

1. Mikhail Kuznetcov
Handling errors in Vue
applications
Vue Global Meetup
04/2020
{ }

2. About me
Mikhail Kuznetcov
Chapter lead @ ING Amsterdam
Twitter & Github
@shershen08
● Using Vue since 2017
● Teaching Vue since 2019

3. Question
What tool do you use to log errors in PROD
in your JS/Vue apps?
Handling errors in Vue applications | @shershen08
󾠮 Custom solution
󾠯 Service like Sentry.io / Rollbar / Bugsnag / catchjs
󾠰 We don’t have errors to handle ...

4. Plain JavaScript exception handling
try {
throw 'myException';
} catch (err) {
// statements to handle any exceptions
} finally {
// cleanup
}
Handling errors in Vue applications | @shershen08

5. Common types of errors
● Syntax errors
● Runtime errors
● Logical errors
● API errors
Handling errors in Vue applications | @shershen08

6. Vue API for
handing errors

7. Layers to capture errors
Handling errors in Vue applications | @shershen08
window
Vue instance
Component

8. Component level: errorCaptured
export default {
name: 'ErrorBoundary',
errorCaptured(err, vm, info) {
console.log(`Error happened: ${err.toString()}
Additional info : ${info}`);
// important toggle
return false;
}
}
Handling errors in Vue applications | @shershen08

9. errorCaptured boundary component
import { ErrorBoundary } from "vue-error-boundary";
<ErrorBoundary :fall-back="fallBackHandler">
<ThirdPartyComponent :config="config"/>
</ErrorBoundary>
Handling errors in Vue applications | @shershen08
● vue-error-boundary module
<ErrorBoundary>
<div class="container">
<router-view></router-view>
</div>
</ErrorBoundary>

10. Component level: renderError
export default {
name: 'ThirdPartyCmpWpapper',
// props,
// methods,
renderError (h, err) {
return h('pre', {
style: { color: 'red' }
}, err.stack)
}
}
Handling errors in Vue applications | @shershen08
● Only works in DEV mode

11. Global Vue errorHandler
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info
}
// also Vue.config.warnHandler available for Vue-specific warnings
Handling errors in Vue applications | @shershen08

12. Also in async mode
export default {
name: 'SomeComponent',
mounted() {
return new Promise((_, reject) => {
setTimeout(() => {
reject('Error happened here');
}, 2000);
});
}
};
Handling errors in Vue applications | @shershen08

13. window.onerror
window.onerror = function(message, source, line, column, error) {
// do your thing
}
● Need to have Vue.config.errorHandler defined for this to work
Handling errors in Vue applications | @shershen08

14. Thanks
Please ask your questions in chat:
bit.ly/WorldVueChat
Handling errors in Vue applications | @shershen08
Links:
● Vue Docs vuejs.org/v2/api/#errorHandler
● Global ErrorsService medium.com/js-dojo/vue-js-global-errors-handling-c58aac8aaf0f
● Detailed overview raymondcamden.com/2019/05/01/handling-errors-in-vuejs