Monitor and Optimize SAP Fiori User Experience on AWS

Introduction

SAP Fiori is the user interface component of modern SAP applications such as S/4HANA, which enables business users to execute their business critical processes within SAP. It is based on SAP’s own HTML5 implementation called SAPUI5 and relies on the HTTPs protocol and modern web browsers as the client. As you are operating SAP Fiori, it is important that you have a monitoring capability for all aspects of your SAP Fiori application.

On the client side, you may want to answer questions such as “Is the application loading quickly for my users?”, “Is the application throwing errors?”, or “What parts of my application are my users interacting with most?”. Amazon CloudWatch Real User Monitoring (RUM) is a real user monitoring tool to collect and view client-side data about your web application performance from actual user sessions in near real time which can help to answer these questions by providing visibility into how real users interact with, and experience web applications such as SAP Fiori. It is an AWS managed real user monitoring service which you can use to easily monitor and optimize to your SAP Fiori application.

What is Amazon CloudWatch RUM ?

Amazon CloudWatch RUM is part of CloudWatch’s digital experience monitoring along with Amazon CloudWatch Synthetics and Amazon CloudWatch Evidently. By providing near real-time data on client-side application behavior, CloudWatch RUM helps application developers and DevOps engineers quickly identify and debug a range of potential issues, thereby reducing mean time to resolve (MTTR) and improving how users experience your SAP Fiori instance.
CloudWatch RUM provides a number of curated dashboards which give SAP Fiori the ability to continuously monitor applications explore issues. Using these dashboards you can monitor: performance metrics like page load time and core web vitals, error metrics like JavaScript and HTTP errors, user flows and dropoffs and user interactions like button clicks.
When you have identified an issue, CloudWatch RUM helps you identify how many user sessions were impacted, helping you prioritize issues.
When you need to fix an issue, CloudWatch RUM helps you diagnose the issue by surfacing debugging data such as error messages, stack traces, and session records. Additionally, CloudWatch RUM enables you to obtain complete distributed traces, from client-side to backend infrastructure nodes, by integrating with CloudWatch ServiceLens and AWS X-Ray.

Figure 1. Interaction between SAP Fiori, the SAP Fiori user, CloudWatch RUM, and the DevOps engineer

Amazon CloudWatch RUM and SAP Fiori

To use CloudWatch RUM with your SAP Fiori instance, you must instrument your SAP Fiori instance with the open source Amazon CloudWatch RUM web client. As of release 1.5.0, the CloudWatch RUM web client supports route change timing in single page applications (SPA) like SAP Fiori. With this capability, the load time for every Fiori Apps or Tiles is captured and reported through CloudWatch RUM.
These are the questions that RUM can help to address for SAP Fiori customers:

Performance
- How quickly are the Fiori apps and launchpad loading ? are they slow ?
- Is any slowness related to specific user location/country ?
- What can I do to improve the performance of Fiori Launchpad and Fiori Tiles ?
Troubleshooting
- What are the Fiori apps that are generating errors ?
- Do these errors occur on specific browser or devices ?
- Which errors do I need to prioritize fixing?
Behavior
- What are my users most frequent workflows in Fiori?
- Which browsers and devices are used to access Fiori?
- What are the 10 most frequently used Fiori apps?
- Where are my Fiori users located?

How do I add CloudWatch RUM to SAP Fiori ?

Navigate to CloudWatch, then under “Application Monitoring”, select RUM.
Select “Add App Monitor”, then specify the details below.

Figure 2. How to add CloudWatch RUM

Select “Add app monitor”.
Copy the JavaScript snippet that is shown to a temporary notepad.
Select Done.

Creating SAP Fiori Launchpad PlugIn

In order to install RUM client, you create SAP Fiori Launchpad PlugIn within your Fiori Launchpad by following these steps:

In your PC, Install Visual Studio Code, Node.js, Yeoman and install Fiori App Generator as per this blog
In the Visual Studio – Fiori App Generator, you create a new SAPUI5 freestyle app, called “zrumplugin” (example).
Within “zrumplugin” app, you replace the Component.js file with the code that you copied to a temporary notepad in the last section. It should look similar to the sample code below.


// 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
// 5. cookeAttributes: true, this will help when there is multiple RUM App Monitor to use proper IAM role
(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.18.0/cwr.js',
    {
      sessionSampleRate: 1,
      identityPoolId: "us-east-1:999999999-9999-9999-9999-9999999999999",
      endpoint: "https://dataplane.rum.us-east-1.amazonaws.com",
      telemetries: ["performance","errors","http"],
      allowCookies: true,
	  cookieAttributes: 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.addEventListener(
                "hashchange",
                () => {
                  cwr("recordPageView", this.cleanHash(location.hash))
                },
                false,
            );
        },

        cleanHash: function (sHash) {
            //Remove Guids and numbers from the hash to provide clean data
            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)

Run “npm run build” to check the SAPUI5 code.
Run “npm run deploy” to deploy the SAPUI5 code into the SAP Fiori system.

Creating Fiori Catalog and attaching to PFCG Role

Next, you will need to assign the SAP Fiori Launchpad plugin to your users by following these steps using SAPGUI:

Create Fiori Catalog “ZCATALOG_FM” using SAP Transaction /UI2/FLPD_CUST (Fiori Launchpad Designer).
Within Fiori Catalog “ZCATALOG_FM”, Create the Target Mapping as per Figure 3.
Create Role “ZNEXUS_RUM” using SAP Transaction PFCG then add Fiori Catalog “ZCATALOG_FM”.
Assign Role “ZNEXUS_RUM” to all users within SAP Transaction PFCG.

Figure 3. Fiori Catalog, Target Mapping and PFCG Role

Test the RUM Instrumentation

First, navigate to SAP Fiori Launchpad (https://..hostname../sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html, please change ..hostname.. to your own Fiori hostname, and then navigate to a few Fiori Apps to test. You can use different browsers, devices and even simulate different location with VPN mechanism. Once you have exercised the Fiori Apps, navigate back to the CloudWatch console to view the results (Cloudwatch – Application Monitoring – RUM).
Figure 4 shows the overall number of Page loads with load time, user’s location with performance, number of sessions, sessions with errors, errors by device within one week interval. It helps you to identify whether the slow performance is due to user’s location or certain device used.

Figure 4. RUM Overview

Figure 5 shows each pages and its load time as well as error rate when user navigate to the Fiori App based on the semantic object and action (example: Customer-clearOpenItems refers to Clear Incoming Payments Fiori App) You can find the complete list of Fiori Apps with its semantic object and action in Fiori Apps Library.

Figure 5. Pages Performance

Figure 6 shows the Largest contentful paint, First input delays and Cumulative layout shift metrics. These metrics reflect how users experience the application while it is loading. For example, “How long does it take for content to appear?” “How long does it take to respond to input?”, and “To what extent does the UI shift?”. You can use this to identify user-impacting performance issues for Fiori Launchpad. The Positive, Tolerable and Frustrating thresholds are defined based on Core Web Vitals, as a guide to aim for better user experience.

Figure 6. Web Vitals

Figure 7 shows page load steps over time, which provides detailed timing data for each step associated with fetching and rendering the Fiori Launchpad and App. Page load steps over time helps you diagnose performance issues by telling you which step in the page load process is taking the longest.

Figure 7. Page loads steps over time

Figure 8 shows errors and session metrics, which you can use to understand and prioritize the most frequent errors encountered by users. An example below would be the HTTP 404 Not Found response status code indicates that the server cannot find the requested resource. This shows broken or dead links in the SAP Fiori Launchpad which can be fixed by developer or SAP..

Figure 8. Errors and Sessions

Figure 9 shows a breakdown of the browsers that were used to access the Fiori instance, including the number of errors that occurred on each browser. This can help you understand in which browsers your apps are failing, so you can focus your debugging effort using these combination.

Figure 9. Browsers and Devices

Figure 10 shows the performance of FIori apps by browser. This can help you understand performance issues that are unique to certain browsers, so you can focus your debugging effort on this browser.

Figure 10. Average page load time by browser and throughput

Figure 11 shows the user journey describing which Fiori Apps that the users have clicked and navigate through to complete their business processes. This can help identify the top business processes for you to focus during integration and regression testing of SAP Fiori apps.

Figure 11. User Journey

Conclusion

In this blog post, we saw how SAP customers can benefit from using Cloudwatch RUM to monitor and optimize SAP Fiori Launchpad performance. Using Cloudwatch RUM instrumentation, you can monitor the performance of SAP Fiori through the following metrics:

Number of page loads with load time, user’s location with performance, number of sessions, sessions with errors, errors by device within certain time interval
Page load time as well as error rate when user navigate to certain Fiori App
The largest contentful paint, first input delays and cumulative layout shift metrics, which reflect how users experience the application while it is loading
Detailed timing data for each step associated with fetching and rendering the Fiori Launchpad and Apps
Errors and session metrics, which you can use to understand and prioritize the most frequent errors encountered by users
Breakdown of the browsers used by users used and focus on errors generated on certain browser
Understand the user journey on Fiori Launchpad when they click and navigate to complete their business processes.

By doing this continuously you will gain end-users trust on SAP systems, improve adoption of business processes and increase users productivity.

Besides SAP Fiori, AWS CloudWatch RUM can also be integrated with other web applications such as SAP Enterprise Portal, SAP Cloud for Customers, and so on. You can find out more about SAP on AWS and Amazon CloudWatch Real User Monitoring from the AWS product documentation.

AWS for SAP