Upload source maps during prod build (#2523)

* Upload source maps during prod build

* Remove commented out code

* conditional logic for service string

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

* Make path prefex generic

* Add additional logic checks to prevent upload script from running in dev or when VERCEL_ENV is undefined

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

next.config.js

@@ -54,6 +54,11 @@ module.exports = withHashicorp({
 	],
 	webpack(config) {
 		config.plugins.push(HashiConfigPlugin())
+
+		if (process.env.VERCEL_ENV && process.env.VERCEL_ENV !== 'development') {
+			config.devtool = 'source-map'
+		}
+
 		return config
 	},
 	async headers() {

package.json

@@ -14,7 +14,7 @@
 		"prestart": "hc-tools ./scripts/generate-tutorial-variant-map.ts && hc-tools ./scripts/extract-hvd-content.ts",
 		"prettier:check": "prettier --check .",
 		"prettier:write": "prettier --write .",
-		"postbuild": "hc-tools ./scripts/capture-build-metrics.ts dev-portal && next-sitemap",
+		"postbuild": "hc-tools ./scripts/capture-build-metrics.ts dev-portal && next-sitemap && hc-tools ./scripts/upload-source-maps.ts",
 		"rewrite-docs-content-links": "hc-tools ./scripts/docs-content-link-rewrites/rewrite-links.ts",
 		"sitemap": "next-sitemap",
 		"start:local-preview": "./scripts/content-repo-preview/start.sh",

scripts/upload-source-maps.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import { execSync } from 'child_process'
+
+/**
+ * Uploads source maps to Datadog and then deletes source maps to prevent bundle size increase and leaking of source code.
+ */
+const main = () => {
+	if (
+		typeof process.env.VERCEL_ENV === 'undefined' ||
+		process.env.VERCEL_ENV === 'development'
+	) {
+		return
+	}
+
+	const LATEST_SHA = process.env.VERCEL_GIT_COMMIT_SHA
+	const PATH_PREFIX =
+		process.env.VERCEL_ENV === 'production'
+			? 'https://developer.hashicorp.com/_next/static/'
+			: `https://${process.env.VERCEL_BRANCH_URL}/_next/static/`
+	const SERVICE =
+		process.env.VERCEL_ENV === 'production'
+			? 'developer.hashicorp.com'
+			: 'non-prod.developer.hashicorp.com'
+
+	const DATADOG_API_KEY = process.env.DD_API_KEY
+
+	try {
+		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} --disable-git`,
+			{ stdio: 'inherit' }
+		)
+
+		console.log('Source maps uploaded successfully')
+	} catch (error) {
+		console.error(error)
+
+		console.log('Failed to upload sourcemaps')
+	}
+
+	// delete sourcemaps
+	try {
+		execSync(`rm -f .next/static/**/*.js.map`)
+	} catch (error) {
+		console.error(error)
+
+		console.log('Failed to delete sourcemaps')
+	}
+}
+
+main()

src/views/homepage/index.tsx

@@ -4,7 +4,7 @@
  */
 
 // Third-party imports
-import { ReactElement } from 'react'
+import { ReactElement, useEffect } from 'react'
 
 // Global imports
 import BaseLayout from 'layouts/base-layout'
@@ -20,6 +20,13 @@ import {
 import s from './homepage.module.css'
 
 function HomePageView(): ReactElement {
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			throw new Error('This is a new test error thrown after 3 seconds')
+		}, 3000)
+
+		return () => clearTimeout(timer) // Cleanup the timer on component unmount
+	}, [])
 	return (
 		<BaseLayout mobileMenuSlot={<MobileMenuLevelsGeneric />}>
 			<div className={s.root}>

tsconfig.json

@@ -6,6 +6,7 @@
 		"module": "esnext",
 		"lib": ["dom", "dom.iterable", "esnext"],
 		"jsx": "preserve",
+		"sourceMap": true,
 		"allowJs": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,