問題
JavaScript (JS) エラー イベントは、 JS エラー ページ。デフォルトでは、エラー メッセージごとにグループ化されています。単一のエラー イベントを選択すると、そのError Instances [エラー インスタンス] リストに詳細が表示されます。場合によっては、1 つ以上のインスタンスにスタック トレースがない場合があります。
ヒント
代わりに、This error is likely coming from a third-party site and no stack trace is available [このエラーはサードパーティのサイトから来ている可能性があり、スタック トレースは利用できません]。というメッセージが表示されます。
解決
CORS(Cross-Origin Resource Sharing)を有効にすると、この問題が解消され、JSエラーの詳細がアプリケーションに公開され、エラーのスタックトレースがブラウザエージェントによってキャプチャされるようになります。
CORS の有効化と設定に関する情報を提供するオンライン リソースは数多くあります。この MDN の記事には、 CORS の詳細な説明があります 、 レスポンス ヘッダーの設定 、 CORS の設定属性 が含まれています。Enable CORS のウェブサイトには、 各種プラットフォームで CORS を有効にする方法が記載されています
New Relic は、第三者のウェブサイトの正確性について責任を負いません。
注意
本ドキュメントは、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設定の属性 に関する有用な情報が含まれている可能性があります。
原因
スタックトレースが見つからない問題の最も一般的な原因は、same-originポリシーです。これは、あるウェブリソースが別のリソースのデータにアクセスする際に、両者のオリジンが同じでないとアクセスできないようにするセキュリティポリシーです。この文脈では、 オリジン は、URI スキーム、ホスト名、ポート番号の組み合わせです。このポリシーにより、悪意のあるコードが他のウェブリソースにアクセスすることを防ぎます。
同一起源ポリシーは、インターネットのセキュリティにとって重要ですが、ウェブリソースの連携が難しくなる場合があります。具体的には、コンテンツデリバリーネットワーク (CDN) などの外部でホストされている JS スクリプトがある場合に問題が発生します。New Relic はそれらのスクリプトから発生するエラーを確認することはできますが、そのデータにアクセスすることはできません。