如何將來自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 : {} }