reactjs - 如何在 React 项目中自动创建 Sentry 版本并将源映射上传到 Sentry?

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

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

最佳答案

此脚本将为 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
...

替换:

  1. :sentry_organization_slug:sentry_project_slug 具有来自 sentry 的正确值(来自您的 sentry 帐户网站内任何页面的 URL)
  2. SENTRY_TOKEN 以及您来自 Sentry 的 token
  3. THE_URL_OF_THE_MAIN_JS_FILE 以及您的 React 构建文件可公开访问的 URL。

运行。

确保您不要忘记在每次发布时更新 package.json 版本

关于reactjs - 如何在 React 项目中自动创建 Sentry 版本并将源映射上传到 Sentry?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53715981/

相关文章:

bash - 将脚本通过管道传输到 bash 中?

javascript - 如何通过 CRA 使用不同的 CSS 重置样式表?

javascript - 如何按字母顺序对下拉菜单项进行排序?

javascript - useState Hook 不更新值

javascript - React.js 中的数据存储在哪里?

javascript - 将基于类的组件重构为功能组件

linux - 我怎样才能让 bash 阻止从我产生的工作中获取一行标准输出

python - 有没有一种简单的方法可以随机化给定文本中的所有单词?也许在 BASH 中?

javascript - 没有正文无法转换节点

webpack - 如何在CRA项目中用parcel替换webpack?