我如何获取一个缩小的javascript堆栈跟踪并针对源Map运行它以获得正确的错误?

jaxagkaj  于 2023-03-28  发布在  Java
关注(0)|答案(5)|浏览(153)

在我们的生产服务器上,我已经缩小了发布的javascript,我没有包含一个Map文件,因为我不希望用户能够根据错误理解发生了什么。
我编写了一个日志服务,通过电子邮件将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">

我想知道的是:有没有一个程序可以让我通过Map文件(或者不通过Map文件,如果有其他方法的话),根据实际的非精简源代码来分析这个堆栈跟踪

64jmpszr

64jmpszr1#

我发现没有一个超级简单的工具可以使用源Map(而不必使用Web服务)将缩小的堆栈跟踪转换为可读的堆栈跟踪,所以我为此创建了一个工具:
https://github.com/mifi/stacktracify
安装和使用方法如下:

npm install -g stacktracify

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

stacktracify /path/to/js.map
u91tlkcl

u91tlkcl2#

你要做的是解析源Map。这与web浏览器无关。你所需要做的就是将缩小的引用转换为未缩小的资源。
如果你有任何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运行文件

node issue.js

它应该将原始文件中的位置输出到控制台,作为堆栈跟踪的第一行。
注意:我告诉您全局安装source-map是为了方便使用,但是您可以创建一个节点项目来完成您需要的工作并在本地安装它。

ctrmrzij

ctrmrzij3#

加上@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);
  });
});
cgvd09ve

cgvd09ve4#

如果你可以从外部访问源代码Map文件,并且可以获得相同的文件结构,我想你可以解决这个问题,但我不知道浏览器之外的任何工具可以帮助你解决这个问题。
在运行的浏览器中拥有数据的额外优势将允许检查局部变量,即使使用源Map也无法获得这些局部变量。
您可能需要考虑使用rollbar这样的工具来进行错误报告。这将报告每个帧中的所有局部变量以帮助调试。它支持sourcemaps outside the browser以解决您的安全问题。

o7jaxewo

o7jaxewo5#

为页面中运行的JS追加注解指令。
//# sourceMappingURL=/path/to/your/sourcemap.map
在firefox(不确定chrome)中,要告诉调试器使用源代码Map(如果可用),请单击“调试器设置”按钮,然后从弹出的设置列表中选择“显示原始源代码”:

相关问题