如何優雅地檢視 JS 錯誤堆疊？

qcloud發表於2019-01-15
JS

本文由雲+社群發表

在前端，我們經常會通過 window.onerror 事件來捕獲未處理的異常。假設捕獲了一個異常，上報的堆疊是這個：

TypeError: Cannot read property 'module' of undefined
    at Object.exec (https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:16:29828)
    at HTMLLIElement.<anonymous> (https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:25:6409)
    at HTMLDivElement.dispatch (https://my.cdn.com/dest/vendor.eb28ded1876760b8e90973c9f4813a2c.js:1:248887)
    at HTMLDivElement.y.handle (https://my.cdn.com/dest/vendor.eb28ded1876760b8e90973c9f4813a2c.js:1:245631)
複製程式碼

這個堆疊，你看得出問題來嗎？我們釋出到 CDN 的指令碼檔案，普遍是經過 UglifyJS 壓縮的，所以堆疊可讀性相當的差。假如有下面的一個堆疊檢視工具，又如何？

img
堆疊檢視工具

眼尖的同學，一眼就能找到問題。這裡的 p[e] 出現了可能為 undefined 的情況。

這樣一個工具，大大提高了問題定位的效率。

好，這裡不賣瓜，我們來看下這當中的實現原理。

img
堆疊工具實現原理

一步步來說的話：

  • 拿到原始堆疊字串，使用

    error-stack-parser

    解析為堆疊幀，每個堆疊幀包含三個最重要的欄位：

    • url - 原始碼的 URL 地址
    • line - 堆疊位置行號
    • col - 堆疊位置列號

  • 對於 url，我們可以用於載入原始碼內容，得到 source

  • source 使用 UglifyJs 反向美化成多行的程式碼 prettysource，並且同時生成 sourcemap

  • 堆疊幀中的 line 和 col 通過 sourcemap 反查，得到美化後對應的 prettyline 和 prettycol

  • 將 prettysource、prettyline、prettycol 給到 Monaco Editor 渲染，就可以得到上述截圖的效果

說那麼多，不如貼程式碼是吧：

var result = UglifyJS.minify(source, {
  output: {
    beautify: true
  },
  sourceMap: {
    filename: 'pretty.js',
    url: 'pretty.js.map'
  }
});
var code = result.code;
var rawSourceMap = JSON.parse(result.map);
var consumerPromise = new sourceMap.SourceMapConsumer(rawSourceMap);

resolve(
  consumerPromise.then(function(consumer) {
    return {
      code: code,
      sourceMapConsumer: consumer
    }
  })
);
複製程式碼

上面就是使用 UglifyJs 對壓縮程式碼進行反向美化的核心程式碼。下面給出 SourceMap 的使用原始碼：

var code = result.code;
var consumer = result.sourceMapConsumer;

var position = consumer.generatedPositionFor({
  source: '0',
  line: lineNumber,
  column: columnNumber
});

parent.postMessage({
  event: 'js-prettify-callback',
  payload: {
    hash: payload.hash,
    result: 'success',
    prettySource: code,
    prettyLineNumber: position.line,
    prettyColumnNumber: position.column + 1
  }
}, sourceOrigin);
複製程式碼

完整原始碼有興趣的讀者也可以下下來把玩把玩：

js-loader.html.zip

原始碼只包含堆疊解析的實現，UI 的實現不在本文的討論之內，用 React 隨便畫一畫就好了。

此文已由作者授權騰訊雲+社群在各渠道釋出

獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社群-雲加社群官方號及知乎機構號

相關文章