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