Amazon CloudWatch RUM で SAP Fiori のユーザエクスペリエンスを監視・最適化

はじめに

SAP Fiori は、SAP S/4HANA などの最新の SAP アプリケーションのユーザーインターフェースコンポーネントであり、ビジネスユーザーが SAP 内でビジネスに不可欠なプロセスを実行できるようにします。 SAPUI5 と呼ばれる SAP 独自の HTML5 実装をベースとし、クライアントとして HTTPs プロトコルとモダンなウェブブラウザに依存しています。 SAP Fiori を運用する上で、 SAP Fiori アプリケーションのあらゆる側面に対する監視機能を備えていることが重要です。

クライアント側では、「ユーザーにとってアプリケーションの読み込みは速いか」、「アプリケーションがエラーを投げていないか」、「ユーザーがアプリケーションのどの部分と最もやり取りしているか」などの質問に答えたいと思うかもしれません。 Amazon CloudWatch Real User Monitoring (RUM) は、実際のユーザーセッションから Web アプリケーションのパフォーマンスに関するクライアント側のデータをほぼリアルタイムで収集、表示するリアルユーザー監視ツールで、実際のユーザーが SAP Fiori などの Web アプリケーションとどのように対話し、体験するかを可視化することでこれらの質問に回答するのに役立つものです。これは、 SAP Fiori アプリケーションを簡単に監視し、最適化するために使用できる、 AWS が管理するリアルユーザー監視サービスです。

Amazon CloudWatch RUM とは？

Amazon CloudWatch RUM は、Amazon CloudWatch Synthetics と Amazon CloudWatch Evidently とともに CloudWatch のデジタルエクスペリエンスモニタリングの一部です。クライアントサイドのアプリケーション動作に関するほぼリアルタイムのデータを提供することで、 CloudWatch RUM はアプリケーション開発者と DevOps エンジニアがさまざまな潜在的問題を迅速に特定してデバッグし、平均解決時間（MTTR）を短縮してユーザーの SAP Fiori インスタンスの体験方法を改善できるよう支援します。
CloudWatch RUM は、 SAP Fiori が継続的にアプリケーションを監視し、問題を探索できるようにするための、多数の精選されたダッシュボードを提供します。これらのダッシュボードを使用して、ページロード時間やコアウェブバイタルなどのパフォーマンスメトリクス、 JavaScript や HTTP エラーなどのエラーメトリクス、ユーザーフローとドロップオフ、ボタンクリックなどのユーザーインタラクションを監視することができます。
問題を特定すると、 CloudWatch RUM は、影響を受けたユーザー・セッションの数を特定し、問題の優先順位付けを支援します。
問題を修正する必要がある場合、 CloudWatch RUM は、エラーメッセージ、スタックトレース、セッションレコードなどのデバッグデータを表示することにより、問題の診断を支援します。さらに、 CloudWatch RUM は、 CloudWatch ServiceLens と AWS X-Ray と統合することで、クライアントサイドからバックエンドのインフラノードまで、完全な分散トレースを取得することが可能です。

図1. SAP Fiori 、SAP Fiori ユーザー、CloudWatch RUM 、DevOps エンジニアの相関

Amazon CloudWatch RUM と SAP Fiori の連携

SAP Fiori インスタンスで CloudWatch RUM を使用するには、オープンソースの Amazon CloudWatch RUM web client で SAP Fiori インスタンスを部品化する必要があります。リリース1.5.0では、 CloudWatch RUM web client は SAP Fiori のようなシングルページアプリケーション（SPA）でのルート変更タイミングをサポートしています。この機能により、すべての Fiori Apps またはタイルのロード時間は、 CloudWatch RUM を通じてキャプチャされ、レポートされます。
SAP Fiori をご利用のお客様にとって、これらの質問は RUM が解決をお手伝いします。

パフォーマンス
- Fiori アプリと launchpad の読み込み速度はどの程度か？
- 問題は特定のユーザーの場所や国に関連してるか？
- Fiori Launchpad とタイルのパフォーマンスを向上させるにはどうしたらよいか？
トラブルシューティング
- エラーが発生する Fiori Apps は何か？
- これらのエラーは特定のブラウザーやデバイスで発生するか？
- どのエラーを優先的に修正する必要があるか？
動作
- ユーザーが Fiori で最も頻繁に行うワークフローは何ですか？
- Fiori にアクセスするために使用されているブラウザとデバイスは？
- 最も頻繁に使用されている10個の Fiori アプリは何か？
- Fiori ユーザーは特定できるか？

CloudWatch RUM を SAP Fiori に追加する方法は？

CloudWatch に移動し、”Application Monitoring “で、RUM を選択します。
“Add app Monitor “を選択し、以下の詳細を指定します。

図2 CloudWatch RUM の追加方法

Add app monitor を選択します。
表示された JavaScript のスニペットを一時的にメモ帳にコピーします。
Done を選択します。

SAP Fiori Launchpad PlugIn の作成

RUM クライアントをインストールするために、以下の手順で Fiori Launchpad 内にSAP Fiori Launchpad PlugInを作成します。

あなたのPCで、Visual Studio Code をインストールし、このブログに従って、Fiori Apps ジェネレータをインストールします。
Visual Studio – Fiori App Generator で、（例えば）”zrumplugin”という新しい SAPUI5 フリースタイルアプリを作成します。
“zrumplugin” アプリ内で、Component.js ファイルを、前節で一時的なメモ帳にコピーしたコードに置き換えます。以下のサンプルコードのような形になるはずです。

// START - This is the javascript provided by RUM.
// Required changes : 
// 1. ensure the client rum used is latest version (minimum 1.5.0)
// 2. disableAutoPageView: true, as we are recording manually every changes of semantic navigation (hash code)
// 3. routeChangeTimeout: 5000, it is assumed that maximum changes from every click is 5 seconds before timeout
// 4. sessionEventLimit: 0, this is useful for very active user that consumes more than 200 route changes in a session
(function (n, i, v, r, s, c, x, z) {
    x = window.AwsRumClient = {
        q: [],
        n: n,
        i: i,
        v: v,
        r: r,
        c: c
    };
    window[n] = function (c, p) {
        x.q.push({
            c: c,
            p: p
        });
    };
    z = document.createElement('script');
    z.async = true;
    z.src = s;
    document.head.insertBefore(z, document.head.getElementsByTagName('script')[0]);
})(
    'cwr',
    '99999999-9999-9999-9999-999999999999',
    '1.0.0',
    'us-east-1',
    'https://client.rum.us-east-1.amazonaws.com/1.5.0/cwr.js', {
        sessionSampleRate: 1,
        guestRoleArn: "arn:aws:iam::999999999999:role/RUM-Monitor-us-east-1-999999999999-3650668140561-Unauth",
        identityPoolId: "us-east-1:99999999-9999-9999-9999-9999999999#",
        endpoint: "https://dataplane.rum.us-east-1.amazonaws.com",
        telemetries: ["performance", "errors", "http"],
        allowCookies: true,
        enableXRay: false,
        disableAutoPageView: true,
        routeChangeTimeout: 5000,
        sessionEventLimit: 0
    }
);
// END - This is the javascript provided by RUM.
// START - This is required to record every navigation within the Fiori (Single Page Application)
sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "zrumplugin/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("zrumplugin.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            //Called after the plugin is loaded
            cwr('recordPageView',
                this.cleanHash(location.hash)
            );

            //Called when the hash is changed
            $(window).hashchange(function () {
                cwr('recordPageView',
                    this.cleanHash(location.hash)
                );
            }.bind(this));
        },

        cleanHash: function (sHash) {
            //Remove Guids and numbers from the hash to provide clean data
            //TODO:Remove everything between single quotes

            //return sHash.replace(/((\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1})|(\d)/g,"");
            if (sHash.indexOf("#") > -1) {
                if (sHash.split("#")[1].indexOf("?") > -1) {
                    if (sHash.split("#")[1].split("?")[0].indexOf("&") > -1) {
                        return sHash.split("#")[1].split("?")[0].split("&")[0];
                    } else {
                        return sHash.split("#")[1].split("?")[0];
                    }
                } else {
                    if (sHash.split("#")[1].indexOf("&") > -1) {
                        return sHash.split("#")[1].split("&")[0];
                    } else {
                        return sHash.split("#")[1];
                    }
                }
            } else {
                return sHash;
            }
        }
    });
});
// END - This is required to record every navigation within the Fiori (Single Page Application)

“npm run build”を実行し、SAPUI5 コードを確認する。
“npm run deploy”を実行し、SAPUI5 コードを SAP Fioriシステムにデプロイする。

Fiori カタログの作成と PFCG Role へのアタッチメント

次に、SAPGUIを使用して以下の手順で SAP Fiori Launchpad プラグインをユーザーに割り当てる必要があります。

SAP Transaction /UI2/FLPD_CONF（Fiori Launchpad Designer）を使用して Fiori Catalog “ZCATALOG_FM “を作成します。
SAP Transaction PFCG を使用してロール “ZNEXUS_RUM “を作成し、Fiori カタログ “ZCATALOG_FM “を追加します。
SAP Transaction PFCG 内の全ユーザーに Role “ZNEXUS_RUM “を割り当てます。

図 3 . Fiori カタログとPFCG の役割

RUM Instrumentationのテスト

まず、SAP Fiori Launchpad に移動します（https://..hostname../sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html）、..hostname…を自分の Fiori ホスト名に変更し、いくつかの Fiori アプリに移動してテストしてください。異なるブラウザ、デバイスを使用し、VPN メカニズムで異なる場所をシミュレートすることも可能です。Fiori アプリを実行したら、CloudWatch コンソールに戻り、結果を表示します（Cloudwatch – Application Monitoring – RUM）。
図 4 は、1週間以内のデバイス別のページロード数とロード時間、ユーザーのロケーションとパフォーマンス、セッション数、エラーのあるセッション、エラーの全体的な数を示しています。これにより、パフォーマンスの低下がユーザーの所在地によるものなのか、それとも使用されている特定のデバイスによるものなのか、特定することができます。

図 4 RUM の概要

図 5 は、セマンティック・オブジェクトとアクションに基づいてユーザーが Fiori アプリに移動したときの各ページとそのロード時間、およびエラー率を示しています（例：Customer-clearOpenItems は Clear Incoming Payments Fiori App を指します）。Fiori Apps の完全なリストとそのセマンティック・オブジェクトおよびアクションは、Fiori Apps Library で確認できます。

図 5 . ページのパフォーマンスページのパフォーマンス

図 6 は、「Largest contentful paint」、「First input delays」、「Cumulative layout shift」の各メトリクスを示しています。これらのメトリクスは、読み込み中にユーザーがアプリケーションをどのように体験するかを反映しています。たとえば、”コンテンツが表示されるまでの時間はどれくらいか？” “入力に反応するまでの時間は？”、” UI がどの程度ずれるか？”などです。これを利用して、Fiori Launchpad のユーザーに影響を与えるパフォーマンスの問題を特定することができます。より良いユーザーエクスペリエンスを目指すための指針として、Core Web Vitals をベースに「 Positive 」「 Tolerable 」「 Frustrating 」の閾値が定義されています。

図 6 ウェブ・バイタルウェブ・バイタル

図 7 は、Fiori Launchpad とアプリのフェッチとレンダリングに関連する各ステップの詳細なタイミングデータを提供するページロードステップの時間経過を示します。ページ・ロード・ステップの時間経過は、ページ・ロード・プロセスのどのステップに最も時間がかかっているかを示すことで、パフォーマンスの問題を診断するのに役立ちます。

図 7 . ページロードのステップの時間経過

図 8 は、エラーとセッションの測定基準を示しています。この測定基準は、ユーザーが遭遇する最も頻繁なエラーを理解し、優先順位をつけるために使用できます。例えば、HTTP 404 Not Found レスポンス・ステータス・コードは、サーバーが要求されたリソースを見つけることができないことを示します。これは、SAP Fiori Launchpad の壊れたリンクや死んだリンクを示しており、開発者または SAP が修正することができます。

図 8 . エラーとセッション

図 9 は、Fiori インスタンスへのアクセスに使用されたブラウザーの内訳を示し、各ブラウザーで発生したエラーの数を含んでいます。これは、アプリがどのブラウザーで失敗しているかを理解するのに役立ち、これらの組み合わせを使用してデバッグ作業を集中的に行うことができます。

図 9 . ブラウザとデバイス

図 10 は、FIori アプリのブラウザ別のパフォーマンスを示しています。これにより、特定のブラウザーに特有のパフォーマンスの問題を理解し、このブラウザーにデバッグ作業を集中させることができます。

図 10 . ブラウザとスループット別の平均ページロード時間

図 11 は、ユーザーがビジネス・プロセスを完了するためにどの Fiori アプリをクリックして移動したかを示すユーザー遷移を表しています。これは、SAP Fiori アプリの統合テストや回帰テストにおいて、注力すべき上位のビジネスプロセスを特定するのに役立ちます。

図 11 . ユーザー遷移

まとめ

このブログ記事では、SAP Fiori Launchpad のパフォーマンスを監視し最適化するために CloudWatch RUM を使用することで、どのようなメリットを得ることができるかを確認しました。CloudWatch RUM Instrumentation を使用すると、以下のメトリクスを通してSAP Fiori のパフォーマンスを監視することができます。

ページロード数とロード時間、ユーザーのロケーションとパフォーマンス、セッション数、エラーのあるセッション、一定時間内のデバイス別のエラー
ユーザーが特定の Fiori アプリに移動した際のページロード時間とエラー率
読み込み中にユーザーがアプリケーションをどのように体験するかを反映する、最大のコンテントフルペイント、最初の入力の遅延、累積レイアウトシフトメトリクス
Fiori Launchpad とアプリのフェッチとレンダリングに関連する各ステップの詳細なタイミング・データ
ユーザーが遭遇する最も頻繁に発生するエラーを理解し、優先順位をつけるために使用できるエラーとセッションの測定基準
ユーザーが使用したブラウザーの内訳と、特定のブラウザーで発生したエラーに焦点を当てることができる
Fiori Launchpad 上でユーザーがビジネス・プロセスを完了するためにクリックやナビゲーションを行う際のユーザー・ジャーニーを理解する

これを継続的に行うことで、エンドユーザーの SAP システムに対する信頼を獲得し、ビジネスプロセスの採用を改善し、ユーザーの生産性を向上させることができます。

SAP Fiori 以外にも、AWS CloudWatch RUM は SAP Enterprise Portal や SAP Cloud for Customers など、他の Web アプリケーションと統合することが可能です。SAP on AWSとAmazon CloudWatch Real User Monitoringの詳細については、AWS の製品ドキュメントを参照してください。

翻訳は Partner SA 松本が担当しました。原文はこちらです。

Amazon Web Services ブログ