ソース マップのサポートは主に、縮小された JavaScript を「デコード」する場合に役立ちます。JavaScript を縮小すると、ブラウザーのErrors [エラー]ページにほとんど役に立たないエラー スタック トレースが表示されます。ソース マップをアップロードすると、これらのエラーが、コード行への有用な参照を含む、理解可能なスタック トレースに変換されます。この機能は、バンドルまたはトランスパイルされた JavaScript コードにも役立つ場合があります。
ブラウザには、ソースマップを使用するための2つのオプションが用意されています。
- ブラウザのUIでソースマップをアップロード
- APIによるソースマップのブラウザへの公開
このドキュメントでは、最初の方法である UI 経由でソース マップをアップロードする方法と、一般的なトラブルシューティング ヘルプについて説明します。API メソッドの使用手順については、 「API 経由でソース マップをプッシュする」を参照してください。
New RelicのUIからソースマップをインポート
ソース マップ ファイルをブラウザ UI にドラッグ アンド ドロップまたはアップロードして、特定の JavaScript ファイルに関連付けることができます。New Relic は、縮小されたスタック トレースを縮小されていないトレースとソース コードに変換し、[エラー] ページに表示されます。
- ソース マップをローカル マシンにダウンロードします。
- one.newrelic.com > All capabilities> Browser > (アプリを選択) > Errorsに移動し、エラー グループをクリックします。(Errors without a stack trace [スタック トレースのない Errors という]ラベルの付いたグループを選択しないでください。)
- Stack trace [スタック トレース]セクションで、 Upload source map [ソース マップのアップロード] をクリックします。
- ファイル ファインダーのポップアップで、ソース ファイルを選択します。左側に灰色の帯が付いたエラー フレームは、縮小された JS を示します。青いストリップは、ソース マップが適用されていることを示します。
その他のJSエラーフレームの特徴は以下の通りです。
あなたがしたい場合は... | これを行う... |
---|---|
周辺コードの詳細を見る |
|
オリジナル、ミニマイズされたファイル情報を見る |
|
ソースマップの削除 | 展開されたスタックトレースフレームから、 Remove file を選択します。 |
トラブルシューティング
スタックトレースはそのままミニマイズ
New Relic にソースマップをアップロードしたにもかかわらず、スタックトレースが最小化されている場合は、いくつか確認すべき点があります。API を使用することは、潜在的な問題を調査するための最良の方法であり、 リストアップしたり、公開されたソースマップを削除したりすることができます 。
典型的な問題点 | トラブルシューティングのヒント |
---|---|
URLの不一致 | スタックトレースの各フレームは、特定のJavaScriptのURLに関連付けられています。このURLは、ソースマップの公開時に使用されたJavaScriptのURLと一致する必要があります。これらのURLが正確に一致するようにしてください。 |
リリース名とIDの不一致 | フロントエンド アセットをデプロイするときに JavaScript URL がバージョン管理されていない場合は、 |
409 エラー: | 特定のJavaScript URLのソースマップファイルが、リリース名やIDを指定せずにアップロードされた場合、New RelicはURLを一意の識別子として扱います。 この問題を解決するには、リリース名とIDの値がNULLであるソースマップを削除し、これらのパラメータを含むそのURLのすべてのバージョンを再アップロードします。これにより、特定のJS URLに対して複数のバージョンのソースマップを使用できるようになります。 |
| マッピング ファイルには、New Relic がスタック トレースの縮小を解除するための
|
ソースマップが生成できない
ソースマップの生成がうまくいかない場合ビルドシステムには、ソースマップを生成するための独自の手順があります。より具体的な内容については、各ツールのドキュメントをご覧ください。以下は、2つの一般的なビルドシステムのソースマップ生成手順です。