Upload source maps during prod build #2523

RubenSandwich · 2024-07-24T14:38:20Z

🔗 Relevant links

Preview link 🔎
Asana task 🎟️

🗒️ What

Include the creation and upload of sourcemaps in the postbuild step to unminify RUM errors
Source maps are created, uploaded to Datadog, then deleted.
Added logic checks so that this script does not run in development mode or when VERCEL_ENV is undefined (as it will be for anyone populating local env vars from Vercel)

🤷 Why

Unminified errors will allow us to quickly debug user issues.

🛠️ How

Considered adding rewrite to next.config.js as well as middleware; however, the middleware config matcher already targets _next and static.
Adding a rewrite to next.config would mean our bundle size increases

🧪 Testing

I added an error here. It will allow the build to complete without issue, but will trigger a RUM error so we can test that the error has unminified code.

Visit this page
Open the console. You should see this error in the console

3. View the unminified error [here](https://app.datadoghq.com/rum/[email protected]:[email protected]:user+service:non-prod.developer.hashicorp.com+version:0db18a6c2a43cd79ee85fc472d7808c976311947)

Additional testing to confirm there are no sourcemaps

Visit this page
Add .map to the end of the filename or visit https://dev-portal-git-rn-featbuild-source-maps-during-deploy-hashicorp.vercel.app/_next/static/chunks/3652-2ac327b032073ad3.js.map?dpl=dpl_BRMFdS4zMDHxDYVjSL4QXgtb7dbX
You should see the 404 page

vercel · 2024-07-24T14:38:24Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2024 9:16pm

github-actions · 2024-07-24T14:41:00Z

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

zchsh

🙌 This looks great so far!

🤔 Main feedback is whether we should use the non-prod.developer.hashicorp.com service in DataDog for non-prod source maps. I think this might be necessary since it's already set up in our config files!

🧪 I'm not as familiar with DataDog, so with the empty PR description I had to poke around a bit to try to test things! Given that in the Vercel logs, line 748 we see this version identifier:

I think we would expect to see source maps uploaded on the developer.hashicorp.com service with version 70fb5226724a8cca166384645f88e26d950e3f26... I couldn't find a version 70fb5226724a8cca166384645f88e26d950e3f26 in that service, but I could find it fornon-prod.developer.hashicorp.com, although without source maps (as far as I can tell):

https://app.datadoghq.com/rum/performance-monitoring?query=%40session.type%3Auser%20%40application.id%3A40a2019f-88ad-4076-ab52-ffd074064eed%20version%3A70fb5226724a8cca166384645f88e26d950e3f26

That being said, I might be going about testing in a weird way here, very open to other approaches!

Thinking out loud, but could we (temporarily) intentionally throw an error on a specific page in this PR? I think then we could use that page to test both that we're uploading source maps (which seems to be confirmed by the Vercel logs in this PR), and that we're uploading them in a way where we can trace them back when an error happens.

scripts/upload-source-maps.ts

zchsh · 2024-07-25T15:20:58Z

scripts/upload-source-maps.ts

+
+	try {
+		const status = execSync(
+			`DATADOG_API_KEY=${DATADOG_API_KEY} npx @datadog/datadog-ci sourcemaps upload .next/static/ --service=${SERVICE} --release-version=${LATEST_SHA} --minified-path-prefix=${PATH_PREFIX}`


Noticed this error in the Vercel build logs:

It seems like "running datadog-ci within the git repo" should in theory be happening, but isn't working as expected 🤔 It seems like we can manually set the relevant info ourselves... but I am curious why the DataDog CLI doesn't seem to be finding any git remotes... maybe a Vercel thing? 🤷 I'm lost 😬

I think this is coming up it's trying to get metadata. From the DD docs.

If you run datadog-ci sourcemaps upload within a Git working directory, Datadog collects repository metadata.

More info here: https://github.com/DataDog/datadog-ci/tree/master/src/commands/sourcemaps#link-errors-with-your-source-code

Update: the error went away when I added the flag --disable-git on my test branch

Sweet, glad the error's gone! 🎉

In a perfect world, I think if we could resolve the issue without the --disable-git flag, then we might be able to link back to the source repo (screenshot from here):

Feels kinda unnecessary though... the setup you've done to get the above link working feels like it's the really valuable thing here 👍 Finding out how to get DataDog's git stuff to work feels like something we can tack on later as a very optional enhancement if we really want to 👍

zchsh · 2024-07-25T15:28:47Z

scripts/upload-source-maps.ts

+	// https://github.com/DataDog/datadog-ci/tree/79c0edce658c54001327e8bbb3f1030e8f4ccc93/src/commands/deployment
+	// https://app.datadoghq.com/source-code/setup/apm?env=preview&service=developer.hashicorp.com&version=
+	// try {
+	// 	const DD_GIT_COMMIT_SHA = process.env.DD_GIT_COMMIT_SHA
+	// 	const DD_GIT_REPOSITORY_URL = process.env.DD_GIT_REPOSITORY_URL
+
+	// 	const gitInfo = `--source-control-provider=git --source-control-repository-url=${DD_GIT_REPOSITORY_URL} --source-control-revision=${DD_GIT_COMMIT_SHA}`
+
+	// 	const deployStatus = execSync(
+	// 		`DATADOG_API_KEY=${DATADOG_API_KEY} npx @datadog/datadog-ci deployments create ${gitInfo} --service=${SERVICE} --env=${process.env.VERCEL_ENV}`
+	// 	)
+
+	// 	deployStatus
+	// 		.toString()
+	// 		.split('\n')
+	// 		.forEach((line) => {
+	// 			console.log(line)
+	// 		})
+
+	// 	console.log('Deployment created successfully')
+	// }


🧹 Seems like we can remove this commented code, unless it's here for testing!

EDIT: just looked at commit history, realized this might be related to the deployment existing in the non-prod service rather than prod 💭

scripts/upload-source-maps.ts

zchsh · 2024-07-25T15:33:22Z

scripts/upload-source-maps.ts

+	if (process.env.VERCEL_ENV === 'development') {
+		return
+	}


🧪 I feel like it could be good to have a way to confirm that the basics of source maps are working locally... maybe when VERCEL_ENV is development, we could take on the optional --dry-run parameter and leave everything else the same?

what do you mean by working locally? that we can test uploading them to datadog locally?

More just to see that datadog-ci picks up on the *.map files, and that they're removed after the script runs! I believe the --dry-run flag will mean source maps aren't uploaded. Definitely feels optional 👍

RubenSandwich · 2024-07-25T17:04:55Z

Handing off this PR to @heatlikeheatwave. As the original PR was more of a pair programming proof of concept to get DD source map working in prod. Heat has a few more things they are going to try. But we now have a working POC. 🎉

heatlikeheatwave · 2024-07-25T18:42:40Z

🙌 This looks great so far!

🤔 Main feedback is whether we should use the non-prod.developer.hashicorp.com service in DataDog for non-prod source maps. I think this might be necessary since it's already set up in our config files!

🧪 I'm not as familiar with DataDog, so with the empty PR description I had to poke around a bit to try to test things! Given that in the Vercel logs, line 748 we see this version identifier:

I think we would expect to see source maps uploaded on the developer.hashicorp.com service with version 70fb5226724a8cca166384645f88e26d950e3f26... I couldn't find a version 70fb5226724a8cca166384645f88e26d950e3f26 in that service, but I could find it fornon-prod.developer.hashicorp.com, although without source maps (as far as I can tell):

https://app.datadoghq.com/rum/performance-monitoring?query=%40session.type%3Auser%20%40application.id%3A40a2019f-88ad-4076-ab52-ffd074064eed%20version%3A70fb5226724a8cca166384645f88e26d950e3f26

That being said, I might be going about testing in a weird way here, very open to other approaches!

Thinking out loud, but could we (temporarily) intentionally throw an error on a specific page in this PR? I think then we could use that page to test both that we're uploading source maps (which seems to be confirmed by the Vercel logs in this PR), and that we're uploading them in a way where we can trace them back when an error happens.

@zchsh Tested out your idea (to throw intentional error in preview and track in non-prod service). You can see the unminified error here! 🎉

scripts/upload-source-maps.ts

Co-authored-by: Zach Shilton <[email protected]>

…dev or when VERCEL_ENV is undefined

zchsh

✅ Testing steps working as expected! Looks great 💯

vercel bot deployed to Preview July 24, 2024 14:47 View deployment

vercel bot deployed to Preview July 24, 2024 15:03 View deployment

vercel bot deployed to Preview July 24, 2024 15:23 View deployment

aaronvanderlip requested review from heatlikeheatwave and zchsh July 24, 2024 16:47

zchsh reviewed Jul 25, 2024

View reviewed changes

RubenSandwich assigned heatlikeheatwave Jul 25, 2024

RubenSandwich marked this pull request as draft July 25, 2024 17:05

heatlikeheatwave removed their request for review July 25, 2024 18:32

vercel bot deployed to Preview July 25, 2024 18:32 View deployment

vercel bot deployed to Preview July 25, 2024 18:46 View deployment

vercel bot deployed to Preview July 26, 2024 18:04 View deployment

vercel bot deployed to Preview July 26, 2024 18:13 View deployment

vercel bot deployed to Preview July 26, 2024 18:36 View deployment

heatlikeheatwave marked this pull request as ready for review July 26, 2024 18:45

heatlikeheatwave requested review from heatlikeheatwave and zchsh and removed request for heatlikeheatwave July 26, 2024 18:49

vercel bot deployed to Preview July 26, 2024 18:54 View deployment

heatlikeheatwave force-pushed the rn/feat/build-source-maps-during-deploy branch from 62ad731 to 0db18a6 Compare July 26, 2024 18:58

vercel bot deployed to Preview July 26, 2024 19:05 View deployment

zchsh reviewed Jul 26, 2024

View reviewed changes

scripts/upload-source-maps.ts Outdated Show resolved Hide resolved

scripts/upload-source-maps.ts Outdated Show resolved Hide resolved

scripts/upload-source-maps.ts Outdated Show resolved Hide resolved

zchsh mentioned this pull request Jul 26, 2024

[experiment] learning about source maps #2525

Closed

3 tasks

vercel bot temporarily deployed to Preview July 26, 2024 19:40 Inactive

vercel bot temporarily deployed to Preview July 26, 2024 19:43 Inactive

vercel bot temporarily deployed to Preview July 26, 2024 20:22 Inactive

heatlikeheatwave force-pushed the rn/feat/build-source-maps-during-deploy branch from 5ed8ce1 to f1bc827 Compare July 26, 2024 21:07

RubenSandwich and others added 5 commits July 26, 2024 17:07

Upload source maps during prod build

32c99d4

Remove commented out code

364fc8b

conditional logic for service string

c10dd2d

Co-authored-by: Zach Shilton <[email protected]>

Make path prefex generic

65a110b

Add additional logic checks to prevent upload script from running in …

9590a40

…dev or when VERCEL_ENV is undefined

heatlikeheatwave force-pushed the rn/feat/build-source-maps-during-deploy branch from f1bc827 to 9590a40 Compare July 26, 2024 21:07

heatlikeheatwave requested a review from zchsh July 26, 2024 21:12

vercel bot deployed to Preview July 26, 2024 21:16 View deployment

zchsh approved these changes Jul 29, 2024

View reviewed changes

heatlikeheatwave merged commit f50afe7 into main Jul 29, 2024
9 checks passed

heatlikeheatwave deleted the rn/feat/build-source-maps-during-deploy branch July 29, 2024 18:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upload source maps during prod build #2523

Upload source maps during prod build #2523

RubenSandwich commented Jul 24, 2024 •

edited by heatlikeheatwave

Loading

vercel bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

zchsh left a comment •

edited

Loading

zchsh Jul 25, 2024

heatlikeheatwave Jul 25, 2024 •

edited

Loading

heatlikeheatwave Jul 25, 2024

zchsh Jul 26, 2024

zchsh Jul 25, 2024 •

edited

Loading

zchsh Jul 25, 2024

heatlikeheatwave Jul 26, 2024

zchsh Jul 29, 2024

RubenSandwich commented Jul 25, 2024 •

edited

Loading

heatlikeheatwave commented Jul 25, 2024

zchsh left a comment

Upload source maps during prod build #2523

Upload source maps during prod build #2523

Conversation

RubenSandwich commented Jul 24, 2024 • edited by heatlikeheatwave Loading

🔗 Relevant links

🗒️ What

🤷 Why

🛠️ How

🧪 Testing

Additional testing to confirm there are no sourcemaps

vercel bot commented Jul 24, 2024 • edited Loading

github-actions bot commented Jul 24, 2024 • edited Loading

📦 Next.js Bundle Analysis

zchsh left a comment • edited Loading

Choose a reason for hiding this comment

zchsh Jul 25, 2024

Choose a reason for hiding this comment

heatlikeheatwave Jul 25, 2024 • edited Loading

Choose a reason for hiding this comment

heatlikeheatwave Jul 25, 2024

Choose a reason for hiding this comment

zchsh Jul 26, 2024

Choose a reason for hiding this comment

zchsh Jul 25, 2024 • edited Loading

Choose a reason for hiding this comment

zchsh Jul 25, 2024

Choose a reason for hiding this comment

heatlikeheatwave Jul 26, 2024

Choose a reason for hiding this comment

zchsh Jul 29, 2024

Choose a reason for hiding this comment

RubenSandwich commented Jul 25, 2024 • edited Loading

heatlikeheatwave commented Jul 25, 2024

zchsh left a comment

Choose a reason for hiding this comment

RubenSandwich commented Jul 24, 2024 •

edited by heatlikeheatwave

Loading

vercel bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

zchsh left a comment •

edited

Loading

heatlikeheatwave Jul 25, 2024 •

edited

Loading

zchsh Jul 25, 2024 •

edited

Loading

RubenSandwich commented Jul 25, 2024 •

edited

Loading