生產環境沒有source-map文件,上報的錯誤都很差定位,這裏實現一個簡單的錯誤定位腳本javascript
這裏經過控制檯看錯誤信息vue
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的片斷)java
method: {
test (option) {
const data = option.test
const dataTest = option.data.test
return data + dataTest
}
},
created () {
// 設置異步錯誤的緣由是,同步的錯誤會被vue捕獲
setTimeout(() => {
this.test({
testOption: 1
})
}, 300)
}
複製代碼
在瀏覽器中運行,報錯結果以下node
獲得錯誤信息:git
錯誤行數:1github
錯誤列數:59236npm
錯誤信息:cannot read property 'test' of undefined瀏覽器
錯誤文件:0.0a77f.jsbash
安裝依賴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,看錯誤信息是否一致
目前實現的是比較簡單的腳本,因此存在一些問題:
優化思路以下:
後續優化慢慢補充~