DEV Community

Handling Errors in Vue.js

Raymond Camden on May 01, 2019

I’ve been spending the last year working with, writing about, and presenting on my favorite framework, Vue.js, and realized that I had yet to look ...
Collapse
 
herrbertling profile image
Markus Siering

I think (and am not sure as well 😄) you can compare errorCaptured to React’s error boundaries (=> reactjs.org/docs/error-boundaries....).

So you’d also use them in Vue to capture errors and (through returning false) confine the error to a certain component nesting level. Could be very helpful to shield e.g. network requests within a part of your app from crashing the whole thing… I think 🤔

Collapse
 
raymondcamden profile image
Raymond Camden

Interesting. I don't know React and I keep thinking I need to make the time to get to know it better.

Collapse
 
herrbertling profile image
Markus Siering

Have worked with it before switching jobs and thus starting with Vue. I like Vue way more regarding ease of use. I think it helps to become familiar with React’s basic ideas. A lot is similar to Vue and some things are “further out there” like Suspense and all that fancy stuff 😄

Collapse
 
raymondcamden profile image
Raymond Camden

So that's a good point. I didn't actually show doing something useful with the error capturing. My main point for this article was that aspect though - how to recognize errors from a Vue app. What you do then is... well up to you. In a normal case I'd assume you would show something to the user in a friendly, non-technical manner.

Collapse
 
slidenerd profile image
slidenerd

so based on all the methods above, which one do you use in your Vue apps? I am using Nuxt SSR on my end hence the question

Collapse
 
raymondcamden profile image
Raymond Camden

Honestly I haven't thought about this in some time (and all my Embeds were broken, fixed now!). Probably the app wide errorHandler, but with try/catch in things like fetch() calls.

 
raymondcamden profile image
Raymond Camden

You wouldn't show something to the user? Well you said "specific", but to be clear, I said to tell the user something "friendly, non-technical". I think we're saying the same thing though. :)

Collapse
 
davidsbond profile image
David Bond

Wasn't aware of these error handling hooks for Vue, thanks for the post!

Collapse
 
raymondcamden profile image
Raymond Camden

You are most welcome!