ソースマップとは？ミニファイされたコードのデバッグ

ソースマップは、変換されミニファイされた出力内の位置を、元のソースの正確な行と列にマッピングする JSON ファイルです。

本番 JavaScript は、書いたものにほとんど似なくなるまでトランスパイル、バンドル、ミニファイされます。エラーが発火すると、スタックトレースはそのごちゃ混ぜになった出力を指し、デバッグには役立ちません。ソースマップは接続を復元し、ブラウザの dev tools や error tracker が実際のソースを表示できるようにします。マップをどこでどう生成しアップロードするかは CI の判断です。

ソースマップに含まれるもの

ソースマップは、元のファイル名、（オプションで）元のソース内容、そして各生成位置からそのソース位置へのマッピングのコンパクトなセットを含む JSON ドキュメントです。build ツールはそれを出力ファイルと並べて出力します。

ブラウザがそれをどう使うか

出力ファイルの末尾にあるコメントがマップを指します。dev tools が開いているとき、ブラウザはマップを取得し、実行中のコードがミニファイされていても、デバッガーとスタックトレースに元のソースを表示します。

プライバシーのトレードオフ

公開マップは、本番コードを読みやすく、リバースエンジニアリングしやすくする。
多くのチームは、公開配信する代わりにマップを error tracker にアップロードする。
hidden source map は、公開参照コメントなしでファイルを出力する。

ソースマップとエラートラッキング

Sentry のようなツールは、アップロードされたマップを使ってミニファイされたスタックトレースをシンボリケートします。pipeline はマップ付きで build し、それを error サービスにアップロードし、それからユーザーに配信せずに deploy するため、ソースを漏らすことなくトレースが読みやすいままになります。

CI/CD でのソースマップ

マップの生成は build 時間と出力サイズを増やすため、本番 build はしばしばそれらを別の artifact として出力し、アップロードしてから deploy から除外します。CI ステップは build commit に紐づいたマップをアップロードするので、エラーが正確なリリースにマッピングされます。

重要なポイント

ソースマップは、ミニファイされた出力を元のソースの位置にマッピングします。
公開マップはソースを露出させるため、多くのチームは代わりに error tracker にアップロードします。
CI は通常マップを生成し、リリースごとにアップロードし、それを deploy から除外します。