1

关于我们的应用程序的一些背景知识，我们一直在 docker 容器内运行我们的 Angular 前端，并有一个 shell 脚本负责设置环境变量并使用所需的配置构建前端容器。在构建前端时，我们还使用 RollBar 文档中描述的命令将缩小的文件上传到 Rollbar 服务器。因此，当我们在生产环境中运行我们的应用程序时，我们有以下命令将它们上传到 Rollbar 服务器。（注意 minified_url 包含我们应用程序的 HTTP 路径。

curl https://api.rollbar.com/api/1/sourcemap \
  -F access_token={$RollBar_Access_Token}\
  -F version=$GIT_CURRENT_REVISION\
  -F minified_url=https://example.com/$MINIFIED_JS \
  -F source_map=@dist/webapp/${MINIFIED_JS}.map;

但是现在为了复制本地开发环境中的行为，我们将 minified_url 更改为容器内的路径，如下所示，它指向容器内的缩小 JS 文件（注意 $MINIFIED_JS 是保存我们的名称的变量缩小的 Js 文件）

curl https://api.rollbar.com/api/1/sourcemap \
  -F access_token={$RollBar_Access_Token}\
  -F version=$GIT_CURRENT_REVISION\
  -F minified_url=///front/dist/webapp/$MINIFIED_JS \
  -F source_map=@dist/webapp/${MINIFIED_JS}.map;

尝试此操作后，我们成功地将 main.[hash].js 文件上传到 Rollbar 服务器，并认为它会正常工作，直到我们在进行上述更改后看到错误的堆栈跟踪。这是堆栈跟踪。正如我们所见，它无法将其解析为指向我们源代码的行，因此难以在本地开发环境中进行调试。 在此处输入图像描述 正如您在上图中看到的那样，它显示“源地图不适用于某些缩小文件”，这让我们意识到为什么它无法翻译。所以我们去检查了哪个文件上传失败，这是相同的截图 在此处输入图像描述 所以，经过多次尝试，我们想到了只是手动上传失败的文件，我们附加了它想要的源映射，我们将 URL 设置为 http://localhost/main.[hash].js 和适当的 GIT 版本的源代码。是的，事情开始正常工作，它能够将错误指向我们的源代码。现在，我们想知道是否有任何方法可以通过我们的 shell 脚本来完成，就像我们在生产中所做的那样，这样我们每次在本地环境中使用 RollBar 工作时都不必经历手动过程。任何帮助或线索表示赞赏。

文章引用
https://medium.com/angular-in-depth/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85 https://pusher.com/tutorials/error-handling-angular -part-4 https://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html

4

1 回答 1

1

因此，感谢 RollBar 支持团队，我们找到了问题的答案，他们为我们提供了成功将缩小错误转换为其源代码形式所需的确切 bash 代码，从而为我们提供了源代码中错误所在的确切行号已经发生了

我们的方法的问题是，我们在 docker 容器中提供了缩小文件的路径，RollBar 服务器甚至都没有看到，相反，Rollbar 总是在本地查找文件为 [ //localhost/$MINIFIED_JS] dev 环境这就是为什么您在上面的第二张图片中看到的原因， //localhost/main.[hash].js 是红色的，因为 RollBar 尝试下载该文件但找不到它，从而导致失败。但是一旦我们用 //localhost/$MINIFIED_JS 替换了我们的 minified_url 路径，Rollbar 就不再无法下载文件，因为我们已经向它提供了文件。这是我们放置的确切代码：

curl https://api.rollbar.com/api/1/sourcemap \
  -F access_token={$RollBar_Access_Token}\
  -F version=$GIT_CURRENT_REVISION\
  -F minified_url=//localhost/$MINIFIED_JS \
  -F source_map=@dist/webapp/${MINIFIED_JS}.map;

请记住：$MINIFIED_JS 是保存我们的缩小文件 main.[hash].js 的变量。对于您的情况，如果您知道缩小的文件名，则必须准确输入该名称。此外，我们将所有压缩文件合并到一个名为 main.[hash].js 的文件中。如果在您的情况下，如果您有多个缩小文件，那么您将必须上传每个文件。这是使用 bash 代码上传多个缩小文件的真棒 bash 代码（代码源：https ://michalzalecki.com/upload-source-maps-to-rollbar/ ）

#!/bin/sh

# Save a short git hash, must be run from a git
# repository (or a child directory)
version=$(git rev-parse --short HEAD)

# Use the post_server_time access token, you can
# find one in your project access token settings
post_server_item=$ROLLBAR_POST_SERVER_ITEM

echo "Uploading source maps for version $version!"

# We upload a source map for each resulting JavaScript
# file; the path depends on your build config
for path in $(find dist -name "*.js"); do
  # URL of the JavaScript file on the web server
  url=https://example.com/${path}

  # a path to a corresponding source map file
  source_map="@$path.map"

  echo "Uploading source map for $url"

  curl --silent --show-error https://api.rollbar.com/api/1/sourcemap \
    -F access_token=$post_server_item \
    -F version=$version \
    -F minified_url=$url \
    -F source_map=$source_map \
    > /dev/null
done
于 2020-07-01T18:17:28.683 回答