生产环境没有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、后续扩展思路
目前实现的是比较简单的脚本，所以存在一些问题：
- 需要当前构建内容和线上是一致的
- 操作比较繁琐
优化思路如下：
后续优化慢慢补充~
