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

Question

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

2) 没有弹出

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

4) 我已将应用程序设置为与 Rollbar.js 一起用于生产环境中的错误跟踪

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

但是我需要直接上传source maps到Rollbar（或者托管在其他服务器上，这不适合我）

我读过 Rollbar docs. I've also looked at webpack plugin 不弹出就很难使用。

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

Answer 1

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

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

在根文件夹中创建一个名为 "sourceMaps" 的文件夹
向您的 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 脚本完成所有工作

现在使用以下代码在您的根文件夹中创建一个名为 "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 提交作为版本（以便 rollbar 可以了解它需要哪个源映射版本

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

c) 向 rollbar 发出 curl 请求 api

你需要做的最后一件事是在代码中设置 rollbar 代码版本，你可能会注意到我传递了一个名为 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,
      }
    }
  }
}

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

How to upload source maps to Rollbar.js from create-react-app without hosting them publicly?

create-react-app

rollbar