如何将来自Browserify捆绑包的堆栈跟踪信息转换为原始源代码位置？

Question

我想报告我的JavaScript应用程序中未捕获的异常的堆栈跟踪，但是问题是所包含的JavaScript是Browserify捆绑包。 这意味着当我获取异常的堆栈时，即使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()

生成捆绑

# 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告诉你包括在该sourceMaps bundle.js而是一个缺点它使你的包两倍

但是你可以告诉用户通过使用插件单独下载该文件驱魔 ，它将源地图分成bundle.js.map

对我来说，我加在了browserify 选项 gulpfile.js为gruntfile.js为

browserify: {
        dist: {
            src: ['src/main.js'],
            dest: 'dist/bundle.js',
            options: {
                debug: true
            }
        }
    },

要启用它或如本主题所述，您可以使用browserifyOptions代替

options: { browserifyOptions : {} }