javascript - 如何在 Sentry 上设置源 map

Question

我正在使用 Sentry 报告我创建的 React 应用程序的错误。
它的问题是我不知道如何调试某些问题，因为我不知道发生错误的确切文件是什么:

我正在使用 Laravel mix 进行编译。 webpack.mix.js看起来像这样:

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .version();

我尝试使用 sourceMaps()像这样:

const productionSourceMaps = true;

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .react("resources/js/checkout/DonationRoot.js", "public/js")
  .version()
  .sourceMaps(productionSourceMaps, "source-map")

但它似乎不起作用。在 Chrome 开发工具中查看时，它会在文件正下方附加此内容:

//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600

但是当我漂亮地打印它仍然会导致同样的胡言乱语:

我期待看到它指出我在本地处理的组件文件。那可能吗？
更新
我尝试安装 Sentry 的 webpack 插件:

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

let config = {
  output: {
    publicPath: "/",
    chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
  },
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: "MY_AUTH_TOKEN",
      org: "MY_ORG",
      project: "MY_PROJECT",
      release: "MY_RELEASE",

      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    }),
  ],
};

使用相同 release在我的源文件上初始化 Sentry 时:

Sentry.init({
  dsn: "MY_DSN",
  release: "testing",
});

放一些失败的代码:

useEffect(() => {
  console.bog("MY_RELEASE");
}, []);

然后像往常一样编译:

npm run production

我在浏览器上触发了错误，我在那里得到了预期的文件( MobilePayment.js ):

但从哨兵那里，我得到的是:

我希望找到 MobilePayment.js在那里，但没有。
编译时，我得到了这个:

所以我假设它将源上传到 Sentry。
我什至使用 Sentry-cli 尝试了同样的事情:

sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js

它几乎做了同样的事情:

然后我触发了同样的错误。但我仍然从 Sentry 仪表板得到相同的输出。请帮忙。

Answer 1

我以前遇到过这个。
IIRC 的诀窍是找到正确的 devtool WebPack option.
我记不清了，但我想我用过 eval-cheap-module-source-map或 eval-source-map .