如何在 Sentry 上设置源地图
Posted
技术标签:
【中文标题】如何在 Sentry 上设置源地图【英文标题】:How to setup source map on Sentry 【发布时间】:2021-07-19 12:32:41 【问题描述】:我正在使用 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"],
),
],
;
在我的源文件上初始化 Sentry 时使用了相同的 release
:
Sentry.init(
dsn: "MY_DSN",
release: "testing",
);
放一些失败的代码:
useEffect(() =>
console.bog("MY_RELEASE");
, []);
然后像往常一样编译:
npm run production
我在浏览器上触发了错误,并在其中获得了预期的文件 (MobilePayment.js
):
但从 Sentry 那里,我得到的只是:
我希望在那里找到MobilePayment.js
,但没有。
编译时,我得到了这个:
所以我假设它将源上传到 Sentry。
我什至使用 Sentry-cli 尝试过同样的事情:
sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js
它几乎做了同样的事情:
然后我触发了同样的错误。但我仍然从 Sentry 仪表板得到相同的输出。请帮忙。
【问题讨论】:
嘿,请问您是在 Sentry 上上传源地图吗? @YashJoshi 是的。通过哨兵-cli。你可以看到我在上面做了什么 【参考方案1】:我以前也遇到过。
IIRC 的诀窍是找到正确的 devtool
WebPack option.
我记不清了,但我想我用过eval-cheap-module-source-map
或eval-source-map
。
【讨论】:
以上是关于如何在 Sentry 上设置源地图的主要内容,如果未能解决你的问题,请参考以下文章
如何在通用 Windows 平台地图控件上设置 LocationRectangle?