Source Maps — Debugging

Code production di-minify dan di-bundle — stack trace terlihat seperti a.b.c:1:4723. Source maps memetakan kode hasil build kembali ke source asli. Yang dipetak

Code production di-minify dan di-bundle — stack trace terlihat seperti a.b.c:1:4723. Source maps memetakan kode hasil build kembali ke source asli.

Yang dipetakan source map:

Bundled: app.min.js (1 line, 500KB)
   ↓
Original: src/components/Button.tsx line 42

Format .map file adalah JSON berisi VLQ-encoded mappings. Developer tidak perlu baca manual — browser/tool yang menggunakannya.

Konfigurasi di build tool:

// webpack.config.js
module.exports = {
  devtool: process.env.NODE_ENV === "production"
    ? "hidden-source-map"   // generate tapi tidak reference di file
    : "eval-source-map",    // dev: cepat + akurat
};

// Vite
export default {
  build: {
    sourcemap: true, // atau "hidden" atau "inline"
  },
};

Tipe source map umum:

Tipe	Ukuran	Kualitas	Untuk apa
`source-map`	Besar	Tinggi	Production dengan upload ke error tracker
`hidden-source-map`	Besar	Tinggi	Production tanpa expose ke user
`eval-source-map`	Cepat	Tinggi	Development
`inline-source-map`	Besar	Tinggi	Development kecil
`cheap-module-source-map`	Kecil	Line-level	CI, build cepat

Reference comment di bundle:

// app.min.js (baris terakhir)
//# sourceMappingURL=app.min.js.map

Browser DevTools baca comment ini dan download .map file otomatis.

Jangan expose source map ke public production!

Source map = kode asli dalam bentuk readable. Jika path /static/app.min.js.map publicly accessible, kompetitor/penyerang bisa baca source code kamu.

Solusi:

hidden-source-map + upload langsung ke Sentry/Datadog, jangan deploy file .map
Guard path /static/*.map dengan auth / IP whitelist
Deploy .map hanya untuk staging, bukan production

Upload source map ke error tracker:

# Sentry CLI
sentry-cli releases files $RELEASE upload-sourcemaps ./dist \
  --url-prefix "~/static/"

Setelah upload, error di Sentry ditampilkan dengan source code asli (bukan minified).

Debugging dengan source map di browser:

Buka DevTools → Sources tab
Lihat file .tsx / .jsx asli di tree (bukan bundle)
Set breakpoint seperti biasa → browser akan resolve ke posisi bundle yang tepat
Variable names bisa mismatch (minifier rename) — pakai scopes: true untuk name resolution

Masalah umum:

Stack trace masih minified — periksa .map file tersedia di Sources panel
Variabel nama tidak match — Chrome settings → "Map modern JS to original"
Source map terlalu besar — gunakan cheap-module-source-map untuk non-critical
Build slow — dev mode pakai eval-cheap-module-source-map

Testing source map:

// Tambahkan error disengaja di production build
setTimeout(() => { throw new Error("test sourcemap"); }, 1000);
// Lihat stack trace — apakah menunjuk ke file source asli?

Source map yang benar akan memunculkan src/App.tsx:42:15, bukan main.abc123.js:1:48291.