Upload Javascript SourceMaps to Datadog

[brunosalgueiro]

Hello, everyone!

We are using Datadog to monitor user browser sessions and detect any errors.

Everything is tracked as expected, but because files are minified, we'd like to analyze errors using sourcemaps.

We discovered datadog documentation on how to upload sourcemaps.
https://docs.datadoghq.com/real user monitoring/guide/upload-javascript-source-maps/?tab=webpackjs

We tried to override build configurations on Vercel to get sourcemaps.

next build && npx -y @datadog/datadog-ci sourcemaps upload /vercel/output/_next/static --service={our-service} --release-version={deploy-version} --disable-git --minified-path-prefix=https://fluencypass.com/_next/static

We believe that the output directory is being generated after the build, which is why datadog-ci sourcemaps cannot find any sourcemaps files.

Has anyone attempted something similar with datadog + nextjs?

[kopach]

I think the problem could be in .next folder. Which is served by next.js as _next instead of .next. Thus - source files are not found. Renaming this folder before source maps upload could be an option, I guess

[kopach]

pnpm install -DE @datadog/datadog-ci
and then

          pnpm datadog-ci sourcemaps upload ./<path-to-dist>/.next/ \
            --service=<service> \
            --release-version=<version> \
            --minified-path-prefix=/_next/ \
            --repository-url=<repo-url>

does the trick for me

[OnkelTem]

@kopach

Hi! Could you please clarify what are <repo-url> and <path-to-dist> sample values?

For example, I can't think of a non-empty the entire <path-to-dist> path because one runs this command in the project dir, so .next should reside in the project directory too, thus - not requiring any prefix, no?

[juanpin-humane]

What bothers me is that I have to do two builds or delete the source maps from the nextjs build if I don't want to leak my server side code.

[kopach]

yes, this is really important topic. Depending on your CI flow, you can also exclude source maps from being copied to destination place. E.g. when copying to docker container, you could try to copy everything but source maps. Or, if you use github actions, you could as 1 step upload artifacts with actions/upload-artifact with dist/ + !dist/**/*.map and then on next step actions/download-artifact won't have source maps.

[csandman]

Yeah that's kind of unavoidable when it comes to source maps in general though. All of the pre-made solutions for this process do the same. You can see where Sentry does it in their next config wrapper here: https://github.com/getsentry/sentry-javascript/blob/develop/packages/nextjs/src/config/webpackPluginOptions.ts#L83-L92

The only difference is that they have the solution all built-in, so you don't see it, but all they're doing is uploading the source maps after the build then deleting them from the .next folder.

I just added this script that I call in my process after uploading them to DataDog, using the rimraf package:

"remove-sourcemaps": "rimraf .next/static/**/*js.map",

[50bbx]

@csandman I added exactly that same script after uploading them to datadog, but for some reason some build files still remain in the next folder even if they match the glob pattern. For example chunks/pages/_app-614b85164bc48c42.js.

Did you ever encounter this issue?

[csandman]

My script is only meant to remove the .map files, not the actual build files. Why would you want to delete the build files?

[prescottprue]

The above mentioned command was working for us, but now with Next 16 using Turbopack for building we now see:

Failed upload sourcemap for [.next/static/chunks/ffd550aec983ea11.js.map]: Missing corresponding JS file for sourcemap (.next/static/chunks/ffd550aec983ea11.js)