問題
JavaScript (JS) エラー イベントは、 JS エラー ページでコンパイルされます。 デフォルトでは、エラーメッセージごとにグループ化されます。 1 つのエラー イベントを選択すると、そのError Instancesリストに詳細が表示されます。 場合によっては、1 つ以上のインスタンスにスタックトレースが存在しないことがあります。
解決
まず、サイトでエラーを再現できるかどうかを確認し、再現できる場合は、エラーが発生する前に開いた開発コンソールまたは Web インスペクターにスタックトレースが表示されることを確認します。
CORS(Cross-Origin Resource Sharing)を有効にすると、この問題が解消され、JSエラーの詳細がアプリケーションに公開され、エラーのスタックトレースがブラウザエージェントによってキャプチャされるようになります。
CORS の有効化と設定に関する情報を提供するオンライン リソースは多数あります。 この MDN の記事には、 CORS の詳細な説明があり、応答ヘッダーの構成に関するセクションと、 CORS 設定属性に関するセクションがあります。 Enable CORS Web サイトには、さまざまなプラットフォームで CORS を有効にする方法に関する情報が掲載されています。\ New Relic is not responsible for the accuracy of third-party websites.
注意
本ドキュメントは、CORSの使用に関する一般的な紹介を目的としています。セキュリティ上の問題が発生する可能性があるため、アプリケーションやリソースのセキュリティに影響を与える変更を実装する前に調査することをお勧めします。最適なCORSの実装は、使用しているシステムや、セキュリティ上の考慮事項によって異なります。
ここでは、CORSを実装するための一般的な方法を説明します。
アプリに JavaScript を提供するサードパーティ アセットのレスポンス ヘッダーに
Access-Control-Allow-Origin
コードを追加します。Access-Control-Allow-Origin: YOUR_DOMAINドメインまたは複数のドメインを設定することで、特定のドメインがエラートレースの詳細やその他の利用可能なリソースにアクセスできるようになります。このMDNの記事には、複数のドメインを追加したり、ドメインの代わりにワイルドカードを使用したりするなど、 レスポンスヘッダーの設定 に関する有用な情報が含まれています。
アプリケーションで、CORS
crossorigin
属性を使用してブラウザーに JavaScript ファイルをロードさせます。<script src="EXTERNAL_LOCATION/script.js" crossorigin></script>このMDNの記事には、 CORS設定の属性 に関する有用な情報が含まれている可能性があります。
原因
スタックトレースが見つからない問題の最も一般的な原因は、同一オリジンポリシーです。 これは、両方の Web リソースが同じオリジンを持たない限り、1 つの Web リソースが別のリソースのデータにアクセスできないようにするセキュリティ ポリシーです。 このコンテキストでは、 origin URI スキーム、ホスト名、およびポート番号の組み合わせです。 このポリシーにより、悪意のあるコードが他の Web リソースにアクセスするのを防ぎます。
同一起源ポリシーは、インターネットのセキュリティにとって重要ですが、ウェブリソースの連携が難しくなる場合があります。具体的には、コンテンツデリバリーネットワーク (CDN) などの外部でホストされている JS スクリプトがある場合に問題が発生します。New Relic はそれらのスクリプトから発生するエラーを確認することはできますが、そのデータにアクセスすることはできません。