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

ブラウザ監視はソースマップのアップロードをサポートしています。

ソースマップのサポートは、主に縮小された JavaScript を「デコード」するのに役立ちます。 縮小された JavaScript により、 browserの Errors ページでほとんど役に立たないエラー スタックトレースが発生します。 ソースマップをアップロードすると、これらのエラーが、コード行への便利な参照を含む、理解しやすいスタックトレースに変換されます。 この機能は、バンドルまたはトランスパイルされた JavaScript コードにも役立つ可能性があります。

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

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

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

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

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

1. ソース マップをローカル マシンにダウンロードします。

2. one.newrelic.com > All capabilities > Browser > (select an app) > Errors

   に移動し、エラー グループをクリックします。 (

   Errors without a stack trace

   というラベルの付いたグループは選択しないでください。)

3. Stack trace

   セクションで、

   Upload source map

   をクリックします。

4. ファイル ファインダーのポップアップで、ソース ファイルを選択します。左側に灰色の帯が付いたエラー フレームは、縮小された 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', 
},