Sentry：从文件夹树上传 sourcemaps

Question

我正在使用 NextJs/ReactJs（使用 Typescript）应用程序，我正在尝试将源地图上传到 Sentry artefacts。

此应用程序的构建未捆绑到单个文件。相反，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/index.js 文件应该是 ~/_next/static/buildId/，/.next/static/buildId/customer/[customerId]/details.js 文件应该是 ~/_next/static/buildId/customer/[customerId]/。

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

有没有什么方法可以使 .js 文件与其 .map 文件正确关联，从而上传此树结构？

RewriteFrames 是这个用例的一个选项吗？

Answer 1

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

解法：

我决定遍历我想上传的所有文件，然后一个一个地上传它们（.js 和 .map 文件）并设置它们各自的“--url-前缀” .

所以，对于每对 .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 上检查了该问题的详细信息。然后我能够看到错误的整个堆栈跟踪，并且可以看到 original/unminified 代码。

旁注：

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

Sentry：从文件夹树上传 sourcemaps

Sentry: Upload sourcemaps from folder tree

javascript

sentry

typescript

next.js

解法：

结果：

旁注：