Question

在我们的生产服务器上，我已经发布了javascript 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服务）将缩小的堆栈跟踪转换为可读的跟踪记录，因此我为此创建了一个工具：

cf. pic of postman

如下安装并使用它：

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”的文件

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 3

如果您可以从外部访问源地图文件并且可以获得相同的文件结构，那么我猜想，但我不知道浏览器之外的任何工具可以帮助您解决这个问题。< / p>

在正在运行的浏览器中使用数据的附加优势将允许检查您使用源地图获得的本地人。

您可能需要考虑rollbar等工具来执行错误报告。这将报告每个帧中的所有本地人以帮助调试。它支持sourcemaps outside the browser解决您的安全问题。

Answer 4

在@Reactgular's答案中，以下代码段适用于最新版本的源地图

  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 5

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

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

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

如何获取缩小的javascript堆栈跟踪并针对源映射运行它以获取正确的错误？

5 个答案: