Javascript：使用源映射调试堆栈跟踪

Question

这可能是一个有点奇怪的问题，我似乎无法搜索正确的短语来找到任何相关的答案。

我们有一个在客户端计算机上运行并且被缩小的应用程序。我们生成源映射，但它们不会暴露给生产版本。

我有一个

window.onerror

，我使用一个catch all来处理草率的代码，发现它是我不知道的方式。值得庆幸的是，这几乎从未被使用过。最近，我偶尔会弹出一个

undefined

错误，所以有人找到了一种方法来做一些不想要的事情。 Chrome 很好地记录了堆栈跟踪中的行号和列号，当 onerror 捕获这些 bug 之一时，我们会将其记录到日志服务器，但这就是我必须调试的全部内容，并且查看一个 min 文件并不那么吸引人。而且

undefined is not a function

也不是很有帮助:)

问题：是否有一个工具（可能是在 NodeJS 中）可以获取 min 文件、源映射和堆栈跟踪字符串并生成相关文件、行号和列号？

我意识到浏览器会在运行时为你执行此操作，但在这种情况下，我没有那么奢侈，因为我试图在事后找出错误实际上是什么。

Answer 1

发现这个：https://github.com/thlorenz/stack-mapper

我使用 uglify ，它似乎可以生成所需的正确映射，并且看起来它适用于我上面建议的情况。

编辑 实际上，这个效果更好并且使用起来更简单https://github.com/mozilla/source-map/.

用法示例：

var fs = require('fs');
var smc = require('source-map');

var stack = "TypeError: undefined is not a function\r\nat h/min/min.js?1404839824760:9:23048";
stack = stack.split(/\r\n/g);
var error = stack.shift(); // First line is the actual error

var errors = [];
var file = null;

stack.forEach(function(line){
    var _trace = line.split('/').pop();
    var trace = {};
    trace.filename = _trace.split('?').shift();
    _trace = _trace.split(':');
    trace.line = parseInt(_trace[1], 10);
    trace.column = parseInt(_trace[2], 10);
    errors.push(trace);

    if(!file)
        file = trace.filename.split('.').shift();

    trace.filename = __dirname + '/../min/' + trace.filename;
});

// This does not account for multiple files in stack trace right now
var map = fs.readFileSync(__dirname + '/../src/' + file + '.js.map');
map = JSON.parse(map);
var sm = new smc.SourceMapConsumer(map);
console.log(sm.originalPositionFor(errors[0]));

Answer 2

stacktrace.js 看起来是实现这一目标的另一个有用工具。

他们网站上的示例：

var error = new Error('BOOM!');
StackTrace.fromError(error).then(callback).catch(errback)
=> Promise(Array[StackFrame], Error);

Answer 3

有一个非常受欢迎的项目，名为 source-map-support 可以轻松完成此操作。

客户端 JavaScript

<script src="browser-source-map-support.js"></script>
<script>sourceMapSupport.install();</script>

NodeJS（编程）

require('source-map-support').install();

NodeJS（命令行）

node -r source-map-support/register compiled.js

Answer 4

我发现https://github.com/thlorenz/stack-mapper很容易自动执行此操作。 如果您希望以交互方式执行此操作，您可以在 Web 浏览器中使用 stack-mapper 和如下工具：https://github.com/Jimbly/stackwalker - 只需加载您的 .map 文件，粘贴 (缩小）调用堆栈或单个错误位置，然后您可以单击堆栈并查看右侧的原始代码。