如何获取缩小的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

我认为没有超级简单的工具可以使用源映射（无需使用 Web 服务）将缩小的堆栈跟踪转换为可读的堆栈跟踪，因此我为此创建了一个工具：

https://github.com/mifi/stacktracify

安装和使用如下：

npm install -g stacktracify

现在将缩小的堆栈跟踪复制到剪贴板- 然后运行：

stacktracify /path/to/js.map

Answer 2

你想要做的是解析源地图.这与Web浏览器无关.您需要做的就是将缩小的引用转换为未管理的资源.

如果您对NodeJS有任何经验,那么已经有一个包可以帮您完成.

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

安装库

npm install -g source-map

创建名为"issue.js"的文件

yarn global add source-map

使用节点运行该文件

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}));

它应该在原始文件到控制台从堆栈跟踪第一行输出的位置.

注:我告诉你安装源全球地图的易用性,但您可以创建一个节点项目已经做了你需要什么,在本地安装它.

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

为页面中运行的 JS 添加注释指令。

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

在 Firefox（不确定 chrome）中，要告诉调试器使用源映射（如果可用），请单击“调试器设置”按钮，然后从弹出的设置列表中选择“显示原始源”：