Question

我正在使用NextJs / ReactJs（带有Typescript）应用程序，并且正在尝试将源地图上传到Sentry制品中。

此应用程序的构建未捆绑到单个文件中。相反，dist / output文件夹反映了NextJs页面结构，在这种情况下，它具有类似于以下的树结构：

.next
|__ static
   |__ buildId
      |__ app.js
      |__ _app.js.map
      |__ index.js
      |__ index.js.map
      |__ customer
         |__ [customerId]
            |__ details.js
            |__ details.js.map
            |__ sub folder 1
            |__  sub folder 2

所有.js文件都引用一个.map文件。例如，在/.next/static/buildId/index.js中，最后一行是//# sourceMappingURL=index.js.map。

然后，我使用以下命令将源地图上传到Sentry：

docker exec -it wtr-admin_app_container yarn sentry-cli 
  --auth-token=${SENTRY_AUTH_TOKEN} releases
  --org=${SENTRY_ORGANIZATION}
  --project=${SENTRY_PROJECT} files ${VERSION} upload-sourcemaps "./src/.next/static/" 
  --url-prefix "~/_next/static/" 
  --no-rewrite

问题与--url-prefix有关，~/_next/static/buildId/文件应为/.next/static/buildId/index.js，~/_next/static/buildId/customer/[customerId]/文件应为/.next/static/buildId/customer/[customerId]/details.js。

因此，在同一url前缀下上传所有文件将无法正常工作。

是否可以通过某种方式将树结构上载到.js文件与其.map文件正确关联的方式？

RewriteFrames是该用例的一种选择吗？

Answer 1

我想出了一种解决方法，可以解决此问题，并能够将缩小的.js文件的整个树以及相关的源映射文件上传到Sentry。

解决方案：

我决定遍历要上传的所有文件，并逐个上传（.js和.map文件）并设置其各自的“ --url-prefix”。

因此，对于每对.js和.map文件，我都做了类似的事情：

sentry-cli --auth-token=${SENTRY_AUTH_TOKEN} releases --org=${SENTRY_ORGANIZATION} --project=${SENTRY_PROJECT} files ${RELEASE_ID} upload-sourcemaps /folder_1/folder_2/file.min.js /folder_1/folder_2/file.min.js.map --url-prefix '~/folder_1/folder_2'

结果：

上传它们之后，我在我的应用上生成了一个错误，并在Sentry上检查了该问题的详细信息。然后，我可以看到错误的整个堆栈跟踪，并可以看到原始/未压缩的代码。

旁注：

我在shell脚本文件中执行了此操作（遍历文件并上传）。

哨兵：从文件夹树上上传源地图

1 个答案:

解决方案：

结果：

旁注：