ソースマップをアップロードして、JSエラーを最小化しない

ブラウザ監視 は、ソースマップのアップロードに対応しています。

ソースマップのサポートは、主に"最小化された" JavaScript のデコードに役立ちます。最小化された JavaScript は、ブラウザの JS エラーページ において、ほとんど役に立たないエラーのスタックトレースとなります。ソースマップをアップロードすると、これらのエラーがコードラインへの有用な参照を含む理解可能なスタックトレースに変換されます。この機能は、バンドルまたはトランスパイルされた JavaScript コードにも有用です。

ブラウザには、ソースマップを使用するための2つのオプションが用意されています。

1. ブラウザのUIでソースマップをアップロード
2. APIによるソースマップのブラウザへの公開

このドキュメントでは、最初の方法である、UIを介してソースマップをアップロードする方法と、一般的な トラブルシューティングのヘルプ を説明します。API メソッドを使用する手順については、 API によるソースマップのプッシュ を参照してください。

New RelicのUIからソースマップをインポート

ソースマップファイルをブラウザの UI にドラッグ＆ドロップ、またはアップロードすることで、特定の JavaScript ファイルと関連付けることができます。New Relic は、最小化されたスタックトレースを最小化されていないトレースとソースコードに変換して、 JS エラーページ で表示します。

ソースマップをブラウザにドラッグインまたはアップロードするには、ソースマップがローカルマシンにある必要があります。

ソースマップとエラースタックトレースを関連付けるには、 JSのエラーページ:

1. one.newrelic.com > Browser> (select an app)> JS Errors にアクセスし、JSエラーグループを選択します。( Errors without a stack trace グループは選択しないでください）。

2. 選択したJSエラーグループから、エラーインスタンスの詳細タブ（ Summary タブの隣）を選択します。

3. エラーグループには、JavaScriptファイルを参照しているフレームが1つ以上リストアップされています。フレームの右端にある + アイコンを選択して、フレームを展開します。 代替オプション： フレームが展開されているときに、 find file を選択して、ファイルを手動でアップロードします。

   ヒント

   エラーフレームの左側にグレーの帯がついているものは、JSが圧縮されていることを示し、ブルーの帯がついているものは、ソースマップが適用されていることを示します。

その他のJSエラーフレームの特徴は以下の通りです。

トラブルシューティング

スタックトレースはそのままミニマイズ

New Relic にソースマップをアップロードしたにもかかわらず、スタックトレースが最小化されている場合は、いくつか確認すべき点があります。API を使用することは、潜在的な問題を調査するための最良の方法であり、 リストアップしたり、公開されたソースマップを削除したりすることができます 。

ソースマップが生成できない

ソースマップの生成がうまくいかない場合ビルドシステムには、ソースマップを生成するための独自の手順があります。より具体的な内容については、各ツールのドキュメントをご覧ください。以下は、2つの一般的なビルドシステムのソースマップ生成手順です。

uglifyjs [source files]   \ 
     -o bundle.min.js   \ 
     -c -m
     --source-map "includeSources=true"

uglifyjs [source files]   \ 
     -o bundle.min.js   \ 
     --source-map bundle.min.js.map   \ 
     --source-map-include-sources   \ 
     -c -m

devtool: 'source-map', 
output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
},