How to Pinpoint JavaScript Errors in Production Using Source Maps

In this series we discuss the complete workflow for locating frontend runtime errors, starting from overall design, SDK error reporting, and handling of JavaScript source files and their SourceMap mappings.

Normally JavaScript code is minified and obfuscated before deployment, which reduces size and adds a layer of security, but makes debugging difficult.

Example of original source code:

function buyVip() {
    // 判断是否购买的是已经购买过的自动续费商品
    let { auto_renew } = this.vipData.vip;
    if (!this.isIOS == auto_renew.expire_type) {
        console.log("you are ios vip");
    }
}

After minification the code looks like:

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?

The resulting error is:

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

Because the error only provides a line and column in the minified file, locating the exact source is hard. Using SourceMap technology we can map the compressed error back to the original source line.

Sample SourceMap file:

{
  "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()
{
  let { auto_renew } = this.vipData.vip
 ...."]
}

The key part is the mappings string, which records the line‑to‑line relationship between original and minified code.

Modern bundlers like Webpack, Gulp, and Rollup generate SourceMap files automatically. However, these files should not be deployed together with the minified JavaScript because they expose the original source.

We store the generated .map files separately and use a Node.js + MongoDB error platform to reverse‑map reported errors to the original file and line number.

We then display the error with source file and line number, making it easy for developers to locate and fix issues quickly.

To keep source maps out of the production bundle, we modify the CI pipeline (GitLab CI) to separate .js and .map files, define storage rules per project and version, and cache the relatively large but immutable map files in Redis for fast lookup.

Beyond basic error location, we aim to extend monitoring to classify page errors, filter by region, device, time, and user actions, and set up intelligent alerts. Vue exceptions lack line numbers, so we recommend using the TraceKit library (github.com/occ/TraceKit) to format and report Vue errors via source maps.

In the next article we will discuss the design of a JavaScript error‑reporting SDK.