如何在不公开托管的情况下从 create-react-app 将源映射上传到 Rollbar.js？

Question

1) 我在 Create-react-app 的帮助下创建了一个应用程序

2）它没有弹出

3）我不想公开上传源地图

4) 我已经设置了应用程序来使用 Rollbar.js 来跟踪生产中的错误

5) 手动上传不是一种选择，因为我将 js 分成块，其中大约有 20 个

但是我需要直接将源映射上传到 Rollbar（或者将它们托管在其他服务器上，这不适合我）

我已经阅读了Rollbar 文档。我还看过 webpack插件，它很难在不弹出的情况下使用。

Rollbar 文档显示了如何使用 curl 命令上传，但如果您以前从未使用过 shell 脚本，这将非常困难。

Answer 1

在花费数小时寻找示例或快速复制粘贴解决方案后，我别无选择自己编写。所以这就是我实现这一目标的方式，希望这对某人有帮助。

这是我为 Mac 编写的第一个 shell 脚本，所以它肯定不是完美的。我想它可能需要针对在其他平台上的使用进行调整，但无论如何这是一个好的开始。

1. 在根文件夹中创建一个名为“sourceMaps”的文件夹
2. 将新脚本添加到 package.json 并修改构建脚本

"build": "REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts build && npm run upload-source-maps",
"upload-source-maps": "rm sourceMaps/* && mv build/static/js/*.map sourceMaps/ && sh ./upload-script.sh"

这个脚本做了几件事：

a) 它从以前的构建中清除源映射

b) 将新生成的源映射从 build/static/js/ 移动到 sourceMaps/ 文件夹 - 这样它们就不会公开部署

c) 它调用完成所有工作的 ./upload-script.sh 脚本

3. 现在使用以下代码在您的根文件夹中创建一个名为“upload-script.sh”的文件

version=$(git rev-parse HEAD)
for filename in ./sourceMaps/*; do
  sliced=${filename//.\/sourceMaps/""}
  without_map=${sliced//.map/""}
  minified_url=//YOUR_DOMAIN/static/js$without_map
  source_map=@${filename//.\//""}

  curl https://api.rollbar.com/api/1/sourcemap \
  -F access_token=YOUR_TOKEN \
  -F version="$version" \
  -F minified_url=$minified_url \
  -F source_map="$source_map"
done

此脚本执行以下操作：

a) 将最新的 git commit 作为版本（以便 rollbar 可以了解它需要哪个 source map 版本

b) 遍历 sourceMaps 文件夹中的每个源映射文件，替换我们不需要遵循 rollbar 格式的符号

c) 向 rollbar api 发出 curl 请求

您需要做的最后一件事是在代码中设置滚动条代码版本，因为您可能会注意到我传递了一个名为 REACT_APP_GIT_SHA= 的变量git rev-parse HEAD，您可以使用process.env.REACT_APP_GIT_SHA

这是您的 rollbarConfig 的示例

const rollbarConfig = {
  accessToken: YOUR_ACCESS_TOKEN,
  captureUncaught: true,
  payload: {
    environment: process.env.REACT_APP_NODE_ENV,
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: process.env.REACT_APP_GIT_SHA,
      }
    }
  }
}