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

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

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

問題を作成する

サードパーティのJSエラーによるスタックトレースの欠落

問題

JavaScript (JS) のエラーイベントは、 ブラウザモニタリング JS エラーページ にまとめられています。デフォルトでは、エラー メッセージごとにグループ化されています。単一のエラー イベントを選択すると、その エラー インスタンス リストに詳細が表示されます。場合によっては、1 つまたは複数のインスタンスにスタック トレースがないこともあります。

ヒント

代わりに、" This error is likely to come from the 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を実装するための一般的な方法を説明します。

  1. アプリにJavaScriptを提供しているサードパーティのアセットのレスポンスヘッダーに、 Access-Control-Allow-Origin コードを追加します。

    Access-Control-Allow-Origin: YOUR_DOMAIN

    ドメインまたは複数のドメインを設定することで、特定のドメインがエラートレースの詳細やその他の利用可能なリソースにアクセスできるようになります。このMDNの記事には、複数のドメインを追加したり、ドメインの代わりにワイルドカードを使用したりするなど、 レスポンスヘッダーの設定 に関する有用な情報が含まれています。

  2. アプリケーションでは、CORS crossorigin 属性を使用して、ブラウザにJavaScriptファイルを読み込ませます。

    <script src="EXTERNAL_LOCATION/script.js" crossorigin> </script>

    このMDNの記事には、 CORS設定の属性 に関する有用な情報が含まれている可能性があります。

原因

スタックトレースが見つからない問題の最も一般的な原因は、same-originポリシーです。これは、あるウェブリソースが別のリソースのデータにアクセスする際に、両者のオリジンが同じでないとアクセスできないようにするセキュリティポリシーです。この文脈では、 オリジン は、URI スキーム、ホスト名、ポート番号の組み合わせです。このポリシーにより、悪意のあるコードが他のウェブリソースにアクセスすることを防ぎます。

同一起源ポリシーは、インターネットのセキュリティにとって重要ですが、ウェブリソースの連携が難しくなる場合があります。具体的には、コンテンツデリバリーネットワーク (CDN) などの外部でホストされている JS スクリプトがある場合に問題が発生します。New Relic はそれらのスクリプトから発生するエラーを確認することはできますが、そのデータにアクセスすることはできません。

Copyright © 2022 New Relic Inc.