如何将Stackify包中的堆栈跟踪转换为原始源代码位置？

Question

我想在JavaScript应用中报告未捕获异常的堆栈跟踪，但问题是所包含的JavaScript是Browserify捆绑包。这意味着当我获得异常堆栈时，它指的是bundle文件中的位置，即使JavaScript包包含源映射！

如何将堆栈中的文件位置转换为原始源文件？我想它涉及一些源地图的使用？

下面是一个打印异常堆栈跟踪的示例程序：

的index.html

<script src="/bundle.js"></script>

index.js

window.onerror = (message, url, line, column, error) => {
  console.log(`An exception was caught for URL ${url}, line ${line}:`, error.stack)
}

const thrower = () => {
  throw new Error(`Catch me if you can`)
}

const callingThrower = () => {
  thrower()
}

callingThrower()

生成Bundle

# The --debug flag enables inline source maps
browserify --debug -o bundle.js index.js

节目输出

An exception was caught for URL http://localhost:8000/bundle.js, line 7: Error: Catch me if you can
    at thrower (http://localhost:8000/bundle.js:7:9)
    at callingThrower (http://localhost:8000/bundle.js:11:3)
    at Object.1 (http://localhost:8000/bundle.js:14:1)
    at s (http://localhost:8000/bundle.js:1:254)
    at e (http://localhost:8000/bundle.js:1:425)
    at http://localhost:8000/bundle.js:1:443

浏览器

我已在OS X上使用Chrome和Firefox测试过。

Answer 1

您可以在代码中执行的

一个 事物是启用源图

源地图是指示您的浏览器翻译已转换代码中的行引用和原始代码中的行引用的文件。

这是一个很好的链接，可以了解sourceMaps

在 Browserify 中启用源地图非常简单。您只需运行

browserify --debug main.js -o bundle.js

--debug告诉您在<{1}}中加入 sourceMaps ，但在劣势中，它会使您的捆绑大两倍< /强>

但是，您可以告诉用户使用插件exorcist单独下载此文件，它会将源地图拆分为bundle.js

对我来说，我将bundle.js.map中的 browserify 选项添加为gulpfile.js

gruntfile.js

要启用它或按照此thread中的说明，您可以使用browserify: { dist: { src: ['src/main.js'], dest: 'dist/bundle.js', options: { debug: true } } }, 代替

browserifyOptions