线上压缩代码 定位错误位置

Question

生产环境没有 source-map 文件，上报的错误都不好定位，这里实现一个简单的错误定位脚本

1、获取压缩代码错误信息（行数、列数、错误信息，错误文件）

这里通过控制台看错误信息

window.addEventListener('error', function (e) {
    console.debug('lineno: ', e.lineno, ' colno: ', e.colno)
    console.debug('errorMessage:', e.message)
    console.debug('errorFile:', e.filename)
}, true)

我们写一段错误的代码（single.vue 的片段）

method: {
   test (option) {
        const data = option.test
        const dataTest = option.data.test
        return data + dataTest
    }
}, 
created () {
    // 设置异步错误的原因是，同步的错误会被 vue 捕获
    setTimeout(() => {
        this.test({
          testOption: 1
        })
    }, 300)
}

在浏览器中运行，报错结果如下

得到错误信息：

• 错误行数：1
• 错误列数：59236
• 错误信息：cannot read property 'test' of undefined
• 错误文件：0.0a77f.js

2、定位错误的 node 脚本

安装依赖 source-map

npm install source-map 

node 脚本如下（map/index.js）

// 读取文件
var fs = require('fs')
// souceMap 处理文件
var SourceMapConsumer = require('source-map').SourceMapConsumer
// 启动构建进程（已构建则不需要）
var exec = require('child_process').exec

var lineno = process.argv[2] || 0 // 第一个参数为行数
var columnno = process.argv[3] || 0 // 第二个参数为列数
var fileName = process.argv[4] || '' // 第三个参数为错误文件（错误文件名就好）

// 构建有 map 的线上代码
// node build onlineMap 为构建命令
exec('node build onlineMap', function () {
// 读取错误文件的 map 文件
var consumer = new SourceMapConsumer(fs.readFileSync('./dist/' + fileName + '.map', 'utf8'))
// 输出 map 的错误信息
console.log(consumer.originalPositionFor({
line: +lineno, // +是为了转化为数字
column: +columnno
}))
})

运行 node 脚本

node map 1 59236 0.0a77f.js 

效果如下：

结合控制台输出的信息，就可以定位到错误代码了

我们再来看一下，给代码开启 source-map，看错误信息是否一致

错误代码的位置定位是准确的，证明可行。

3、后续扩展思路

目前实现的是比较简单的脚本，所以存在一些问题：

• 需要当前构建内容和线上是一致的
• 操作比较繁琐

优化思路如下：

后续优化慢慢补充~