如何獲取縮小的 javascript 堆棧跟蹤並針對源映射運行它以獲得正確的錯誤？

Question

在我們的生產服務器上，我已經縮小了已發布的 javascript 並且我沒有在其中包含地圖文件，因為我不希望用戶能夠根據錯誤了解發生了什么。

我編寫了一個日志服務，用於通過電子郵件將角度異常（由 $exceptionHandler 捕獲）轉發給自己。 但是，此堆棧跟蹤幾乎無法讀取：

n is not defined
    at o (http://localhost:9000/build/app.min.js:1:3284)
    at new NameController (http://localhost:9000/build/app.min.js:1:3412)
    at e (http://localhost:9000/build/bower.min.js:44:193)
    at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310)
    at b.$get (http://localhost:9000/build/bower.min.js:85:313)
    at d.compile (http://localhost:9000/build/bower.min.js:321:23333)
    at aa (http://localhost:9000/build/bower.min.js:78:90)
    at K (http://localhost:9000/build/bower.min.js:67:39)
    at g (http://localhost:9000/build/bower.min.js:59:410)
    at http://localhost:9000/build/bower.min.js:58:480 <ui-view class="ng-scope">

我想知道的是：是否有一個程序可以通過映射文件（或者如果有另一種方法，則不通過映射文件）針對實際的非縮小源代碼分析此堆棧跟蹤

Answer 1

您要做的是解析源映射。 這與網絡瀏覽器無關。 您需要做的就是將縮小的引用轉換為未縮小的資源。

如果您對 NodeJS 有任何經驗，那么已經有一個包可以為您執行此操作。

https://github.com/mozilla/source-map/

安裝庫

npm install -g source-map

或者

yarn global add source-map

創建一個名為“issue.js”的文件

fs = require('fs');
var sourceMap = require('source-map');
var smc = new sourceMap.SourceMapConsumer(fs.readFileSync("./app.min.js.map","utf8"));
console.log(smc.originalPositionFor({line: 1, column: 3284}));

使用節點運行文件

node issue.js

它應該將原始文件中的位置輸出到堆棧跟蹤中第一行的控制台。

注意：為了便於使用，我告訴您全局安裝 source-map，但是您可以創建一個節點項目來執行您需要的操作並在本地安裝它。

Answer 2

我認為沒有超級簡單的工具可以使用源映射（無需使用 Web 服務）將縮小的堆棧跟蹤轉換為可讀的堆棧跟蹤，因此我為此創建了一個工具：

https://github.com/mifi/stacktracify

安裝和使用如下：

npm install -g stacktracify

現在將縮小的堆棧跟蹤復制到剪貼板- 然后運行：

stacktracify /path/to/js.map

Answer 3

添加到@Reactgular 的答案中，以下代碼段將適用於最新版本的 source-map

  const rawSourceMap = fs.readFileSync("./app.min.js.map","utf8");

  const whatever = sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
    console.log(consumer.originalPositionFor({
      line: 1,
      column: 3284
    }));
  });

並在線程上添加一個簡單的正則表達式，如/\\/(\\w*[-\\.]?\\w*).js:\\d*:\\d*/g

下面是一個非常簡單的正則表達式，用於在堆棧跟蹤中查找所有行號。

  //regex for patterns like utils.js, utils123.js, utils-name.js, utils.version.js
  var patt = /\/(\w*[-\.]?\w*).js:\d*:\d*/g; 
  // returns matches like ['/app.min.js:1:3284', '/bower.min.js:44:193', ..]
  var errorPositions = line.match(patt);
  console.log(errorPositions);
  if(!errorPositions || errorPositions.length === 0) {
      console.log("No error line numbers detected in the file. Ensure your stack trace file is proper");
      return;
  }
  errorPositions.forEach(function(error) {
    findInSourceMap(error);
  });
});

Answer 4

如果您可以從外部訪問源映射文件並且可以獲得相同的文件結構，我想您可以解決它，但我不知道瀏覽器之外的任何工具可以幫助您解決這個問題。

在正在運行的瀏覽器中保存數據的額外優勢將允許檢查本地人，即使使用源地圖也無法獲得。

您可能需要考慮使用rollbar 之類的工具來報告錯誤。 這將報告每個幀中的所有局部變量以幫助調試。 它支持瀏覽器外的源地圖，以解決您的安全問題。

Answer 5

為頁面中運行的 JS 附加注釋指令。

//# sourceMappingURL=/path/to/your/sourcemap.map

在firefox（不確定chrome）中告訴調試器使用源映射（如果它們可用），單擊“調試器設置”按鈕並從彈出的設置列表中選擇“顯示原始源”：