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