Unleashing the Synergy of AWS Amplify and CloudWatch RUM: Empowering Developer in Creating Fluid UX WebApp

For developers who want to develop and deploy full-stack applications in accelerated time, AWS Amplify offers a rich set of resources. This tool simplifies the architecture by offering ready-made building blocks for implementing an analytics system, user authentication, data, and a user interface for the frontend. However, Application performance and high-quality user experience always require a customized monitoring system. Amplify's integration with CloudWatch RUM provides a detailed and user-centric monitoring system. This feature provides application developers with a fine-grained view of application health within the AWS ecosystem. In this blog post, we will discuss the very nature of the integration of CloudWatch RUM and Amplify applications and show how this integration provides a monitoring and alarming system that offers key metrics and real time user analysis to sustain performance of applications over the desired threshold level.

AWS Amplify for Full-Stack Developers

The Amplify Experience

In the development landscape today, development of full-stack applications is like walking through a challenging path, the developer has to know the frontend frameworks, the backend, and the integration of both. This is where AWS Amplify comes into play. It isn't a standalone application. Rather, it is a full-blown platform that aims to simplify the app development process for users. The days of engineering complex backend setups and configuring all the required software derails the project timelines. With users of Amplify, the steps of authentication, data, and API are much easier to handle. When developing advanced mobile and web applications, everything is already integrated into one interface.

With Amplify, many key features are known to help in accelerating application development. Some of these include:

• Easy Setup: With the command line interface provided in Amplify, setting up the web applications and their management along with deployment is effortless as well. Few commands are all it takes to initialize the project in Amplify, making it easy to begin.
• Built-in Authentication: With Amplify, built in authentication services are offered which include signing in using username with password, using social media as well as OAuth. It provides the capability to developers to ensure secure user authentication and authorization within their applications with ease.
• Visual Development Simplified: No codes or venturing into backend development is required in Amplify Studio since it offers the capabilities of drag and drop.
• Hosting and CI/CD: One of the core functions of Amplify is the ability to help developers deploy web applications to the cloud by offering them hosting services coupled with simple single command execution. And with built-in CI/CD features that amplify provides, automating the processes of deployment or updating an application becomes straightforward.
• Backend Services: Amplify allows developers the flexibility to quickly establish backend services that include databases, storage and APIs. In some cases this is further extended by the integration with services offered by AWS such as Amazon DynamoDB, Amazon S3 and Amazon API Gateway that greatly simplify the configuration and management of backend infrastructure.
• Developer-Friendly Ecosystem: Amplify allows integration to a number of popular developer tools, including Figma and GitHub, so that working is smooth and easy. Also, the robust Amplify CLI grants users a lot of flexibility in configuring and deploying their resources.

Challenges of Lack of Effective Application Monitoring

To be ensured minimal application downtimes, realigning alerting and monitoring is important. Lack of application performance monitoring may prove to be challenging which leaves a room for poor user experience and thus affect the business outcomes. If there is a need to monitor the application, it can be done by third-party tools however, non-AWS solutions have their own challenges in terms of the use of these tools, such as:

• Limited Visibility: third-party software applications typically limit how much information or data developers acess to zoom in on users actual interactions with the app or the performance of the app in general. This can prevent the dev team from swiftly spotting issues while in trouble and greatly complicate optimization of the app ‘s performance.
• Manual Instrumentation: In some cases, user engagement needs to be instrumented into the code which can be cumbersome. A solution would be to have developers integrate specialized segments with the aim to log code embedding relevant metrics however those type of integrations can increase development time and add maintenance tasks.
• Fragmented Data Sources: Developing Performance metrics or user tracking programs without having a solid monitoring solution or a multitude of services usually results in diffused insights and extensive time in correlating multi source data. This results into difficulty for the developers to trace back the logic due to the scattered tools.
• Lack of Automation: In the absence of automated monitoring and alerting features the developers may perform manual monitoring and allow many of the performance issues to be informed by the users. This also means the response turns out to be late, the user experience gets worse, and more business risk is undertaken.

CloudWatch RUM to The Rescue

CloudWatch RUM (Real User Monitoring) is able to solve the above problems by providing a single tool that fully supports AWS cloud monitoring for web-based applications as experienced by real users. Looking through the Client-Side Logs has never been easier than with the CloudWatch RUM, where logs are provided together with pages showing their load times, client-side errors, and user behavior. RUM offers key capacities including:

• Real-time Insights: Ability to monitor the real time App performance as experienced by the users and this way you can trace problems affecting the App user experience.
• Debugging Capabilities: With CloudWatch RUM it is easy to find the root cause of client side performance failure, and the solution to an error is found thanks to the error messages, stack trace and user session.
• Customizable Data Visualization: Aggregate and segmentation data based on the browsers and devices used by the users to better understand the preferences and behavior of users.
• Retention and Flexibility: Retention period of end-user data is 30 days, but this period can be extended by sending data to CloudWatch Logs. Such flexibility allows you to keep historical data for long term purposes.
• Easy Integration: The Application Signals integration improves monitoring by offering a ready dashboard dedicated to viewing RUM data in conjunction with other monitoring metrics.
• Open Source: Users are free to view or improve the monitoring tools since RUM web client is an open source RUM web client.

In discussing impact on performance, it should be noted that not only is the CloudWatch RUM user experience very usable but also has been designed to have as minimal an impact as possible.

• Load Performance: The web client RUM web client is incorporated into the application without blocking the application’s loading process so there are no noticeable adverse effects on load times.
• Runtime Impact: RUM web client functions minimally interfering with the operations of the application so it has no effects on the performance of the application at runtime.
• Network Impact: Sending data to the CloudWatch RUM service is done at intervals and when the browser is about to unload, so it is not expected to cause any drop in application performance.

Integrating CloudWatch RUM in Amplify App

This will be illustrated in this example, where we will configure RUM CloudWatch to observe the number of times the application has returned a response with a 4XX status series through the use of CloudWatch Alarm. This adds an additional layer of monitoring and alerting which ensure that investigations to the health of the application using reasonable scope are made on time.

Configuration example

For this example, lets assume that there is an already existing amplify app built that responds to web requests and will focus on integrating RUM into the already existing amplify app using the AWS console.

First navigate towards CloudWatch page console and under Application Signals select RUM, you can create a RUM by the using Add app monitor. For use, we want to track the usage of our amplify app on *.amplifyapp.com which is the domain used for hosting the application.

Optional - In RUM data collection there is a capability of gathering other custom events and therefore defining characteristics of a user’s interaction with an application utilizing the CloudWatch RUM Web Client version 1.12.0 in the events payload with customer defined RUM events through the new API using user guide.

In our configuration, we would like to store CloudWatch logs in regards to telemetry of our application, this can be this in data storage setting.

RUM provides you with a code snippet after its setup is over which you can embed in the code of your application in order to install web client in your application.

While adding the code, it is advisable that aws-rum-web is installed first:

Include "aws-rum-web" package to the package file and use the aws-rum-web library in the frontend code:

• package.json

.......
"@mui/x-date-pickers": "6.18.1",
"@okta/jwt-verifier": "3.0.1",
"@okta/okta-auth-js": "7.4.3",
"aws-rum-web": "1.17.1",
"base64url": "3.0.1", 
"classnames": "2.3.2", 
"cookies-next": "2.1.1",    
.......        

• pages/_app.tsx

......
import { AwsRum, AwsRumConfig } from 'aws-rum-web' 

const ToastMessage = dynamic(() => 

import('@/components/ToastMessage').then((mod) => mod.ToastMessage), 

@@ -74,6 +76,36 @@ export default function App({ 

setShowExpiredToast(true) 

}, []) 

 

useEffect(() => { 

try { 

const config: AwsRumConfig = { 

sessionSampleRate: 1, 

guestRoleArn: 

'arn:aws:iam::XXXXX-XXXXX-Unauth', 

identityPoolId: 'us-east-1:XXXXX, 

endpoint: XXXXX 

telemetries: ['performance', 'errors', 'http'], 

allowCookies: true, 

enableXRay: false, 

} 

 

const APPLICATION_ID = 'c479a2e0-bb58-4124-87d6-06b17762b89a' 

const APPLICATION_VERSION = '1.0.0'         

 const APPLICATION_REGION = 'us-east-1' 

 

const awsRum = new AwsRum( 

APPLICATION_ID, 

APPLICATION_VERSION, 

APPLICATION_REGION, 

config, 

) 

console.log(awsRum) 

} catch (error) { 

// Ignore errors thrown during CloudWatch RUM web client initialization 

console.log('error aws rum', error) 

} 

}, []) 
......        

Append the RUM web client code snippet with your application code in Amplify and run an Amplify build, then deploy it in Amplify application. This should enable your application to begin sending telemetric data to CloudWatch RUM.

Test the CloudWatch RUM after setting it up for the Amplify app by visiting your app url and wait for the RUM metric to refresh on its main dashboard. The metric dashboard has high level summary featured on Overview page which provides insights on application performance and user journey tracing that can be found on each topics tab.

Proactive monitoring with RUM metric-based CloudWatch Alarm

Setting up alarm using default RUM metric

Proactive monitoring can be done with the help of CloudWatch against default RUM metric based monitoring alarms (see more), we wish to implement CloudWatch alarm based on a particular RUM metric in order to be more responsive to web traffic errors and send notifications in as close to real time as possible.

Select create alarm in the RUM Configuration tab, which takes you to the CloudWatch Alarm page.

Among the alarm metric metrics, the CloudWatch RUM metrics are contained in the AWS/RUM namespace. Let us first create an alarm to alert developers concerning the high volume of 4xx response status codes returned in the HTTP response of an application. The alarm will trigger an action to email via the SNS topic.

Optional - Setting up alarm using default RUM extended metric

Moreover, a great additional feature is that you can also set up is the RUM extended metrics, which allow you to get a more detailed comprehension over some specific areas of interest. For instance, metrics related to a certain page that users interact with, or metrics related to users in a certain geographical location. Here, we also want to be alerted on errors during ‘create account’ page which is over the web application.

Initially, we set up a sending metrics for the extended metric and in this case, for the “create-account” page, we add the ability to configure the HttpErrorCount metric to measure all the http errors and choose the application “create-account” page id.

Once the extended metric is configured, the create alarm button will automatically select the “create account” page metric to set up the alarm enabling a detailed configuration of the CloudWatch alarm for that page.

Using this alarm which is activated by the extended metric, we are able to receive independent notifications for the most important application page.

Conclusion

To summarize, the combination of CloudWatch RUM with AWS Amplify offers a native solution for developers who want to enhance both application performance and user experience. With easy configuration requirements, this integration does near real time application monitoring and enhances visibility into the application’s health and user activities across the AWS platform. Thus, in the event of a potential problem, developers were able to set alarms and get alerted so clients would continue enjoying the application with zero performance hiccups. Now, AWS Amplify users are able to build applications freely and deploy them while maintaining configurations in-place for proctive monitoring and alerting.

References

AWS CloudWatch – User Guide: https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html

AWS Amplify ?– User Guide: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html

Authors

Clement Pakkam Isaac

Clement Pakkam Isaac is a Specialist Senior at Deloitte Consulting and an accomplished cloud infrastructure architect with 14 AWS certifications. With over 12 years of experience in technical consulting and leadership, he has architected and delivered large-scale cloud solutions for higher education and consumer industries. Clement’s expertise encompasses automation, infrastructure as code, resilience, observability, security, risk management, migration, modernization, and digital transformation. A trusted advisor to clients, he empowers organizations to adopt cutting-edge cloud practices and drive innovation through scalable and secure infrastructure solutions.

Vinny Wang

Vinny Wang is a Software Engineer/Consultant at Deloitte Consulting, specializing in Cloud Engineering on the AWS platform. With extensive experience in developing end-to-end data and machine learning solutions across multiple industries, he excels at creating effective solutions in all stages of cloud infrastructure and machine learning project cycles.

Sponsor

Gowtham Ramu

Gowtham Ramu is a Specialist Leader in Cloud Engineering at Deloitte Consulting, bringing over 24 years of experience in crafting solutions that span various industries. His expertise lies in developing Cloud Native solutions at scale, with a strong focus on data engineering. With more than 10 AWS certifications, he instills in his team a commitment to continuous learning as a fundamental principle.