React 忽略源映射，同时让 Sentry 识别它们

Question

背景
我们尝试使用 React create 应用程序在生产构建中省略任何源映射，同时继续将其上传到哨兵。

据我了解，它应该可以工作，但是 Sentry 拒绝识别上传的源地图。

我们如何使用它：

源构建命令
只需 (1) 使用

build

（包括源映射）创建

react scripts

。 (2) 将它们上传到 Sentry，以及 (3) 从生成的

build

中删除所有源映射。

...
"release": "(export REACT_APP_SENTRY_RELEASE=woodhouse@$(git rev-parse --short HEAD); react-scripts build && node scripts/sentry.js)",
"postrelease": "find ./build -name '*.map' -delete",
...

脚本/sentry.js
使用 Git 提交哈希作为发布将其上传到 Sentry 的脚本。

const SentryCli = require('@sentry/cli');

async function createReleaseAndUpload() {
  ...
  const release = process.env.REACT_APP_SENTRY_RELEASE;
  const cli = new SentryCli();

  try {
    ...
    await cli.releases.new(release);
    await cli.releases.uploadSourceMaps(release, {
      include: ['build/static/js'],
      urlPrefix: '~/static/js',
      rewrite: false,
    });
    await cli.releases.finalize(release);
  }
  ...
}

createReleaseAndUpload();

初始化哨兵
初始化Sentry SDK；使用相同的 git 提交哈希值。

...
const SENTRY_RELEASE = process.env.REACT_APP_SENTRY_RELEASE;
...
    if (SENTRY_RELEASE) {
        /**
         * The release identifier used when uploading respective source maps. Specify
         * this value to allow Sentry to resolve the correct source maps when
         * processing events.
         */
        sentryOptions.release = `${SENTRY_RELEASE}`;
    }

    Sentry.init(sentryOptions);
...

Sentry源码地图发布
可以看到，Sentry确实有上传的源地图

哨兵问题
从本期中可以看出，该期与同一版本相关；它无法识别源地图..

问题
我们在这里做错了什么？我们的目标是继续使用 React 脚本，但如果需要，我们可以

eject

项目并尝试使用 devTool: hidden-source-map 使用

sentry 的 webpack 插件

（请参阅 https://webpack.js.org/configuration/devtool/）和

deleteAfterCompile

选项。但目前我什至不相信这会起作用。

Answer 1

我建议删除您设置的有关 Sentry 源映射的所有内容并运行 Sentry 源映射向导：https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps