Monitor and Optimize SAP Fiori User Experience on AWS
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.
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:
- 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 ?
- 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?
- 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”.
- 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.
- 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. 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
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.