• ログイン無料アカウント

本書は、お客様のご参考のために原文の英語版を機械翻訳したものです。

英語版と齟齬がある場合、英語版の定めが優先するものとします。より詳しい情報については、本リンクをご参照ください。

問題を作成する

ソースマップをアップロードして、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エラーフレームの特徴は以下の通りです。

以下を行う場合...

操作...

周辺コードの詳細を見る

Show 10 more lines above/below を選択すると、スタックトレース内のコードの前または後のコードが表示されます。

オリジナル、ミニマイズされたファイル情報を見る

  • 個々のフレーム情報についてフレームのソースラインとカラムの横にある、

    の省略記号にマウスオーバーします。

  • スタックトレース全体の生データの場合。エラータブの上部で、 < /> Raw を選択します。

ソースマップの削除

展開されたスタックトレースフレームから、 Remove file を選択します。

トラブルシューティング

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

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

典型的な問題点

トラブルシューティングのヒント

URLの不一致

スタックトレースの各フレームは、特定のJavaScriptのURLに関連付けられています。このURLは、ソースマップの公開時に使用されたJavaScriptのURLと一致する必要があります。これらのURLが正確に一致するようにしてください。

browser-source-map-ui-ss.png

リリース名とIDの不一致

フロントエンドのアセットをデプロイする際に、JavaScriptのURLがバージョン管理されていない場合は、 newrelic.addRelease APIメソッド を使用して、また、ソースマップを公開する際に、リリース名とリリースIDを指定する必要があります。これらの文字列が正確に一致するようにしてください。

browser release id ss.png

409 error: javascriptUrl, releaseName, releaseId の組み合わせは一意でなければなりません。

特定のJavaScript URLのソースマップファイルが、リリース名やIDを指定せずにアップロードされた場合、New RelicはURLを一意の識別子として扱います。

この問題を解決するには、リリース名とIDの値がNULLであるソースマップを削除し、これらのパラメータを含むそのURLのすべてのバージョンを再アップロードします。これにより、特定のJS URLに対して複数のバージョンのソースマップを使用できるようになります。

Missing SourcesContent component

New Relic がスタックトレースをアンマイニングするためには、マッピングファイルに SourcesContent コンポーネントが含まれている必要があります。マップのアップロードに成功したにもかかわらず、簡略化されたコードが表示されない場合は、このコンポーネントのオリジナルのソースマップを確認してください。見つからない場合は、このコンポーネントが含まれるようにソースマップを再生成し、マップをNew Relicにアップロードしてください。

SourcesContent コンポーネントが追加されていない場合、 のようなエラーが表示されます。 Whoops, that was the wrong file.Please try again. のようなエラーが表示されます。

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

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

Copyright © 2022 New Relic Inc.