Question

1）我有一个通过Create-react-app创建的应用

2）它没有弹出

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

4）我已将应用程序设置为与Rollbar.js配合使用，以在生产中进行错误跟踪

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

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

我已经读过Rollbar docs。我还看过了webpack plugin，如果不弹出它就很难使用。

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

Answer 1

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

这是我的第一个Mac外壳程序脚本，因此肯定不是完美的。我猜可能需要针对其他平台的使用情况进行调整，但这还是一个好的开始。

在根文件夹中创建一个名为“ 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 commit作为版本（以便rollbar可以了解其所需的源地图版本

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

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,
      }
    }
  }
}

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

1 个答案: