2

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

2）它没有被弹出

3) 我不想公开上传源图

4) 我已经设置应用程序与 Rollbar.js 一起使用，以便在生产中进行错误跟踪

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

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

我读过Rollbar 文档。我还看过 webpack插件，如果不弹出就很难使用。

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

4

1 回答 1

10

在花费数小时寻找示例或快速复制和粘贴解决方案后，我别无选择，只能自己编写。所以这就是我如何实现这一点，希望这可以帮助某人。

这是我的第一个 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 脚本

  1. 现在使用以下代码在根文件夹中创建一个名为“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 可以了解它需要哪个源映射版本

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

c) 向 rollbar api 发出 curl 请求

您需要做的最后一件事是在代码中设置 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,
      }
    }
  }
}
于 2019-06-21T11:44:09.770 回答