javascript - 无法在本地环境中从RollBar的最小化格式转换Angular v9的JavaScript错误堆栈跟踪

Question

仅仅介绍一下我们的应用程序，我们已经在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 Server，并认为它可以正常工作，直到完成上述更改后我们看到错误的堆栈跟踪。这是堆栈跟踪。如我们所见，它无法将其解析为指向源代码的行，因此很难在本地开发环境中进行调试。

如您在上图中所看到的，它说 “源 map 对于某些缩小的文件不可用” ，这使我们意识到为什么它无法翻译。所以我们去检查了上传失败的文件，这是相同文件的屏幕截图

因此，经过多次尝试，我们想到了手动将失败的文件上载到我们想要的源映射的位置，然后将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

Answer 1

因此，感谢RollBar支持团队，我们找到了问题的答案，因为他们为我们提供了成功地将缩小的错误成功转换为源代码形式所需的确切bash代码，从而在错误的源代码中提供了确切的行号已经发生了
我们方法的问题在于，我们将路径提供给Docker容器中的缩小文件，而该路径甚至没有被RollBar服务器查看，相反，Rollbar始终在本地将文件查找为[//localhost/$ MINIFIED_JS]开发环境，这就是为什么您在//localhost/main.[hash].js上方的第二个图像中看到红色的原因，因为RollBar尝试下载该文件但找不到该文件，从而导致失败。但是，一旦我们用//localhost/$ MINIFIED_JS Rollbar替换了minified_url路径，就不再失败了，因为我们已经为其提供了文件。这是我们放入的确切代码:

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