Vue - Error Handling

We have to consider a lot of parameters while architecting a frontend application and error/exception handling is one of the important aspects. Having a good error handling mechanism in the application comes up with a lot of benefits such as:

• A good error handling mechanism prevents the application from breaking when there is an unhandled exception
• Errors can be easily logged to a server to track down the causes in case of production application
• Can perform the alternate operations such as displaying an alternate UI showing some sophisticated messages instead of breaking the application
• Helps in improving the user experience

These are the main types of errors you’re likely to encounter in your Vue.js app:

1. Syntax errors occur when you use the wrong syntax
2. Runtime errors are caused by illegal operations during execution
3. Logical errors are difficult to identify because they result from mistakes in the program logic
4. HTTP errors are common when you’re working with APIs

There are numerous ways to tackle these problems such as syntax error can be discovered at compile time using static type checking(TypeScript), runtime errors can be handled using proper try-catch statements, logical errors can be reduced by having proper unit/integration testing, HTTP errors can be handled by using promises.

API Errors

Set up an interceptor for handling errors. You can use it to fire a notification toast to notify users that something went wrong, log out unauthorized users, or send new requests for refreshing tokens.

API Errors Notification Example Code

Axios Base Framework
XBase UI developers has already provided an Axios extension with the inclusion of error handlers for API errors. By default, the developed Axios extension only handles some error status, such as 5xx (Server Error), 401 (Unauthorized) and 403 (Forbidden). However, you can also customize your own error handlers for other specific error status. You can check the documentation here.

In App Errors

Use error boundaries to handle errors that happen in the Vue.js app. It is very popular to set only 1 single error boundary for the entire application, which would break the entire application when an error occurs. That's why you should have more error boundaries on more specific parts of the application. That way if an error occurs the app will still work without the need to restart it.

Handling Errors in Vue with Error Boundaries

Error/Exception handling in Vue.js application

Error Tracking

You should track any errors that occur in production. Although it's possible to implement your own solution, it is a better idea to use tools like Sentry. It will report any issue that breaks the app. You will also be able to see on which platform, browser, etc. did it occur. Make sure to upload source maps to Sentry to see where in your source code did the error happen.

The alternative solution is defining a specific Vuex store module that is devoted to handle the error tracking.

Error handling, debugging, and tracing in Vue.js