我如何采取一个缩小的javascript堆栈跟踪，并运行它对源映射，以获得适当的错误

How can I take a minified javascript stack trace and run it against a source map to get the proper error?

本文关键字：运行 映射 错误 跟踪 何采取 堆栈 javascript 缩小 一个      更新时间：2023-09-26

在我们的生产服务器上，我已经缩小了发布的javascript，并且我不包括地图文件，因为我不希望用户能够理解基于错误发生了什么。

我写了一个日志服务，通过电子邮件转发angular异常(由$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">

我想知道的是:是否有一个程序，我可以通过映射文件(或不通过映射文件，如果有另一种方式)对实际的非最小化源代码分析这个堆栈跟踪

我认为没有超级简单的工具可以使用源映射(不需要使用web服务)将最小化的堆栈跟踪转换为可读的堆栈跟踪，所以我为此创建了一个工具:

https://github.com/mifi/stacktracify

安装和使用如下:

npm install -g stacktracify

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

stacktracify /path/to/js.map

您要做的是解析源映射。这与网页浏览器无关。您所需要做的就是将最小化引用转换为非最小化资源。

如果你有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，但你也可以创建一个节点项目来完成你需要的工作，并在本地安装。

添加到@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);
  });
});

如果你有外部访问源地图文件，可以得到相同的文件结构，你可以工作出来，我猜，但我不知道任何工具以外的浏览器，将帮助您与此。

在运行的浏览器中拥有数据的额外优势将允许检查本地数据，这是即使使用源映射也无法获得的。

您可能想要考虑使用rollbar之类的工具来进行错误报告。这将报告每帧中的所有局部变量，以帮助调试。它支持浏览器外的源映射，以解决您的安全问题。

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

//# sourceMappingURL =/道路//你/sourcemap.map

在firefox(不确定chrome)告诉调试器使用源映射，如果他们是可用的，点击"调试器设置"按钮，并从弹出的设置列表中选择"显示原始源":

相关文章：