(If you are familiar with source-map but don’t know how to implement it, you can skip the previous ones and go straight to the reference article listed in the bottom column.)

This is the beginning of a series I’ve been writing about handling reported exceptions

As you know, most of our JavaScript code on the front end is compressed, obfuscated, reduced in size and relatively safe, and so on

As an example, the source code looks like this

.function buyVip() {let { auto_renew } = this.vipData.vip;
   if( !this.isIOS == auto_renew.expire_type){
    console.log("you are ios vip")}}...Copy the code

It looks like this when it’s compressed

this.buyVip(this.selectInfo)},buyVip:function(t){var e=this;localStorage.setItem("vip_buy_goods",(0,l.default)(t)),this.timer=setTimeout(function() {if(! e.loginState)return e.loginActiveRouter="payVipOrder",u.default.openViewByRouter("bridge://user/login"),! 1; var i=e.vipData.vip.auto_renew;if(! e.isIOS&&e.isSelect&&i&&1==i.auto_renew&&t.expire_type==i.expire_type&&t.expire_val==i.expire_val){var n=1==i.platform?Copy the code

Because auto_renew is null, the code error message is as follows

{
 message: "Cannot read property 'auto_renew' of undefined",
 url: "http://xxx.com/vip.024973a2.js",
 row:1,
 col:876
}
Copy the code

Auto_renew Cannot read property [0] of undefined”; auto_renew Cannot read property [0] of undefined”; The naked eye is difficult to locate the specific problem

Which how does ability locate specific error ah?

This is not possible without compression code, direct source code, code volume is too large, security is also a big problem, that we in local development, the default is packaged file, with Chrome can see the source code, in fact, is the use of SourceMap technology to debug, SourceMap simple to say, Is to maintain a source code and compressed code one to one corresponding file, through the compressed error information to reverse the source code error specific line number, just above the code, map file is as follows

{
    "version": 3."sources": ["vip.024973a2.js"]."names": ["buyVip",]."mappings": "AAAA,QAASA,KAEL,GACIC,GAAW,UAAYC,IAC3BC,SAAQC,IAAIH,GAGhBD"."file": "hello.min.js"."sourceRoot": ""."sourcesContent": ["function buyVip()\n{\n let { auto_renew } = this.vipData.vip\n ...."]}Copy the code

The main point here is mapings, which is a long string. It is divided into three layers to record the relationship between the code and the line before and after compression. Please refer to the reference article at the end of the article for details about how to record the map

So now the front-end packaging tools (Webpack, gulp, rollup) all support SourceMap functionality, packaged like this

What we need to do is save the packaged SourceMap file, and then deduce the specific line number based on the error message reported. It is important to note that SourceMap file should not be deployed with the packaged JS file, so that your online code can be easily accessed by others. So we need to work on packaging the script, separate the.js and.map files, and look at the image (the image is from the Internet, see the Resources).

This allows you to display errors on the error platform

source-map
source-map

Another problem is that source-map files are actually quite large and unchanged, so it is better to use Redis cache in Node.js. We didn’t have much access to the initial project, so I did the cache in memory first

This minimal closed loop is good enough to help solve JavaScript errors, but not enough to monitor pages.

  • Page misclassification
  • For example, one day customer service response, wuhan this area, a large number of users reported errors, or the page directly can not be opened
  • Filter errors by brand, time, location
  • What does a user do in the first 10 seconds after an error occurs
  • A large number of network request errors are reported
  • Failed to load the CDN. Procedure

These are all problems that need to be solved. In case of problems, we need to consider how to give early warning, notify development, and whether we can handle them intelligently. Therefore, there are still many tasks to be done.

There is no specific line number for the exception thrown by Vue. It needs to be processed before it can be reported. You can search github.com/occ/TraceKit on Github for formatting exceptions. Vue error handling is directly skipped, to handle Vue exceptions must remember to see this library, very helpful)

It’s nine days a week. Go to bed.

This is the beginning, and in the next installment I’ll talk about the design of the SDK for reporting and what exceptions to handle. Keep an eye on me and wait for updates

Reference article:

  • Ruan Yifeng source-map introduction

  • Script error volume optimization – make the script error at a glance

  • sentry.io

  • raven-js

  • Abnormal formatting, processing vUE files used on