在我们的生产服务器上,我已经缩小了发布的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)告诉调试器使用源映射,如果他们是可用的,点击"调试器设置"按钮,并从弹出的设置列表中选择"显示原始源":