Source Maps Explained for Non-DevOps Founders

The minification problem

When you build your JavaScript for production, it gets minified: variable names become a, b, c, whitespace is removed, files are combined. This is great for performance. It makes debugging impossible — stack traces point to line 1, column 54382.

What source maps do

Source maps are files that map positions in minified code back to positions in your original source. With source maps, a stack trace that says "bundle.js:1:54382" becomes "src/components/Checkout.jsx:47: const total = items.reduce(…)".

Generating source maps in Vite

// vite.config.js
export default {
  build: {
    sourcemap: true // generates .map files
  }
}

Generating source maps in Next.js

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true
}

Do I upload them or keep them private?

You have two options: (1) make them public (accessible at the same URL as the JS file + .map) — easier but exposes your source code; (2) upload to your error monitoring service and keep them private — best for proprietary code. ProdFix supports private source map upload.

Without source maps

Without source maps, every stack trace in your error monitoring points to meaningless minified code. This makes debugging 10x harder. Set up source maps before you ship your first feature.