Error handling in Vue

All last year I worked with my favorite framework, Vue.js, described and represented it. And I realized that I had not yet figured out how to handle errors in Vue. I would like to explain this by writing the perfect code, but we all know how it is in reality. Over the past few days, I have been experimenting with various error handling techniques that Vue provides, and decided to share my discoveries. Obviously, this review will not cover all possible scenarios, but I hope that it will help you!

Errors

To test different processing methods, I decided to take three different types of errors (at least for a start). In the first case, it was just a call to a non-existent variable:

<div id="app" v-cloak> Hello, {{name}} </div> 

In this example, the user is not given an error message, but a warning [Vue warn] is output to the console.
')


Here is how the implementation of this example looks like:


In the second example, I tried to associate a variable with a calculated property that should generate an error:

 <div id="app" v-cloak> Hello, {{name2}} </div> 

 const app = new Vue({ el:'#app', computed:{ name2() { return x; } } }) 

In this case, both the warning [Vue warn] and the usual error message are output to the console, but the user is not given anything.



This is how the code for this example is executed:


In the third example, I used a method that would result in an error.

 <div id="app" v-cloak> <button @click="doIt">Do It</button> </div> 

 const app = new Vue({ el:'#app', methods:{ doIt() { return x; } } }) 

As in the previous case, the error message in the console will be displayed twice: one warning and one message about this error. But, unlike him, the error occurs only when the button is actually pressed.



And here is a demonstration for this example:


Before we continue, I want to clarify that these examples do not show all the types of errors you can make. These are just a few of the main ones, which, in my opinion, can often be found in Vue.js-based applications.

So how can you handle errors in Vue applications? I must say, I was a little surprised that there is no section on error handling in the main Vue framework manual .



Yes, there is a similar section in the manual, but it is rather short, and its whole meaning fits into the following quotation:

“If a component fails to execute a runtime error, it will be passed to the global configuration function Vue.config.errorHandler, if specified. It would probably be useful to use this hook with an error tracking service such as Sentry, especially since its integration with Vue is officially supported. ”

In my opinion, this topic should be a little more disclosed in the documentation (and I think that could help in its addition). In general, error handling in Vue comes down to the following tools:

• errorHandler;
• warnHandler;
• renderError;
• errorCaptured;
• window.onerror (this tool is not Vue specific).

Let's take a closer look at these techniques.

Error Handler Number One: errorHandler

The first tool is errorHandler . As you probably guessed, this is the standard error handler for Vue.js applications. You can assign it as follows:

 Vue.config.errorHandler = function(err, vm, info) { } 

In the above function declaration, err is the description of the current error, info is a Vue-specific error information string, and vm is the current Vue application. Remember that multiple Vue applications can run simultaneously on the same webpage. This error handler will apply to all of them. Consider the following simple example:

 Vue.config.errorHandler = function(err, vm, info) { console.log(`Error: ${err.toString()}\nInfo: ${info}`); } 

In the case of the first error, this code takes no action. If you remember, this generates a warning , not an error message.

In the second case, the error is processed and the following text is output:

 Error: ReferenceError: x is not defined Info: render 

Finally, the third example gives the following result:

 Error: ReferenceError: x is not defined Info: v-on handler 

Notice how “useful” the information under the Info heading is in the two previous examples. Now let's check how the next tool works.

Error Handler Number Two: warnHandler

warnHandler processes - what would you think? - Vue warnings. Note that this handler is ignored in production. The handler for this method is also slightly different from the previous one:

 Vue.config.warnHandler = function(msg, vm, trace) { } 

The first two arguments, msg and vm, do not require additional explanations, and the trace argument must be a component tree. Consider an example:

 Vue.config.warnHandler = function(msg, vm, trace) { console.log(`Warn: ${msg}\nTrace: ${trace}`); } 

In the first example, there is now a handler for the warning it generates, and it returns the following:



The second and third examples do not change. Live examples for all three cases are presented below.

Error Handler Number Three: renderError

Now I will demonstrate the third error handling method: renderError. Unlike the previous two, this tool depends on the component and is not universal. As in the case with warnHandler, this handler is disabled in production.

To use it, insert it into your component / application. Below is a modified example from the documentation.

 const app = new Vue({ el:'#app', renderError (h, err) { return h('pre', { style: { color: 'red' }}, err.stack) } }) 

If this error handler is used in the first example, then it does nothing, which, if you think about it, seems to be logical, since the first example gives a warning, not an error. If you check this handler in the second example, where the error produces a calculated property, you will see that its result is displayed on the screen. You can see this in the below demonstration on CodePen.


Honestly, I don’t quite understand why using this tool when the console is much more convenient, but if the quality control department or other testers are not familiar with the browser console, a simpler error message on the screen can help them.

Error Handler Number Four: errorCaptured

Finally, there is the errorCaptured tool (specific to Vue), which has confused me and, frankly, is still a bit confusing. The documentation states the following:

“Called if an error is fixed in any child component. This hook takes three arguments: an error, an instance of the component that caused the error, and a string containing information about where the error was fixed. A hook can return false to prevent further error propagation. ”

According to my research (again, I strongly doubt it), this error handler should only be used by the parent component handling the error of the child component. As far as I know, it cannot be used in the main Vue instance, but only in a component that has descendants.

To check this, I created this set of parent and child components:

 Vue.component('cat', { template:` <div><h1>Cat: </h1> <slot></slot> </div>`, props:{ name:{ required:true, type:String } }, errorCaptured(err,vm,info) { console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); return false; } }); Vue.component('kitten', { template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>', props:{ name:{ required:true, type:String } } }); 

Please note that the kitten component contains an error. Now, if I try to use this component as follows,

 <div id="app" v-cloak> <cat name="my cat"> <kitten></kitten> </cat> </div> 

I will get a message from the handler:

 cat EC: TypeError: dontexist is not a function info: render 

You can see this in the example below.


So yes, an interesting remedy. I believe that it will be mainly used by those who create component libraries with parent / child relationships. This tool is more suitable for a library developer than for a regular developer, if such a division makes sense. But again, this is only my first impression of this tool.

A single tool for managing everything: window.onerror

The last (and most powerful) option is to use window.onerror , a global error handler for everything that can happen when executing your JavaScript code. This handler has the following format:

 window.onerror = function(message, source, line, column, error) { } 

Probably the only thing that you can not guess in the above code is the meaning of the source argument, which is the URL of the script.

This is where the fun begins. If you define this function, but do not use Vue.config.errorHandler, it will not help you. Vue expects you to define a Vue.config.errorHandler, and if you do not, it does not extend the error beyond its limits. Probably, there is some sense in this ... I don’t even know, for me there isn’t much point in it. An even more strange thing: let's say there is an error in your Vue error handler itself. It also does not reach the window.onerror handler.

Here is a demonstration on CodePen with an appropriate example. I commented out the error in errorHandler, but if you remove the comment, you will see that the global error handler will not work. It will work only in one case: if you press the second button.

Conclusion

I hope the material of this article will be useful to readers. As it was already written at the very beginning, I have just started this topic, therefore, of course, I am waiting for comments, comments and suggestions. I’m happy to read how other developers use these tools in their applications!

Photo at the beginning of the article: by David Kovalenko , Unsplash website