Real User Monitoring

10 minutes

アプリケーションにReal User Monitoring (RUM) インストルメンテーションを有効にするには、コードベースにOpen Telemetry Javascript https://github.com/signalfx/splunk-otel-js-web スニペットを追加する必要があります。

Spring PetClinicアプリケーションは、アプリケーションのすべてのビューで再利用される単一の index HTMLページを使用しています。これは、Splunk RUMインストルメンテーションライブラリを挿入するのに最適な場所です。すべてのページで自動的に読み込まれるためです。

api-gateway サービスはすでにインストルメンテーションを実行しており、RUMトレースをSplunk Observability Cloudに送信しています。次のセクションでデータを確認します。

スニペットを確認したい場合は、ブラウザでページを右クリックして View Page Source を選択することで、ページソースを表示できます。

    <script src="/env.js"></script>
    <script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
    <script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
    <script>
        var realm = env.RUM_REALM;
        console.log('Realm:', realm);
        var auth = env.RUM_AUTH;
        var appName = env.RUM_APP_NAME;
        var environmentName = env.RUM_ENVIRONMENT
        if (realm && auth) {
            SplunkRum.init({
                realm: realm,
                rumAccessToken: auth,
                applicationName: appName,
                deploymentEnvironment: environmentName,
                version: '1.0.0',
            });

            SplunkSessionRecorder.init({
                applicationName: appName,
                realm: realm,
                rumAccessToken: auth,
                  recorder: "splunk",
                  features: {
                    video: true,
                }
            });
            const Provider = SplunkRum.provider;
            var tracer=Provider.getTracer('appModuleLoader');
        } else {
        // Realm or auth is empty, provide default values or skip initialization
        console.log("Realm or auth is empty. Skipping Splunk Rum initialization.");
        }
    </script>
     <!-- Section added for  RUM -->

Select the RUM view for the Petclinic App

左側のメニューで RUM をクリックして、RUMの簡単な概要ツアーを始めましょう。次に、Environment フィルター (1) をドロップダウンボックスから変更し、ワークショップインスタンスの名前 <INSTANCE>-workshop (1) を選択します (ここで INSTANCE は、以前に実行したシェルスクリプトの値です)。これのみが選択されていることを確認してください。

次に、App (2) ドロップダウンボックスをアプリの名前に変更します。これは <INSTANCE>-store になります。

Environment と App を選択すると、アプリケーションのRUMステータスを示す概要ページが表示されます。(Summary Dashboardが単一行の数値だけの場合は、縮小表示になっています。アプリケーション名の前にある > (1) をクリックして展開できます)。JavaScriptエラーが発生した場合は、以下のように表示されます:

続けるには、青いリンク (ワークショップ名) をクリックして詳細ページに移動します。これにより、UX Metrics、Front-end Health、Back-end Health、Custom Eventsによるインタラクションの内訳が表示され、過去のメトリクス (デフォルトでは1時間) と比較される新しいダッシュボードビューが表示されます。

通常、最初のチャートには1つの線のみがあります。Petclinicショップに関連するリンクをクリックしてください。この例では http://198.19.249.202:81 です:

これにより、Tag Spotlightページに移動します。

RUM trace Waterfall view & linking to APM

TAG Spotlightビューでは、RUMデータに関連付けられたすべてのタグが表示されます。タグは、データを識別するために使用されるキーバリューペアです。この場合、タグはOpenTelemetryインストルメンテーションによって自動的に生成されます。タグは、データをフィルタリングし、チャートやテーブルを作成するために使用されます。Tag Spotlightビューでは、動作の傾向を検出し、ユーザーセッションにドリルダウンできます。

User Sessions (1) をクリックすると、タイムウィンドウ中に発生したユーザーセッションのリストが表示されます。

セッションの1つを見たいので、Duration (2) をクリックして期間でソートし、長いものの1つのリンク (3) をクリックしてください:

RUM trace Waterfall view & linking to APM

RUMトレースウォーターフォールを見ています。これは、ユーザーがpetclinicアプリケーションのページにアクセスしたときに、ユーザーデバイス上で何が起こったかを示します。

ウォーターフォールを下にスクロールして、右側の #!/owners/details セグメント (1) を見つけてクリックすると、Vetsリクエストの処理中に発生したアクションのリストが表示されます。HTTPリクエストには、リターンコードの前に青い APM リンクがあることに注意してください。1つを選択し、APMリンクをクリックします。これにより、KubernetesでホストされているこのバックエンドサービスコールのAPM情報が表示されます。

リクエストで何が起こったかを確認するためにドリルダウンしたい場合は、Trace IDのURLをクリックしてください。

これにより、RUMからのリクエストに関連するトレースが表示されます:

サービスへのエントリーポイントに RUM (1) 関連コンテンツリンクが追加されており、バックエンドサービスで何が起こったかを確認した後、RUMセッションに戻ることができるようになっていることがわかります。

Real User Monitoring

8. Real User Monitoringのサブセクション

Select the RUM view for the Petclinic App

RUM trace Waterfall view & linking to APM

RUM trace Waterfall view & linking to APM