Search code examples
javascripttypescriptnext.jssentry

Sentry: Upload sourcemaps from folder tree


I'm working with a NextJs/ReactJs (with Typescript) application and I'm trying to upload the sourcemaps to Sentry artefacts.

The build from this app is not bundled to a single file. Instead, the dist/output folder reflects the NextJs pages structure, which in this case has a tree structure similar to this:

.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

All the .js files reference a .map file. For example, in /.next/static/buildId/index.js, the last line is //# sourceMappingURL=index.js.map.

Then, I'm uploading sourcemaps to Sentry with the following command:

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

The problem is about that --url-prefix, which should be ~/_next/static/buildId/ for /.next/static/buildId/index.js file but should be ~/_next/static/buildId/customer/[customerId]/ for /.next/static/buildId/customer/[customerId]/details.js file.

So, uploading all files under the same url-prefix won't work properly.


Is there any way of uploading this tree structure in a way where the .js files are correctly associated with its .map files?

Is RewriteFrames an option for this use case?



Solution

  • I came up with a workaround which allowed me to solve this and be able to upload to Sentry the entire tree of my minified .js files along with the associated source map files.

    Solution:

    I've decided to iterate through all files that I wanted to upload and, one by one, upload them (.js and .map file) and setting their individual "--url-prefix".

    So, for each pair of .js and .map files i did something similar with this:

    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'
    

    Result:

    After uploading them, I've generated an error on my app and checked the details of that issue on Sentry. Then I was able to see the whole stack trace of the error and could see the original/unminified code.

    Side note:

    I did this (iterate through files and upload them) in a shell script file.