線上壓縮程式碼-定位錯誤

海賊王的男人發表於2018-01-08

生產環境沒有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、後續擴充套件思路

目前實現的是比較簡單的指令碼，所以存在一些問題：

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

優化思路如下：

線上壓縮程式碼-定位錯誤

後續優化慢慢補充~

參考

指令碼錯誤量極致優化-讓指令碼錯誤一目瞭然

相關文章