線上壓縮代碼-定位錯誤

生產環境沒有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

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

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

三、後續擴展思路

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

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

優化思路以下:

後續優化慢慢補充~

參考

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

相關文章
相關標籤/搜索