線上壓縮代碼-定位錯誤

生產環境沒有source-map文件，上報的錯誤都很差定位，這裏實現一個簡單的錯誤定位腳本

一、獲取壓縮代碼錯誤信息（行數、列數、錯誤信息，錯誤文件）

這裏經過控制檯看錯誤信息

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

二、定位錯誤的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，看錯誤信息是否一致

錯誤代碼的位置定位是準確的，證實可行。

三、後續擴展思路

目前實現的是比較簡單的腳本，因此存在一些問題：

• 須要當前構建內容和線上是一致的
• 操做比較繁瑣

優化思路以下：

後續優化慢慢補充~

參考

腳本錯誤量極致優化-讓腳本錯誤一目瞭然