线上压缩代码-定位错误

生产环境没有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、后续扩展思路

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

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

优化思路如下：

后续优化慢慢补充~

参考

脚本错误量极致优化-让脚本错误一目了然