So if this article is to introduce how to build a monitoring system, it is more to simply understand the principle of front-end anomaly monitoring system (such as Sentry), because a system needs to improve the function of too much. After all, this society has put the front-end volume of the indecent ！！！！ So we mainly understand what problems the front end is responsible for solving in the build.

Focus on solving problems:

  • How do I upload Sourcemap to the server
  • How to use Sourcemap to restore source code error locations

Setup steps:

  1. Collect front-end exceptions (this article is mainly a demonstration of vUE exceptions)
  2. Report collected exceptions including Sourcemap
  3. Use Sourcemap to resolve the location of source code

Understand Sentry reporting process

First let’s see how the popular anomaly monitoring system reports, standing on the shoulders of giants to see the world ~~

  1. Initialize Sentry in main.js, listen for exceptions and report them

  1. Upload the sourcemap file using plugin (webpack-sentry-plugin or @sentry/webpack-plugin)

== and then I’m going to start writing it

1. Collect front-end exceptions

Since Vue captures all code inherited from Vue single-file components or Vue. Extend, errors that occur in Vue are not directly caught by window.onError, but are instead thrown to vue.config. errorHandler.

Exceptions thrown in vUE are thrown by JavaScript after vue files have been escaped by vue-loader. So use window. onError to catch exceptions, which are Script errors

vue.config.errorHander = function(err){
    throw err
}
Copy the code

However, vue.config. errorHandler cannot catch network request exceptions and uses the error event listener to catch them

window.addEventListener('error', (msg,url,row,col,error)=> {
    console.log(msg, url, row, col, error);
    return true;
}, true);
Copy the code

Two, the abnormal report

Write an arbitrary error

Monitoring error

View error messages (after Build)

Vue error messages are missing a lot of useful information, such as the wrong number of rows and columns. Different browsers may have different error formats, so TraceKit helps us standardize error messages across platforms by standardizing error objects

Install traceKit dependencies and format error objects
npm i tracekit
Copy the code

Format error information and report it. Dynamically create an IMG tag to report the error information. The page does not need to be refreshed. (As long as the new Image object in JS can be initiated, and there is no blocking problem, in the browser environment without JS can be normal through the IMG tag.)

The error messages we upload are packed and compressed location information, and sourcemap is required to restore the error location of the source code. So we need to upload sourcemap to the server.

Upload sourcemap

The webpack-Sentry-plugin is quite complex and well-written. The key is to get the sourcemap file packaged, upload it, and delete it

Our job is to find all the Sourcemap files after packaging, iterate through the upload, and delete the files (remember that if the scaffold is productionSourceMap: true, the default configuration should not package sourcemap).

The upload interface can also be passed in at instantiation, just like the Webpack-sentry-plugin

Using the plugin

4. The backend receives files

The node Express framework (because I don’t know Java, either) is still used here

Create entry file

Create app folder, write interface

Install Nodemon and NPM run Dev to see hello page

Start to write and upload the interface for receiving files, and put the received files in the local folder for easy presentation

The front-end upload

At this point, we will execute the following build

The sourcemAP file is received by the back end

Now that we have the Sourcemap file, we are going to use sourcemap to restore the errors on the line (because the code on the line is compressed, you can’t see the actual problem directly).

Five, restore the source code error location

The front end reports an error, uploads the position of the row and column and the error file name (useful information can be uploaded), and creates an IMG tag

The back end receives the message and parses the error using source-map

Official document :source-map

Install NPM I source-map

Parse the file to get the source location

Vue makes an error

After build, run the index file, or use a native nginx, to run the referenced JS path

The console printed an error in the source file

Resource loading failure We need to listen for error events and report abnormal link of resource loading

Modify background code, if it is a resource loading problem directly output exception

Are there any exceptions that need to be handled that can be handled separately

Reference Documents:

  1. Sentry exception capture platform
  2. Official document: source-map
  3. Sentry Principle – Collect and report