New Relicブラウザーモニタリングをよくご存知の方なら、シングルページアプリケーション（SPA）モニタリングを使ってシングルページアプリとの実際のユーザーインタラクションをより深く可視化し、そこからインサイトを得ているのではないでしょうか。SPA対応のブラウザモニタリングエージェントを使用してシングルページアプリのセットアップを完了後、すぐにアプリからすべてのメトリクスとトレースを取得したいと思われるかもしれません。待ってください！まだ、その時点では分散トレーシングが機能していません！
エージェントを確認すると、分散トレーシングがデフォルトで有効になっているかと思いますが、その状態では分散トレースの詳細を把握することができません。バックエンドサービスにエージェントがないことが原因なのでしょうか。または、バックエンドサービスがウェブサービスとは別にデプロイされていることが原因でしょうか。おそらく、原因は両方です。どうしたら良いでしょうか。
このブログをお読みいただくと、SPAモニタリングをご理解いただけます。分散トレーシングを活用して、ユーザーが経験していることを理解し、問題を迅速に修正し、顧客満足につなげることができます。
サンプルシナリオ
このシナリオでは、フルスタックのJavaScriptアプリケーションを使用することを想定しています。フロントエンド（React、Angular、またはVueなどを使用している場合）が、静的な（Netlify、Amazon S3、Render、またはGitHub Pagesなどの）ウェブホスト上にホスティングされているとしましょう。バックエンドウェブサービスは、Amazon Elastic Compute Cloud、Amazon Elastic Block Store、あるいはGoogle Engine Compute EngineまたはGoogle App Engineを使用したGoogle Cloud Platform上でホスティングすることができます。
フロントエンドブラウザの名称はwww.spa-app.awesome.comです。
バックエンドブラウザの名称はwww.robust-webservice.awesome.comです。
SPAエージェントとNode.js APMエージェント向けにNew Relicを設定する
SPAおよびNode.jsという2つのアプリケーションパフォーマンスモニタリング（APM）向けにNew Relicを設定します。これは、以下のNew Relicエージェントを使用してアプリケーションを構成することを意味します。
- SPA向けのブラウザモニタリングエージェント
- （オプション）バックエンドサービスのAPMエージェント。この例では、Expressアプリ（Node.jsウェブアプリケーションフレームワーク）に対応したNode.jsエージェントです。
ここでの問題点
以下のスクリーンショットが示しているように、[ブラウザ] > [設定] > [アプリケーション設定] で設定を構成すると、デフォルトのブラウザエージェント構成Pro+SPAが表示され、分散トレーシングをオンに設定することができます。
ただし、前述のアプリケーションホスティングモデルの場合、この設定ではトレースは表示されません。
問題を解決するために3つの対策方法を試みる
問題を解決するために試みる3つの対策方法を説明します。シナリオの例のセクションで説明したアプリケーションモデルを使用していると仮定しましょう。
ネタバレ注意：このブログ投稿のサンプルシナリオで示すように、うまく機能するのは3つ目の対策方法です。
方法その1：CORSを有効化する
フロントエンドアプリとバックエンドサービスが異なるサブドメイン、またはホストでホスティングされている場合、ブラウザエージェントのためにクロスオリジンリソース共有（CORSとも呼ばれています）を有効化することができます。もう一度[ブラウザ] > [設定] > [アプリケーション設定]を選択してください。このスクリーンショットが示しているように、バックエンドのサービスまたはAPIのベースURLを入力します。
ただし、CORSを有効化した結果はまだ役に立っていません。ここでは分散トレースが見当たりません。
方法その2：New Relicヘッダーを使用してCORSを有効化する
再度、試してみましょう。もう一度[ブラウザ] > [設定] > [アプリケーション設定]に戻ってください。
今度は、クロスオリジンリソース共有（CORS）の下にオリジンを追加します。以下のスクリーンショットのように、Use newrelic header(newrelicヘッダーを使用する)とUse trace context headers（トレースコンテキストヘッダーを使用する）を選択します。
オリジンを追加したら、クロスオリジンAJAX呼び出しのための分散トレースが表示されるでしょうか？
結果は？やはりトレースは表示されていません！
方法その3：CORSヘッダーを受け入れる
前のスクリーンショットをもう一度ご覧ください。[ブラウザ] > [設定] > [アプリケーション設定]を選択している場合、New RelicカスタムヘッダーまたはWC3トレースコンテキストヘッダーが受け入れられないと、クロスオリジンリソース共有（CORS）セクションにAJAXリクエストが失敗する可能性があるという警告が表示されているのに気づくでしょう。
フロントエンドアプリからのAJAXリクエストにエラーがないと、このメッセージを見落とすか無視してしまうかもしれません。
しかし、これが答えです！
フロントエンドアプリケーションからのAJAX/API呼び出しへの応答の一環として、これらのヘッダーを受け入れて戻す必要があります。
この例では、ヘッダーを許可するようにします。
ようやくトレースが表示されました。この例では、angular12-spaとangular12-nodeServiceという2つのエンティティを見ることができます。これが、ブラウザアプリからバックエンドサービスへの分散トレースです。
Next steps
シングルページアプリケーション（SPA）モニタリングのために分散トレーシングを機能させる方法と、顧客がアプリケーションをどのように使用しているかをより深く理解する方法がご理解いただけたかと思います。
New Relicを使用して、ブラウザモニタリングと分散トレーシングで色々試してみてください。
- 様々なブラウザモニタリング機能で、アプリケーションのパフォーマンスをモニタする方法を探索しましょう
- ブラウザベースのアプリケーションの可用性をモニターするには、Syntheticモニタリングを開始します
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.
