In front-end monitoring, JS error is a crucial monitoring point and indicator, as long as the collection and parsing stage is included

Because sourcemap and source file generation each have different policies

1. Build source files

1. Generate the hash in the file name

In this mode, the monitoring platform can directly read the source file corresponding to the sourcemap save, used during parsing

2. Add the hash or timestamp to the file URL search

In this way, the URL needs to be processed on the monitoring platform, and parameters in search are added to the file name for saving

3. No hash or timestamp is used

This requires the client to add the version number when reporting an error, upload the Sourcemap file to the server at build time, and retrieve the corresponding version when parsing

2. Sourcemap is generated

Sourcemap generation comes in a variety of configurations in Webpack, but with slightly different capabilities

In production, we cannot expose sourcemap files

There are several ways to safely restore the error stack at the same time

Method 1: Upload the SourcemAP file to the monitor server at build time and delete it

Method 2: use proxy server such as Nginx on the server side to restrict file access and only monitor server access

3. How to use sourcemap library for stack restore

The sourceMap repository address reports the error stack as follows

[{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js"."func":"registerEventHandler"."args": []."line":29."column":12174},
{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js"."func":"onEvent"."args": []."line":32."column":26680}]

Copy the code

The parsing process is as follows

1. Create the SourceMapCustomer object based on the sourcemap

var smc = await new sourceMap.SourceMapConsumer(mapfileData);
Copy the code

2. Obtain the source file and error row and column based on the stack information of each row

var po = smc.originalPositionFor({
                        line: line,
                        column: column
                    });
console.log(po)// line: 1, column:200, source: xxx.js
Copy the code

3. Obtain the source file information based on the contents and columns of the source file

 var co = smc.sourceContentFor(po.source)
// co contains all the source code of the source file
var coList = co.split("\n")
// Select a line as required
Copy the code

4. Display the content on the monitoring platform

Read the original