Summary

The provided content discusses error handling techniques in Vue 3, detailing common error handling methods, and delving into the specific implementation of global error handling within the Vue 3 framework.

Abstract

The article, authored by Chris, a front-end development engineer, serves as an introductory guide to error handling in Vue 3. It outlines various types of common errors encountered in web development, such as JavaScript syntax errors, Ajax request errors, and Promise errors, among others. The author explains the use of window.onerror and try...catch blocks for synchronous error handling and introduces Vue 3's approach to global error handling. This approach involves two key methods: callWithErrorHandling for synchronous errors and callWithAsyncErrorHandling for asynchronous errors, both designed to provide a consistent error handling experience. The article also touches on the importance of handling nested method calls and implementing tree shaking to optimize production builds by excluding development-specific code. Chris hopes to clarify error handling in Vue 3 and invites readers to engage with the content and consider a cost-effective AI service recommendation.

Opinions

The author, Chris, believes that global error handling is crucial for component libraries and plugins to ensure consistent error management and developer communication.
Chris emphasizes the importance of a simple yet effective global error handling method that abstracts the internal logic from the end-user.
The article suggests that Vue 3's error handling methods, such as callWithErrorHandling and callWithAsyncErrorHandling, are designed to be robust and developer-friendly, catering to both synchronous and asynchronous error scenarios.
The author values the practice of tree shaking in Vue 3 development, viewing it as a means to streamline the final production build by eliminating unnecessary development code.
Chris encourages reader interaction with the content, indicating a community-driven approach and a desire to provide value through the shared knowledge.
The recommendation of an AI service at the end of the article implies the author's endorsement of tools that enhance productivity and offer cost-effective alternatives to existing solutions like ChatGPT Plus (GPT-4).

Error Handling in Vue3

Hi, I’m Chris and I’m a front-end development engineer.

This is the first article I wrote and I hope it will be helpful.

When developing component libraries or plug-ins, global error handling is often required to achieve these goals:

Global unified handling of errors;
Prompt error messages for developers;
Program downgrade processing and so on.

How do you do that?

Next, I will briefly implement an error handling method, and then introduce the implementation process of the Vue3 source code.

> The Vue3 version of this article is 3.0.11

1. Common error handling

There are many common errors, such as:

JS syntax errors;
Ajax request errors;
Static resource loading errors;
Promise errors;
iframe errors;
…

There are many other ways.

1.1 window.onerror

Whenever an error occurs while JS is running, the de>window.onerror() method is executed:

If this function returns true, execution of the default event handler is prevented.

1.2 try…catch errors handling

You can also handle errors through try…catch:

I won’t go into the details of other methods here.

1.3 Think

And if you think about it, Vue3 is also everywhere through try…catch to handle errors?

Let’s see together.

2. Simple global error handling

When developing plug-ins or libraries, try…catch defines a global errors handling method that passes in the method to be executed as an argument.

The user only cares about the result of the call, not the internal logic of the global errors handling method.

Such as:

Try to run:

When you need to handle an error, you simply pass this method as a parameter.

But this is too simple. In real business, we often encounter nested calls to methods.

Let’s try it:

Nested calls can also work this way. Then you need to implement different error handling logic in the errorHandlingmethod.

Next, let’s see how it is handled in the Vue3 source code?

3. Error Handling in Vue3

Vue3 is implemented in three steps:

Step 1: Implement error handling methods

Implement two methods to handle global errors in the errorHandling.ts file:

callWithErrorHandling: Error handling synchronization method;
callWithAsyncErrorHandling: Error handling asynchronous methods;

Usage:

Source code implementation:

The callWithErrorHandling method is simpler, with a simple try…catch makes a layer of packaging.

And callWithAsyncErrorHandling method is more interesting, will need to deal with the target method as parameters to callWithErrorHandling, on his return to the Promise of an object. The catch method handles errors.

Step 2: Handling errors

Next, implement the handleError() method:

Here we simply implement the logError()method and print the error content directly through console.error(err).

Step 3: Implement Tree Shaking

When compiled into the production environment, the __DEV__ branch code is not packaged, optimizing package size.

I hope I can clear your questions in your mind, and it will benefit you. If you are like it, don’t forget to clap. Stay tuned! :)