Vue error log monitoring (II)

Time:2022-5-25

In the last article, we successfully collected browser side errors. The collection is to deal with them. In this article, let’s see how to deal with these errors.

Experienced students should know that our Vue code is compressed in the production environment after packaging, that is, our code is no longer our source code, which makes us unable to locate the location of the source code. At this time, we can’t locate the wrong code even if we catch the error. What should we do? The answer is sourcemap

What is sourcemap

Sourcemap is actually a file that records the location relationship between compressed code and source code.

How to use sourcemap

In the previous article, we used error stack parser to format the error stack. After the processing is completed, it becomes like this

Vue error log monitoring (II)

Figure 1

Here we can see the file address, line number and column number of the current error in the error stack (this is also what we need to deal with)

Sourcemap inverse solution

We got the current error information, and the rest is to use sourcemap to reverse solve the error information to get the location information of the source code. What should we do?

When our Vue code is packaged, it will be configured to generate the corresponding code Map file is our sourcemap file. Next, we will use this file to reverse solve the error information.

Let’s first look at the project structure of our log processing service

Vue error log monitoring (II)

Figure 2

Here, we use express to build the project, and then error. Under routes JS as our entry file.

Vue error log monitoring (II)

Figure 3

Here, we use the policy mode to deal with three kinds of errors, which are handed over to different error handlers. That is, the index under our functions js

Vue error log monitoring (II)

Figure 4

Here is an aggregate export for different error handling. Then we drill down to the Vue error handling file.

Vue error log monitoring (II)

Figure 5

Finally see our focus source map functions / index JS, use the toSource method in this file to reverse solve the error we reported

Vue error log monitoring (II)

Figure 6

Here we use source map to deal with our error reports, that is, the inverse solution mentioned earlier. Here we can see several core things: Map file, line number, column number, and the rest will be handled by source map.

Next, we will write the collected errors into the file for easy searching. Here I use log4js to handle them

Vue error log monitoring (II)

Figure 7

At this point, we have collected the logs and can happily troubleshoot the problems. There’s actually one step missing here. Guess what? Let’s talk about the next one, and finally attach the project address:

https://github.com/wangKXX/error-service

https://github.com/wangKXX/error-web