如何在 React 项目中自动创建 Sentry 版本并将源映射上传到 Sentry？答案

【问题标题】：How to automatically create a Sentry release and upload source-maps to Sentry in a react project?如何在 React 项目中自动创建 Sentry 版本并将源映射上传到 Sentry？
【发布时间】：2019-05-11 23:05:11
【问题描述】：

我有一个 create-react-app 项目，我希望部署过程生成 Sentry 版本并将源映射也上传到 Sentry。

【问题讨论】：

标签： reactjs bash create-react-app source-maps sentry

【解决方案1】：

此脚本将为package.json 文件中指定的版本创建一个 Sentry 版本，并将源映射上传到 Sentry。

它适用于任何 JS 项目，而不仅仅是 React。

在您的项目根目录中创建一个文件并将其命名为deploy.sh：

SENTRY_TOKEN="YOUR_TOKEN"
PACKAGE_VERSION=`cat package.json \
  | grep version \
  | head -1 \
  | awk -F: '{ print $2 }' \
  | sed 's/[",]//g' \
  | tr -d '[[:space:]]'`

printf "\nBuilding version $PACKAGE_VERSION...\n\n"

#2) Build for dev and cd to build directory
npm run build # or whatever your build command is
cd build/static/js # or whatever your build folder is

#3) create Sentry release
SOURCE_MAP=`find . -maxdepth 1 -mindepth 1 -name '*.map' | awk '{ gsub("./", "") ; print $0 }'`
printf "\nCreating a Sentry release for version $PACKAGE_VERSION...\n"

curl https://sentry.io/api/0/projects/:sentry_organization_slug/:sentry_project_slug/releases/ \
  -X POST \
  -H "Authorization: Bearer ${SENTRY_TOKEN}" \
  -H 'Content-Type: application/json' \
  -d "{\"version\": \"${PACKAGE_VERSION}\"}" \

#4) Upload a file for the given release
printf "\n\nUploading sourcemap file to Sentry: ${SOURCE_MAP}...\n"
curl "https://sentry.io/api/0/projects/:sentry_organization_slug/:sentry_project_slug/releases/$PACKAGE_VERSION/files/" \
  -X POST \
  -H "Authorization: Bearer ${SENTRY_TOKEN}" \
  -F file=@${SOURCE_MAP} \
  -F name="https://THE_URL_OF_THE_MAIN_JS_FILE/$SOURCE_MAP"

#5) IMPORTANT: Delete the sourcemaps before deploying
rm $SOURCE_MAP

#6) upload to your cloud provider
...

替换：

:sentry_organization_slug 和 :sentry_project_slug 具有来自哨兵的正确值（来自哨兵帐户网站内任何页面的 URL）
SENTRY_TOKEN 使用 Sentry 的令牌
THE_URL_OF_THE_MAIN_JS_FILE 带有您的 react 构建文件可公开访问的 URL。

运行。

确保不要忘记在每个版本中更新 package.json 版本

【讨论】：

如何运行这个脚本？此外，是否需要在每次部署之前手动运行此脚本？是否会使用 npm run build 替换此脚本，因为此脚本已在步骤 2 中运行该命令？
当我写这个答案时，我手动使用它作为构建和部署脚本。您也可以在 CLI（例如 Travis）中运行它。是的，它取代了npm run build@Badrush

【解决方案2】：

我最近遇到了同样的问题，尽管 Sentry 没有针对 Create React App 的官方解决方案，但他们的工具非常棒，而且很容易让您自己创建发布的过程自动化。您需要生成发布名称、构建应用程序并使用此名称来初始化 Sentry 库、创建 Sentry Release 并上传源地图。

我写了一篇文章详细解释了如何做到这一点：https://medium.com/@vshab/create-react-app-and-sentry-cde1f15cbaa

或者您可以直接查看配置项目的示例：https://github.com/vshab/create-react-app-and-sentry-example

【讨论】：