Rails编译了javascript资产调试

Question

在生产环境中，我的javascript资产被捆绑在一起，当我抓到一个javascript错误时，我会得到它的行和列，例如：

d86c04c8f3.js:2:9588

现在，由于文件缩小等，因此很难对源代码中的有问题的行进行逆向工程和查找。如果使用line / col找到原始行，rails rails bundler是否有办法进行逆向工程？应该是可能的，因为资产构建者拥有它需要的所有信息。

我们需要一个简单的选项，运行bundle exec rake资产：再次预编译RAILS_ENV = production，但这次指定line + col，然后rake将输出源文件+对应于该资产行+ col的行。通过这种方式，我们可以轻松地调试在客户端捕获的异常（并将其发送到服务器以进行监视）。

EDIT1

关于在客户端做某事的所有解决方案都是不可行的，因为我们无法访问客户端 - 我们讨论的是在生产模式，实时模式中发现的异常，并且这些异常被发送到服务器进行监控目的。

Answer 1

对于调试缩小的脚本，有源映射，一旦在浏览器中加载 - 您可以在那里看到未经编辑的代码。

Sprockets计划支持4.0中的源图，但尚未发布（仅限测试版）。

默认情况下，Webpack支持源映射和rails 6切换到webpacker，因此将脚本转换为包似乎是合乎逻辑的，尽管对于大型项目来说这是一项艰巨的任务

更新：一旦有了构建的源映射，就可以使用如下工具：

npx source-map-cli resolve d86c04c8f3.js.map 2 9588

这将告诉您代码在缩小文件映射中的位置，其形式为：

Maps to webpack:///app/javascript/components/CountrySelector.jsx:14:0

    fetch(`/control/autocomplete/countries`).then(r => r.json()).then(countries => this.setState({countries}))
    ^