概要

Angular SPAのフロントエンドと、バックエンドのサーバアプリケーションがあって、これを開発していると想定します。

f:id:tsgkdt:20191006215930p:plain

だいたい、npm startなどとして実行していると、ポート4200番でフロントエンドは動き、
サーバサイドは、dotnet runとすれば5100あたり、VisualStudioからデバッグ実行すれば、40000番代だかそのあたりのポートで起動しているかと思います。

それぞれにElastic APMを仕込むとして、フロントエンド側からバックエンドまで一気通貫に見て分析したい、というのが人情です。今回はこうした環境でそれを行うための手順メモです。

なぜこれをやろうと思ったか

一個前の記事で、RUMと.NETAgentを仕込んでAPMの画面から確認する、というのをやりました。
しかし、このときの設定では、AngularのSPAのトランザクション、サーバサイドのトランザクションと分けて出力されていて、一気通貫に見られるようにはなっていませんでした。

Elastic APM 7.4.0リリース記念 Angular SPAと.NETCoreアプリにAPMを仕込む - 今日もショートドリップをマグで。

「分散トレーシングできるので、出来るはず」と勉強会で聞いたので試してみようとしたのです。

実現すること

下の絵を見てください。ServicesのところにAngular-appとserver-appと2種類表示されています。

f:id:tsgkdt:20191006220312p:plain

フロントエンド側のAngularでは、HTTPリクエストの時間が、呼び出されたサーバ側では、そのコントローラ以降の処理がタイムラインとして表示されています。

こうした画面を出すには、どうすればいいのかを提示するのが今回の目的です。

ドキュメントの確認

まず公式ドキュメント、原典にあたるのは基本動作ですので、これをまず行います。

www.elastic.co

このリンク先にある分散トレースの例としてあげられている画像では、既に実現することで確認したような内容になっています。が、AngularのSPA用の記事の中身をコピペしただけでは、こうなりません。（Angular integration | APM Real User Monitoring JavaScript Agent Reference [4.x] | Elastic）

その答えは、こちらのドキュメントにありました。

www.elastic.co

Distributed tracing is enabled by default in the RUM agent, however, it only includes requests made to the same origin. In order to include cross-origin requests you must set the distributedTracingOrigins configuration option.

RUMエージェントでは、デフォルトで分散トレースができますよ！でも、Same Originのリクエストに限られるよ！！！！！違うところへのリクエストも含めたいなら、指定してね！

開発環境などで、フロントエンドとサーバサイド側のポートが違う場合も、この例に該当することになります。

distributedTracingOriginsを指定してやることにしましょう。

app.module.tsへの追加

今回手元の.NETCoreのサーバアプリケーションは、44394ポートでデバッグ実行されるようになっていたので、これを追加するようにします。

export class AppModule {
  constructor(service: ApmService) {
    // API is exposed through this apm instance
    const apm = service.init({
      serviceName: 'angular-app',
      serverUrl: 'http://localhost:8200',
      distributedTracingOrigins: ['https://localhost:44394']   // ←これ
    })

    apm.setUserContext({
      'username': 'foo',
      'id': 'bar'
    })
  }
 }

もちろんArrayになっているので、複数の場所を指し示す必要があるときは、必要に応じてdistributedTracingOriginsに追加するのが良いでしょう。

この1行を足すことで、先に示していたようなSPAの画面とサーバサイドの画面のトランザクションが１つのタイムラインで表示させることができるようになりました。パチパチパチ。