Qianduan.group. The current web static resources in order to reduce the loading time and part of the security reasons, js files are merged and compressed, although in the web page experience is very good, but for online JS error tracking is abnormal trouble

solution

For no compression, this is definitely not a compromise, user experience is definitely not a sacrifice, but can we start from compression? The answer is yes, sourcemap is the first place we would think to solve problems

How to use Sourcemap

Before learning more about sourcemap mapping, it is best to read Ruan’s article “JavaScript Source Map in Detail”. Now that we’ve read about sourcemap, let’s break it down

1. Sourcemap file structure

{version: 3, file: "out.js", sourceRoot: "", sources: ["foo.js", "bar.js"], names: [" SRC ", "maps", "are", "fun"], the mappings: "AAgBC, SAAQ, CAAEA}"Copy the code

The data in mappings is the mappings of the corresponding locations. Each location in mappings needs to be decomposed

2. Analyze location

We use VLQ library for decomposition to obtain specific location information

/* * returns the corresponding position * rt[0]: the position in the column (of the transformed code). * rt[1]: Which file this location belongs to in the Sources property. * rt[2]: indicates what line of code this position belongs to before the conversion. * RT [3]: indicates which column this position belongs to before the transformation. * rt[4]: indicates which variable in the NAMES property this position belongs to. * /
let rt = vlq.decode( 'AAgBC' );Copy the code

3. Record a complete mapping

For the second step, just know the location of each point, then for the record of all positions, need to be collated, refer to the sourcemap-stack library, where the mappingSingleFile function below/SRC /mappingRealPath.js records all information. For later use

4. Pay attention to the point

Depending on the environment, there may be small deviations in the calculation, so we need to correct the corresponding position mapping. In sourcemap-stack, the mapErrorPosition function under the/SRC /mappingRealPath.js file is positioned to get it correctly

How to generate sourcemap

  1. If you use react, Vue and other frameworks, you usually use WebPack. When webPack is packaged, you can produce map files
  2. For older projects, tools such as gulp are often used, which can produce map files while working with compressed JS files

The use of tools

The following two approaches, which only provide interfaces, both rely on Sourcemap-Stack for mapping

  1. Git clone — git clone — git clone — git clone
  2. Install and download vide editor, currently support wechat and Alipay small programs, also support vue, React and other development, you can install vide plugin-toolbar- Sourcemap plug-in, very convenient

Operation interface

Stack3.5 e60dbc0e02c. PNG

Parameters that

attribute instructions type
The map address The js file corresponds to the server address of the map file resource. If the map file and js file reside in the same directory, you do not need to enter this parameter String
The map file name Compare the format of a map file with that of a JS file, for example,[name]. [hash].js.map,[name].js.map. Somewhat similar to output filename format in webpack configuration String
Map Encryption Key If the map file is stored in the same directory as JS and published to the CDN together, symmetry encryption can be used to encrypt the map file and encryption packageencrypteIf there is no encryption, do not fill this field String
The error message The error information obtained by window.onerror can be obtained by using error. Stack. You only need to copy the error information and paste it to the interface String

The results

After clicking the analyze button, it will search and analyze your configured information, and finally get the following analysis results

The default display of the top – most stack error

stack1.e9c10b6d292d.png





Stack2.695 bbba2565f. PNG

Pay attention to

Because the general JS file address and HTML address are not the same, so in order to get error information, js files need to allow cross-domain, in the script tag crossorigin attribute

conclusion

In most companies, js error logs are reported on wires. You can view error information by reporting online logs and copy the error information to the tool for viewing. According to this tool, online errors can be viewed source code, to help you quickly find online problems